let y;

let speedX = 3;

let speedY = 5;

let d = 50;

​

let ball = {

  x: 0,

  y: 0,

  speedX: 3,

  speedY: 5,

  d: 50

};

​

let myCoolerBall = {

  x: 0,

  y: 0,

  speedX: 3,

  speedY: 5,

  d: 100

};

​

let myCoolestBall = {

  x: 0,

  y: 0,

  speedX: 3,

  speedY: 5,

  d: 100

};

​

let bg = {

  r: 255,

  g: 0,

  b: 0

}

​

function clearCanvas(r, g, b) {

  background(r, g, b);

}

​

function drawBall(x, y, d, ballColor) {

  fill(ballColor);

  circle(x, y, d);

}

​

function initializeBall(b) {

  b.x = width/2;

  b.y = height/2;

  b.speedX = random(-10, 10);

  b.speedY = random(-10, 10);

  b.d = random(20, 100);

}

​

function updateBall(ball) {

  ball.x = ball.x + ball.speedX;

  ball.y = ball.y + ball.speedY;

  if (ballAtHorizontalWall(ball)) {

    ball.speedX = -ball.speedX;

  }

  if (ballAtVerticalWall(ball)) {

    ball.speedY = -ball.speedY; 

  } 

}

​

function ballAtHorizontalWall(ball) {

  return ball.x > width - ball.d/2 || ball.x < ball.d/2; 

}

​

function ballAtVerticalWall(ball) {

  return ball.y > height - ball.d/2 || ball.y < ball.d/2;

}

​

function mousePressed() {

  bg = randomColor();

}

​

function randomColor() {

  return {

    r: random(0, 255),

    g: random(0, 555),

    b: random(0, 255)

  };

}

​

function setup() {

  createCanvas(400, 400);

  initializeBall(ball);

  initializeBall(myCoolerBall);

  initializeBall(myCoolestBall);

}

​

function draw() {

  // clearing the canvas

  clearCanvas(bg.r, bg.g, bg.b);

  // drawing

  drawBall(ball.x, ball.y, ball.d, 0);

  updateBall(ball);

  drawBall(myCoolerBall.x, myCoolerBall.y, myCoolerBall.d, 220);

  updateBall(myCoolerBall);

  drawBall(myCoolestBall.x, myCoolestBall.y, myCoolestBall.d, 127);

  updateBall(myCoolestBall);

}

​

​