let angle2 = 0;

let angle3 = 0;

let angle4 = 0;

let spinSpeed1 = 0.05;

let spinSpeed2 = 0.07;

let spinSpeed3 = 0.09;

let spinSpeed4 = 0.11;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

​

  let centerX1 = width / 4;

  let centerY1 = height / 4;

  let centerX2 = 3 * width / 4;

  let centerY2 = height / 4;

  let centerX3 = width / 4;

  let centerY3 = 3 * height / 4;

  let centerX4 = 3 * width / 4;

  let centerY4 = 3 * height / 4;

  let radius = width / 4 - 25;

​

  // calculate the position of the first circle based on its center, radius, and angle of rotation

  let x1 = centerX1 + radius * cos(angle1);

  let y1 = centerY1 + radius * sin(angle1);

​

  // rotate the canvas around the center of the first circle

  push();

  translate(centerX1, centerY1);

  rotate(angle1);

​

  // draw the first circle at the calculated position

  ellipse(0, 0, 50, 50);

​

  // reset the rotation and translation

  rotate(-angle1);

  translate(-centerX1, -centerY1);

  pop();

​

  // increment the angle of rotation for the first circle

  angle1 += spinSpeed1;

​

  // calculate the position of the second circle based on its center, radius, and angle of rotation

  let x2 = centerX2 + radius * cos(angle2);

  let y2 = centerY2 + radius * sin(angle2);

​

  // rotate the canvas around the center of the second circle

  push();

  translate(centerX2, centerY2);

  rotate(angle2);

​

  // draw the second circle at the calculated position

  ellipse(0, 0, 50, 50);

​

  // reset the rotation and translation

  rotate(-angle2);

  translate(-centerX2, -centerY2);

  pop();

​

  // increment the angle of rotation for the second circle

  angle2 += spinSpeed2;

​

  // calculate the position of the third circle based on its center, radius, and angle of rotation

  let x3 = centerX3 + radius * cos(angle3);

  let y3 = centerY3 + radius * sin(angle3);

​

  // rotate the canvas around the center of the third circle

  push();

  translate(centerX3, centerY3);

  rotate(angle3);

​

  // draw the third circle at the calculated position

  ellipse(0, 0, 50, 50);

​

  // reset the rotation and translation

  rotate(-angle3);

  translate(-centerX3, -centerY3);

  pop();

​

  // increment the angle of rotation for the third circle

  angle3 += spinSpeed3;

​

  // calculate the position of the fourth circle based on its center, radius, and angle of rotation

  let x4 = centerX4 + radius * cos(angle4);

  let y4 = centerY4 + radius * sin(angle4);

​

  // rotate the canvas around the center of the fourth circle

  push();

  translate(centerX4, centerY4);

  rotate(angle4);

​

  // draw the fourth circle at the calculated position

  ellipse(0, 0, 50,50)

  // reset the rotation and translation

  rotate(-angle4);

  translate(-centerX4, -centerY4);

  pop();

​

  // increment the angle of rotation for the third circle

  angle4 += spinSpeed4;

}

​