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

p5.js Coding Questions
1

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.

   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:

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);
  }
}
3

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

4

I posted by Mistake

Sorry

5

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

6

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

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);
  }
}
1 Like
7
8

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

9

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

10

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

11

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

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);
    }
}
12

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

13

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

1 Like