let colors = ['#D43C8F', '#4EC0E1', '#70BA2B', '#F3EB33']; // Fixed colors array

​

function setup() {

  createCanvas(400, 400, WEBGL);

  // Create four balls with unique colors and random sizes

  for (let i = 0; i < colors.length; i++) {

    balls.push(new Ball(random(-200, 200), random(-200, 200), random(20, 50), colors[i]));

  }

}

​

function draw() {

  background(0); // Set background to black

​

  // Rotate the scene for a dynamic view

  rotateY(frameCount * 0.01);

​

  // Update and display each ball

  for (let ball of balls) {

    ball.update();

    ball.show();

  }

}

​

class Ball {

  constructor(x, y, size, color) {

    this.pos = createVector(x, y, 0); // Position in 3D space

    this.size = size; // Size of the ball

    this.velocity = createVector(0, random(-5, -2), 0); // Initial upward velocity

    this.gravity = createVector(0, 0.2, 0); // Gravity effect

    this.color = color; // Set the ball's color

  }

​

  update() {

    // Apply gravity to the ball

    this.velocity.add(this.gravity);

    this.pos.add(this.velocity);

​

    // Bounce off the "ground"

    if (this.pos.y > 200 - this.size / 2) {

      this.pos.y = 200 - this.size / 2; // Reset position

      this.velocity.y *= -0.8; // Reverse and reduce velocity for bounce

    }

  }

​

  show() {

    fill(this.color); // Use the unique color for this ball

    push();

    translate(this.pos.x, this.pos.y, this.pos.z);

    sphere(this.size); // Draw the ball

    pop();

  }

}

​