# Moving from processing with java to P5.js

**URL:** <https://discourse.processing.org/t/moving-from-processing-with-java-to-p5-js/14912>\
**Category:** Coding Questions\
**Created:** [October 24, 2019, 2:36am UTC](https://discourse.processing.org/t/moving-from-processing-with-java-to-p5-js/14912 "2019-10-24T02:36:34Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Velouria](https://avatars.discourse-cdn.com/v4/letter/v/ac91a4/32.png) [@Velouria](https://discourse.processing.org/u/Velouria)\
**Post date:** [October 24, 2019, 2:36am UTC](https://discourse.processing.org/t/moving-from-processing-with-java-to-p5-js/14912/1 "2019-10-24T02:36:34Z")

</div>

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!!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 24, 2019, 3:14am UTC](https://discourse.processing.org/t/moving-from-processing-with-java-to-p5-js/14912/2 "2019-10-24T03:14:17Z")

</div>

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/](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.

---

<div class="post-metadata">

**Author:** ![Velouria](https://avatars.discourse-cdn.com/v4/letter/v/ac91a4/32.png) [@Velouria](https://discourse.processing.org/u/Velouria)\
**Post date:** [October 24, 2019, 3:22am UTC](https://discourse.processing.org/t/moving-from-processing-with-java-to-p5-js/14912/3 "2019-10-24T03:22:15Z")

</div>

Thanks! Will do from now on.  
Here’s the link: [https://editor.p5js.org/Sofia\_D/present/lTj\_tvmjw](https://editor.p5js.org/Sofia_D/present/lTj_tvmjw)

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

```auto

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

  }

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 24, 2019, 3:25am UTC](https://discourse.processing.org/t/moving-from-processing-with-java-to-p5-js/14912/4 "2019-10-24T03:25:58Z")

</div>

-a- thanks and is that solved?  
-b- please link to the edit mode  
[https://editor.p5js.org/Sofia\_D/sketches/lTj\_tvmjw](https://editor.p5js.org/Sofia_D/sketches/lTj_tvmjw)  
not the /present/ mode

---

<div class="post-metadata">

**Author:** ![Velouria](https://avatars.discourse-cdn.com/v4/letter/v/ac91a4/32.png) [@Velouria](https://discourse.processing.org/u/Velouria)\
**Post date:** [October 24, 2019, 3:27am UTC](https://discourse.processing.org/t/moving-from-processing-with-java-to-p5-js/14912/5 "2019-10-24T03:27:08Z")

</div>

Sorry!  
[https://editor.p5js.org/Sofia\_D/sketches/lTj\_tvmjw](https://editor.p5js.org/Sofia_D/sketches/lTj_tvmjw)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 24, 2019, 3:30am UTC](https://discourse.processing.org/t/moving-from-processing-with-java-to-p5-js/14912/6 "2019-10-24T03:30:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Velouria](https://avatars.discourse-cdn.com/v4/letter/v/ac91a4/32.png) [@Velouria](https://discourse.processing.org/u/Velouria)\
**Post date:** [October 24, 2019, 3:45am UTC](https://discourse.processing.org/t/moving-from-processing-with-java-to-p5-js/14912/7 "2019-10-24T03:45:27Z")

</div>

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

```auto
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;
    }
  }

}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 24, 2019, 4:25am UTC](https://discourse.processing.org/t/moving-from-processing-with-java-to-p5-js/14912/8 "2019-10-24T04:25:02Z")

</div>

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](https://editor.p5js.org/kll/sketches/8c0ZTMlsZ)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 24, 2019, 12:58pm UTC](https://discourse.processing.org/t/moving-from-processing-with-java-to-p5-js/14912/9 "2019-10-24T12:58:37Z")

</div>

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](https://editor.p5js.org/kll/sketches/fU-y6GXWM)