# Converting code from processing to p5.js (bouncing balls)

**URL:** <https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612>\
**Category:** Coding Questions\
**Created:** [April 24, 2019, 10:29pm UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612 "2019-04-24T22:29:07Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![keshavv\_123](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/keshavv_123/32/4217_2.png) [@keshavv\_123](https://discourse.processing.org/u/keshavv_123)\
**Post date:** [April 24, 2019, 10:29pm UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/1 "2019-04-24T22:29:07Z")

</div>

I changed a example from processing to p5.js but some part of it did’nt change from me. I’m need your help to convert them.

This is the part of the code that I want to convert them in to p5.js.

```auto
   for (let i = balls.length - 1; i >= 0; i--) { 
    // An ArrayList doesn't know what it is storing so we have to cast the object coming out
   Ball ball = balls.get(i);
   ball.move();
  ball.display();
  if (ball.finished()) {
  balls.remove(i);
    }

```

but the whole example will be given below:

```auto
let balls = [];
let ballWidth = 48;

function setup() {
  createCanvas(640, 360);
  noStroke();
  
  // Start by adding one element
  balls.push(new Ball(width/2, 0, ballWidth));
}

function draw() {
  background(255);

  // With an array, we say balls.length, with an ArrayList, we say balls.size()
  // The length of an ArrayList is dynamic
  // Notice how we are looping through the ArrayList backwards
  // This is because we are deleting elements from the list  
  for (let i = balls.length - 1; i >= 0; i--) { 
    // An ArrayList doesn't know what it is storing so we have to cast the object coming out
   Ball ball = balls.get(i);
   ball.move();
  ball.display();
  if (ball.finished()) {
  balls.remove(i);
    }
  }  
}

function mousePressed() {
  // A new ball object is added to the ArrayList (by default to the end)
  balls.push(new Ball(mouseX, mouseY, ballWidth));
}

// Simple bouncing ball class

class Ball {
  constructor(tempX, tempY, tempW) {
    this.x = tempX;
    this.y = tempY;
    this.w = tempW;
    this.speed = 0;
    this.gravity = 0.1;
    this.life = 255;
  }
  
    move() {
    // Add gravity to speed
    this.speed = this.speed + this.gravity;
    // Add speed to y location
    this.y = this.y + this.speed;
    // If square reaches the bottom
    // Reverse speed
    if (this.y > height) {
      // Dampening
      this.speed = this.speed * -0.8;
      this.y = height;
    }
  }
  
  finished() {
    // Balls fade out
    this.life--;
    if (this.life < 0) {
      return true;
    } else {
      return false;
    }
  }
    display() {
    // Display the circle
    fill(0,this.life);
    //stroke(0,life);
    ellipse(this.x,this.y,this.w,thus.w);
  }
}

```

---

<div class="post-metadata">

**Author:** ![keshavv\_123](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/keshavv_123/32/4217_2.png) [@keshavv\_123](https://discourse.processing.org/u/keshavv_123)\
**Post date:** [April 24, 2019, 11:15pm UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/3 "2019-04-24T23:15:33Z")

</div>

Hi @Chrisir I don’t understand what you are trying to tell me?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 24, 2019, 11:29pm UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/4 "2019-04-24T23:29:06Z")

</div>

I posted by Mistake

Sorry

---

<div class="post-metadata">

**Author:** ![keshavv\_123](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/keshavv_123/32/4217_2.png) [@keshavv\_123](https://discourse.processing.org/u/keshavv_123)\
**Post date:** [April 25, 2019, 4:41am UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/5 "2019-04-25T04:41:37Z")

</div>

Can you please help me. how am I convert this code in p5.js?

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [April 25, 2019, 6:32am UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/6 "2019-04-25T06:32:36Z")

</div>

you don’t have the balls array initialised. you also are trying to use array functions from processing (.get(i) and others) you can read up about array functions by searching for javascript array tutorial

```auto
let ballWidth = 48;
var balls;
function setup() {
  createCanvas(640, 360);
  noStroke();
  
  balls = [];
  // Start by adding one element
  balls.push(new Ball(width/2, 0, ballWidth));
}

function draw() {
  background(255);

  // With an array, we say balls.length, with an ArrayList, we say balls.size()
  // The length of an ArrayList is dynamic
  // Notice how we are looping through the ArrayList backwards
  // This is because we are deleting elements from the list  
  for (let i = balls.length - 1; i >= 0; i--) { 
    // An ArrayList doesn't know what it is storing so we have to cast the object coming out
   var ball = balls[i];
   ball.move();
   ball.display();
   if(ball.finished()) {
      balls.splice(i, 1);
    }
  }  
}

function mousePressed() {
  // A new ball object is added to the ArrayList (by default to the end)
  balls.push(new Ball(mouseX, mouseY, ballWidth));
}

// Simple bouncing ball class

class Ball {
  constructor(tempX, tempY, tempW) {
    this.x = tempX;
    this.y = tempY;
    this.w = tempW;
    this.speed = 0;
    this.gravity = 0.1;
    this.life = 255;
  }
  
    move() {
    // Add gravity to speed
    this.speed = this.speed + this.gravity;
    // Add speed to y location
    this.y = this.y + this.speed;
    // If square reaches the bottom
    // Reverse speed
    if (this.y > height) {
      // Dampening
      this.speed = this.speed * -0.8;
      this.y = height;
    }
  }
  
  finished() {
    // Balls fade out
    this.life--;
    if (this.life < 0) {
      return true;
    } else {
      return false;
    }
  }
    display() {
    // Display the circle
    fill(0,this.life);
    //stroke(0,life);
    ellipse(this.x,this.y,this.w,this.w);
  }
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 25, 2019, 6:46am UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/7 "2019-04-25T06:46:46Z")

</div>

> **[r/processing - OpenProcessing: converting code written in Java to JavaScript](https://www.reddit.com/r/processing/comments/7dqqvh/openprocessing_converting_code_written_in_java_to/dq0ecac/)**
>
> 10 votes and 14 comments so far on Reddit

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 25, 2019, 6:46am UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/8 "2019-04-25T06:46:46Z")

</div>

in processing we use `balls.remove(i)` for `ArrayList`, in p5 we got balls.splice(i, 1).  
define `var ball = []` first.

---

<div class="post-metadata">

**Author:** ![keshavv\_123](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/keshavv_123/32/4217_2.png) [@keshavv\_123](https://discourse.processing.org/u/keshavv_123)\
**Post date:** [April 25, 2019, 7:09am UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/9 "2019-04-25T07:09:41Z")

</div>

Thanks all of you It’s really helpful for me. but I don’t understand how I define  
`Ball ball = balls.get(i);`  
this line in p5.js

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 25, 2019, 7:12am UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/10 "2019-04-25T07:12:51Z")

</div>

you dont need to define what ball type just  
`ball = balls[i]`

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 25, 2019, 7:18am UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/11 "2019-04-25T07:18:53Z")

</div>

this is one of many ways how to convert  
try to understand what changes

```auto
let ballWidth = 48;
let balls = []
function setup() {
  createCanvas(640, 360);
  noStroke();

  // Start by adding one element
  balls.push(new Ball(width/2, 0, ballWidth));
}

function draw() {
  background(255);

  // With an array, we say balls.length, with an ArrayList, we say balls.size()
  // The length of an ArrayList is dynamic
  // Notice how we are looping through the ArrayList backwards
  // This is because we are deleting elements from the list
    for (let i = balls.length - 1; i >= 0; i--) {
        // An ArrayList doesn't know what it is storing so we have to cast the object coming out
        ball = balls[i]
        ball.move();
        ball.display();
        if (ball.finished()) {
            balls.splice(i, 1);
        }
    }
}

function mousePressed() {
  // A new ball object is added to the ArrayList (by default to the end)
  balls.push(new Ball(mouseX, mouseY, ballWidth));
}

// Simple bouncing ball class

 function Ball(tempX, tempY, tempW) {
    this.x = tempX;
    this.y = tempY;
    this.w = tempW;
    this.speed = 0;
    this.gravity = 0.1;
    this.life = 255;

    this.move = function() {
        // Add gravity to speed
        this.speed = this.speed + this.gravity;
        // Add speed to y location
        this.y = this.y + this.speed;
        // If square reaches the bottom
        // Reverse speed
        if (this.y > height) {
          // Dampening
          this.speed = this.speed * -0.8;
          this.y = height;
        }
    }

    this.finished = function() {
        // Balls fade out
        this.life--;
        if (this.life < 0) {
          return true;
        } else {
          return false;
        }
    }
    this.display = function() {
        // Display the circle
        fill(0,this.life);
        //stroke(0,life);
        ellipse(this.x,this.y,this.w,this.w);
    }
}

```

---

<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:** [April 25, 2019, 7:21am UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/12 "2019-04-25T07:21:28Z")

</div>

but actually that  
“ball” thing ( a single ball from balls ) is not needed at all  
just use the  
balls[i]

[https://editor.p5js.org/kll/sketches/7ZIWNamQk](https://editor.p5js.org/kll/sketches/7ZIWNamQk)

---

<div class="post-metadata">

**Author:** ![keshavv\_123](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/keshavv_123/32/4217_2.png) [@keshavv\_123](https://discourse.processing.org/u/keshavv_123)\
**Post date:** [April 25, 2019, 7:43am UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612/13 "2019-04-25T07:43:22Z")

</div>

Thanks @kll and @humayung I understand how I convert them.