let btn;

​

// Variables to control rotation animation

let r = 0;

let angle = 0;

​

function setup() {

  createCanvas(500, 500); // Create a 500x500 pixel canvas

  background("#408080"); // Set the background color to a shade of blue-green

  btn = new Button(250, 400, 120, 50); // Create a button object at the specified position and dimensions

}

​

function draw() {

  record(250, 250); // Call the record function to draw a rotating shape

  btn.show(); // Call the show method of the button object to display it

}

​

// Function to draw a rotating shape

function record(x, y) {

  push();

  translate(x, y); // Translate the origin to the specified position

​

  // If r is set to 1, increment the angle for rotation

  if (r == 1) {

    angle += 0.1;

  }

  rotate(angle); // Rotate the subsequent shapes based on the angle

​

  fill(0); // Fill color for the central ellipse

  ellipse(0, 0, 200, 200); // Draw a central ellipse

​

  noFill();

  stroke(100); // Set stroke color

  strokeWeight(5); // Set stroke weight

​

  // Draw four arcs to create a pattern

  arc(0, 0, 150, 150, 0, PI/4);

  arc(0, 0, 120, 120, PI/4, PI/2);

  arc(0, 0, 100, 100, PI, 3 * PI/2);

  arc(0, 0, 150, 150, PI/2, PI);

​

  pop(); // Restore the previous drawing settings

}

​

// Function to respond to mouse clicks

function mouseClicked() {

  // Check if the mouse click is within the boundaries of the button

  if (mouseX > btn.x - btn.w / 2 && mouseX < btn.x + btn.w / 2 && mouseY > btn.y - btn.h / 2 && mouseY < btn.y + btn.h / 2) {

    // Toggle the value of r to start or stop the rotation animation

    if (r == 1) {

      r = 0;

    } else {

      r = 1;

    }

  }

}

​