createCanvas(400, 400);

  rectMode(CENTER);//allows the square to rotate around its center

  angleMode(DEGREES);

}

​

let lineX1;

let lineY1;

let lineX2;

let lineY2;

let angle = 0;

​

function draw() {

  background(0);

  for (lineX2 = 30; lineX2<= width; lineX2+=30){

    stroke(177, 43, 187);

    line(0,height/2,lineX2,height);

  } //the set of purple lines 

  for (lineX1 = 0; lineX1<=width;lineX1+=30){

    stroke(220, 227, 57);

    line(lineX1,0,width,height/2);

  }

  //the set of yellow lines

  for (lineX2 = 30; lineX2<= width; lineX2+=30){

    stroke(110, 227, 161);

    line(0,height/2,lineX2,0);

  }

  //the set of green lines

  for (lineX1 = 0; lineX1<=width;lineX1+=30){

    stroke(212, 18, 35);

    line(lineX1,height,width,height/2);

  }

  //the set of red lines

  translate(200,200); 

  //translating so that the square rotates about the center of the canvas

  if (mouseX < 235 && mouseX > 165 && mouseY < 235 && mouseY > 165 && mouseIsPressed) {

    stroke(166, 245, 237);

    strokeWeight(4); //increasing the thickness of the borders of the square and the lights when the mouse is clicked

    angle = angle - 1;

    rotate(angle);

    rect(0,0,70,70);

  }

  //rotating the square in the anti-clockwise direction when the mouse is clicked

  else {

    strokeWeight(1);

    angle = angle + 1;

    rotate(angle);

    stroke(0);

    rect(0,0,70,70);

  }

  //rotating the square in the clockwise direction if the mouse isn't clicked

}