// Add 3 more, 1 moving left, 1 moving up, 1 moving down.

​

// ****************************************************************

​

let canvasWidth = 800;

let canvasHeight = 600;

​

let circleSize = 50;

let rightCircleX, leftCircleX, upCircleY, downCircleY;

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  // Initialize positions

  rightCircleX = width / 2;

  leftCircleX = width / 2;

  upCircleY = height / 2;

  downCircleY = height / 2;

}

​

function draw() {

  background(230, 230, 250); // Lavender background

​

  // Move the circles

  rightCircleX += 2; // Move right

  leftCircleX -= 2;  // Move left

  upCircleY -= 2;    // Move up

  downCircleY += 2;  // Move down

​

  // Draw the circles

  fill(255, 180, 250); // Pink, moving right

  ellipse(rightCircleX, height / 2, circleSize);

​

  fill(100, 255, 100); // Green, moving left

  ellipse(leftCircleX, height / 2, circleSize);

​

  fill(100, 220, 255); // Blue, moving up

  ellipse(width / 2, upCircleY, circleSize);

​

  fill(255, 213, 128); // Orange, moving down

  ellipse(width / 2, downCircleY, circleSize);

}

​