let x2, y2; // top right circle

let x3, y3; // bottom left circle

let x4, y4; // bottom right circle

​

function setup() {

  createCanvas(600, 400); // 

  // Start all circles at the center of the canvas

  x1 = width / 2;

  y1 = height / 2;

  x2 = width / 2;

  y2 = height / 2;

  x3 = width / 2;

  y3 = height / 2;

  x4 = width / 2;

  y4 = height / 2;

}

​

function draw() {

  background(220);

​

  // Circle moving to the top left corner

  fill(255);

  ellipse(x1, y1, 20, 20);

  x1 -= width * 0.0025; // Move left relative to canvas width

  y1 -= height * 0.0025; // Move up relative to canvas height

​

  // Circle moving to the top right corner

  fill(255);

  ellipse(x2, y2, 20, 20);

  x2 += width * 0.0025; // Move right relative to canvas width

  y2 -= height * 0.0025; // Move up relative to canvas height

​

  // Circle moving to the bottom left corner

  fill(255);

  ellipse(x3, y3, 20, 20);

  x3 -= width * 0.0025; // Move left relative to canvas width

  y3 += height * 0.0025; // Move down relative to canvas height

​

  // Circle moving to the bottom right corner

  fill(255);

  ellipse(x4, y4, 20, 20);

  x4 += width * 0.0025; // Move right relative to canvas width

  y4 += height * 0.0025; // Move down relative to canvas height

}

​