​

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 i = balls.length - 1; i >= 0; i--) { // loop backwards to safely remove elements

    let ball = balls[i];

    ball.update();

    ball.display();

    // check for mouse over to zap the ball

    if (dist(mouseX, mouseY, ball.x, ball.y) < ball.r) {

      balls.splice(i, 1); // remove the ball from the array

    }

    // check for proximity to other balls to change color

    for (let j = i + 1; j < balls.length; j++) {

      let otherBall = balls[j];

      let d = dist(ball.x, ball.y, otherBall.x, otherBall.y);

      // if balls are close enough, change their colors

      if (d < ball.r + otherBall.r) {

        ball.changeColor(); // change ball color

        otherBall.changeColor(); // change other ball color

      }

    }

  }

}

​

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

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

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

  let vy = (mouseY - y) * 0.01; // move towards mouseY slowly

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

}

​

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

  }

​

  changeColor() {

    // change the ball's color to a random color

    this.col = color(random(255), random(255), random(255));

  }

}

​

// create a new ball when the mouse is pressed

function mousePressed() {

  addBall(mouseX, mouseY); // add new ball towards the mouse position

}

​