let angleRight = 0;  // Angle for the right circle

let rotationSpeedLeft = 0.03;  // Rotation speed for the left circle

let rotationSpeedRight = 0.03;  // Rotation speed for the right circle

​

// Variables to store colors for the left and right rectangles and inner circles

let rectColorLeft;

let rectColorRight;

let innerCircleColorLeft;

let innerCircleColorRight;

​

function setup() {

  createCanvas(400, 400);

  angleMode(RADIANS); // Set the angle mode to radians

  // Initialize colors

  rectColorLeft = color(255, 15, 55); // Default left rectangle color

  rectColorRight = color(255, 15, 55); // Default right rectangle color

  innerCircleColorLeft = color(255, 15, 55); // Default left inner circle color

  innerCircleColorRight = color(255, 15, 55); // Default right inner circle color

}

​

function draw() {

  background(20);

  stroke(255);

  fill(0);

​

  // Large Circles (using a loop)

  let centers = [100, 300];

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

    circle(centers[i], 200, 180);

  }

​

  // Check where the mouse is pressed: left or right side of the canvas

  if (mouseIsPressed && mouseX < width / 2 && mouseY > 110 && mouseY < 290) {

    // If pressing on the left side, slow down left circle

    rotationSpeedLeft *= 0.98;

    rotationSpeedLeft = max(rotationSpeedLeft, 0); // Ensure speed doesn't go below 0

  } else if (mouseIsPressed && mouseX >= width / 2 && mouseY > 110 && mouseY < 290) {

    // If pressing on the right side, slow down right circle

    rotationSpeedRight *= 0.98;

    rotationSpeedRight = max(rotationSpeedRight, 0);

  } else {

    // If not pressing, reset both speeds

    rotationSpeedLeft = 0.03;

    rotationSpeedRight = 0.03;

  }

​

  stroke(255);

​

  // Rotate and draw elements for each circle

  let angles = [angleLeft, angleRight];

  let rectColors = [rectColorLeft, rectColorRight];

  let innerCircleColors = [innerCircleColorLeft, innerCircleColorRight];

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

    push();

    translate(centers[i], 200); // Move the origin to the center of each circle

    rotate(angles[i]); // Rotate by the current angle for each circle

    drawSpinningElements(rectColors[i]); // Draw spinning arcs and rectangles

    pop();

  }

​

  // Update angles based on independent rotation speeds

  angleLeft += rotationSpeedLeft;

  angleRight += rotationSpeedRight;

​

  // Inner Circles (using a loop)

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

    fill(innerCircleColors[i]);  // Use the updated color for the inner circles

    circle(centers[i], 200, 80);  // Inner circle

  }

​

  fill(0);

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

    circle(centers[i], 200, 25);  // Small inner circle

  }

}

​

// Function to draw arcs and spinning rectangle

function drawSpinningElements(rectColor) {

  fill(rectColor);  // Use the updated color for the rectangle

  noStroke();

​

  // Draw the rectangle relative to the translated origin

  rect(-10, -85, 10, 100); //center the rectangle around the translated origin

​

  noFill();

  stroke(225);

​

  //arcs drawn using a loop

  let arcSizes = [60, 155, 135, 115];

  let arcAngles = [0.4, PI / 2 - 0.2];

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

    arc(0, 0, arcSizes[i], arcSizes[i], arcAngles[0], arcAngles[1]);

  }

}

​

// Function to change the colors when the mouse is released

function mouseReleased() {

  // Check where the mouse was released on left or right record

  if (mouseX < width / 2 && mouseY > 110 && mouseY < 290) {

    // Randomize left rectangle and circle color

    rectColorLeft = color(random(0, 255), random(0, 255), random(0, 255));

    innerCircleColorLeft = color(random(0, 255), random(0, 255), random(0, 255));

  } else if (mouseX >= width / 2 && mouseY > 110 && mouseY < 290) {

    // Randomize right rectangle and circle color

    rectColorRight = color(random(0, 255), random(0, 255), random(0, 255));

    innerCircleColorRight = color(random(0, 255), random(0, 255), random(0, 255));

  }

}

​