let blueX, blueY;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  yellowX = width/2;

  yellowY = height/2;

  blueX = width/2;

  blueY = height/2;

  strokeWeight(5);

}

​

function draw() {

  background(200, 15);

  //rectangle

  push();

  stroke(255, 0, 255);

  noFill();

  // TODO: Specify the rectangle's origin point to be center

  rectMode(CENTER);

​

  // TODO: Translate rectangle to the center of canvas

  translate(width/2, height/2);

​

  // TODO: Rotate rectangle by a quarter pi

  rotate(QUARTER_PI);

  rect(0, 0, 450, 450); // First rectangle

​

  stroke(200, 100, 255);

  fill(255, 0);

​

  // TODO: Rotate rectangle by frameCount / 2 in radians

  rotate(radians(frameCount/2));

  rect(0, 0, 450, 450); // Second rectangle

  pop();

  // rectangle ends

  // TODO: Add push and pop to isolate the yellow spiral

  push();

  translate(yellowX, yellowY); // Start of code for yellow spiral

  rotate(frameCount * 0.001);

  stroke(255, 255, 0, 30);

  for (let i = 0; i < 24; i++) {

    rotate(PI / 12);

    line(0, 0, 0, 160);

  } // End of code for yellow spiral

  pop();

  // TODO: Add push and pop to isolate the blue spiral

  push();

  translate(blueX, blueY); // Start of code for blue spiral

  rotate(frameCount * 0.001 + PI / 8);

  stroke(0, 0, 255, 30);

  for (let i = 0; i < 24; i++) {

    rotate(PI / 12);

    line(0, 0, 0, 240);

  } // End of code for blue spiral

  pop();

}