let myBall2;

​

function setup() {

  createCanvas(400, 400);

  myBall = new BouncingBall(200, 100, color(255, 0, 0)); // Red ball

  myBall2 = new BouncingBall(50, 50, color(0, 0, 255)); // Blue ball

}

​

function draw() {

  background(220);

  myBall.move();

  myBall.display();

  myBall2.move();

  myBall2.display();

}

​

class BouncingBall {

  constructor(startX, startY, startColor) {

    this.x = startX;

    this.y = startY;

    this.color = startColor;

    this.diameter = 20;

    this.speedX = random(1, 3); // Random initial horizontal speed

    this.speedY = random(1, 3); // Random initial vertical speed

    this.colorChangeRate = 1; // Rate of color change

    this.sizeChangeRate = 0.1; // Rate of size change

  }

​

  move() {

    this.x += this.speedX;

    this.y += this.speedY;

​

    if (this.x <= 0 || this.x >= width) {

      this.speedX *= -1;

    }

    if (this.y <= 0 || this.y >= height) {

      this.speedY *= -1;

    }

​

    this.color = this.changeColor(this.color);

    this.diameter += this.sizeChangeRate;

  }

​

  display() {

    fill(this.color);

    ellipse(this.x, this.y, this.diameter, this.diameter);

  }

​

  changeColor(c) {

    let r = red(c);

    let g = green(c);

    let b = blue(c);

​

    // Increment color components gradually

    r = (r + this.colorChangeRate) % 256;

    g = (g + this.colorChangeRate) % 256;

    b = (b + this.colorChangeRate) % 256;

​

    return color(r, g, b);

  }

}