let circleFastX, circleFastY;

let speed = 1;

let fastSpeed = 10;

let myMint=("#B2FFD6");

let myBlue=("#1F7A8C");

let myPurple=("#AA78A6");

​

function setup() {

  createCanvas(600, 600); 

  circleX = width / 2;

  circleY = height / 2;

  circleFastX = width / 2;

  circleY = height / 2;

}

​

function draw() {

  background(220);

  circleX = circleX + speed;

  circleFastX = circleFastX + speed*10; 

  //go back to middle

  if (circleX > width) {

    circleX = width / 2;

  }

  if (circleFastX > width) {

    circleFastX = width / 2;

  }

  // Circle 1 - moves to the right

  fill(myBlue);

  ellipse(circleFastX, height / 2, 50, 50);

  // Circle 2 - moves to the left

  fill(myMint); 

  ellipse(width - circleX, height / 2, 50, 50);

​

  // Circle 3 - moves up

  fill(myMint);

  ellipse(width / 2, height - circleX, 50, 50);

​

  // Circle 4 - moves down

  fill(myMint);

  ellipse(width / 2, circleX, 50, 50);

​

  // Four corners movement (relative to canvas size)

  fill(myPurple); 

  ellipse(circleX, circleX, 50, 50); // Top-left

  ellipse(width - circleX, circleX, 50, 50); // Top-right

  ellipse(circleX, height - circleX, 50, 50); // Bottom-left

  ellipse(width - circleX, height - circleX, 50, 50); // Bottom-right

}