Moving from processing with java to P5.js

p5.js Coding Questions
1

Hi there!
Been using the java platform and recentley i’ve started to use the p5 platform. Really cool!
However, I have this function for a bouncing ball that works perfectly in Java but doesnt work on js and I cant find the error!

moveX() {
let xSpeed = 1;
this.x = this.x + xSpeed;
if(x >=700 || x <= 50){
xSpeed = xSpeed * -1;
}
}

Its the conditional statement the code that fails. There’s no error on the console, simply the program doesnt do what’s supposed to.
Help please!!

2

hi, welcome Velouria

-a- posting code please use the </> Preformatted text button from the editor menu,
-b- but as you want use p5.js please link to your project ( or MVCS ) at
https://editor.p5js.org/
so we see the whole thing and can play with it.

i noted you use
x and this.x
what possibly is not same.

3

Thanks! Will do from now on.
Here’s the link: https://editor.p5js.org/Sofia_D/present/lTj_tvmjw

and I noticed i wrote the function wrong the last time, so here goes again:


  moveX() {
    let xSpeed = 1;
    this.x = this.x + xSpeed;
    if (this.x > width - this.r*2 || this.x < this.r*2) {
xSpeed =  xSpeed *-1
    }

  }
1 Like
4

-a- thanks and is that solved?
-b- please link to the edit mode
https://editor.p5js.org/Sofia_D/sketches/lTj_tvmjw
not the /present/ mode

5

Sorry!
https://editor.p5js.org/Sofia_D/sketches/lTj_tvmjw

6

-a- is the flickering design or a problem?
-b- where you get the bubbles class from?

7

The problem’s that the bubbles should bounce once they get to the edge of the canvas but instead they keep mooving and dissapear. :frowning:
The class is in another js file, here it is:

class Bubble {

  constructor(x, y, r) {

    this.x = x
    this.y = y
    this.r = r

  }

  display() {
    stroke(127);
    //   fill(100,100,100);
    ellipse(this.x, this.y, this.r*2 );

  }

  moveX() {
    let xSpeed = 1;
    this.x = this.x + xSpeed;
    if (this.x > width - this.r*2 || this.x < this.r*2) {
xSpeed =  xSpeed *-1
    }
 //console.log(xSpeed)
  }

  moveY() {
    let ySpeed = random(2);
    this.y = this.y - ySpeed;
    if (this.y > height- this.r*2 || this.y < this.r*2) {
   ySpeed = ySpeed *-1

    }
   
  }

  overlaps(other) {
    let d = dist(this.x, this.y, other.x, other.y);
    if (d <= this.r + other.r) {
      return true;
    } else {
      return false;
    }
  }

}
8

again, now we can work online
( no need to post code )
and regarding your question i make a copy ( file / duplicate ) of yours,
reduced it down to your class move question
( and cleaned up )
https://editor.p5js.org/kll/sketches/8c0ZTMlsZ

3 Likes
9

based on your code i looked for a working collision
and made this ( but rewrite all for use vectors ( you understand ? ) )
https://editor.p5js.org/kll/sketches/fU-y6GXWM