​

function setup() {

  createCanvas(400, 400);

  // initialize 20 balls with random properties

  for (let i = 0; i < 20; i++) {

    addBall();

  }

}

​

function draw() {

  background(0); 

​

  // update and display each ball

  for (let ball of balls) {

    ball.update();

    ball.display();

  }

}

​

// create a new ball with random properties and add it to the array

function addBall() {

  let x = random(width);

  let y = random(height);

  let r = random(10, 30); // random radius between 10 and 30

  let vx = random(-3, 3); // random x velocity

  let vy = random(-3, 3); // random y velocity

  let col = color(random(255), random(255), random(255)); // random color

  balls.push(new Ball(x, y, r, vx, vy, col)); // add new ball to the array

}

​

// Ball class to define properties and behavior of each ball

class Ball {

  constructor(x, y, r, vx, vy, col) {

    this.x = x;   // x position

    this.y = y;   // y position

    this.r = r;   // radius of the ball

    this.vx = vx; // velocity in x direction

    this.vy = vy; // velocity in y direction

    this.col = col; // color of the ball

  }

  update() {

    // update ball position by adding velocity

    this.x += this.vx;

    this.y += this.vy;

    // reverse direction (bounce) when hitting the canvas edges

    if (this.x + this.r > width || this.x - this.r < 0) this.vx *= -1;

    if (this.y + this.r > height || this.y - this.r < 0) this.vy *= -1;

  }

  display() {

    // set fill color and draw the ball

    fill(this.col);

    noStroke(); // no outline for the ball

    ellipse(this.x, this.y, this.r * 2); // draw circle using diameter (2 * radius)

  }

}

​

// create a new ball when the mouse is pressed

function mousePressed() {

  addBall(); // call function to add a new ball

}

​