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

  // Add 4 more, each moving towards each of the 4 corners of the canvas.

​

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

​

let canvasWidth = 800;

let canvasHeight = 600;

​

let circleSize = 50;

let rightCircleX, leftCircleX, upCircleY, downCircleY;

let cornerCircles = []; // array to hold corner circles

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  // initialize positions for main circles

  rightCircleX = width / 2;

  leftCircleX = width / 2;

  upCircleY = height / 2;

  downCircleY = height / 2;

​

  // initialize corner circles

  cornerCircles.push({ x: width / 2, y: height / 2, targetX: 0, targetY: 0 }); // top-left

  cornerCircles.push({ x: width / 2, y: height / 2, targetX: width, targetY: 0 }); // top-right

  cornerCircles.push({ x: width / 2, y: height / 2, targetX: 0, targetY: height }); // bottom-left

  cornerCircles.push({ x: width / 2, y: height / 2, targetX: width, targetY: height }); // bottom-right

}

​

function draw() {

  background(230, 230, 250);

​

  // move the main circles

  rightCircleX += 2; // move right

  leftCircleX -= 2;  // move left

  upCircleY -= 2;    // move up

  downCircleY += 2;  // move down

​

  // draw main circles

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

  ellipse(rightCircleX, height / 2, circleSize);

  fill(180, 255, 180); // light 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);

​

  // move and draw corner circles

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

    let circle = cornerCircles[i];

​

    // move toward the target position

    circle.x += (circle.targetX - circle.x) * 0.01; // move toward target X

    circle.y += (circle.targetY - circle.y) * 0.01; // mve toward target Y

​

    // set lighter colors for corner circles

    switch (i) {

      case 0: fill(255, 200, 200); break; // light pink for top-left

      case 1: fill(200, 255, 200); break; // light green for top-right

      case 2: fill(200, 200, 255); break; // light blue for bottom-left

      case 3: fill(255, 230, 200); break; // light orange for bottom-right

    }

    // draw the corner circle

    ellipse(circle.x, circle.y, circleSize);

  }

}

​