​

function setup() {

  createCanvas(400, 400);

  // initialize 20 balls with random properties

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

    addBall(random(width), random(height)); // random positions for initial balls

  }

}

​

function draw() {

  background(0); // black background

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

// accepts x and y parameters to position the ball at the mouse's location when clicked

function addBall(x, y) {

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

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

  // calculate direction towards mouse

  // new ball's velocity (vx and vy) is calculated based on the direction from the ball's initial position to the mouse's position, multiplied by a small factor (0.01) for slow movement towards the mouse.

  let vx = (mouseX - x) * 0.01; // move towards mouseX slowly

  let vy = (mouseY - y) * 0.01; // ""

  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(mouseX, mouseY); // add new ball towards the mouse position

}

​

​

​

​

​