​

//I put my code in rectMode center to be able to get the original rectangle animation. Additionally i used degrees because it is easier for me to comprehend than radians.

​

function setup() {

  createCanvas(800,800);

  angleMode(DEGREES);

  rectMode(CENTER);

  frameRate(30)

}

​

function draw() {

  background(10, 20, 30);

​

  // These are the variables to make a slow shift in the RGB of the tiles

  translate(400, 400);

  noFill();

    var r = map(sin(frameCount), -1, 1, 50, 225);

    var g = map(cos(frameCount / 2), - 1, 1, 50, 255);

    var b = map(sin(frameCount / 4), - 1, 1, 50, 255);

// I made a series of for lets because when I tried to create a nesting loop the rotation failed.

//Essentially i made a variable that would make the rectangles change size and rotate 180 degrees while leaving a trail. 

  //This is the center rectangle

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

    push();

    stroke(r, g, b);

    rotate(sin(frameCount + i) * 90);

    rect(0, 0, 50 - i, 50 - i);

​

    pop();

}

  // this is the 2nd row second rectangle

  for (let j = 0; j < 200; j++) {

    push();

    stroke(r, g, b);

    translate (150, -150)

    rotate(sin(frameCount + j) * 90);

    rect(0, 0, 50 - j, 50 - j);

    pop();

}

  //middle top rectangle

    for (let k = 0; k < 200; k++) {

    push();

    stroke(r, g, b);

    translate (0, -300)

    rotate(sin(frameCount + k) * 90);

    rect(0, 0, 50 - k, 50 - k);

​

    pop();

}

  //second row first rectangle

   for (let l = 0; l < 200; l++) {

    push();

    stroke(r, g, b);

    translate (-150, -150)

    rotate(sin(frameCount + l) * 90);

    rect(0, 0, 50 - l, 50 - l);

​

    pop();

}

  // top left rectangle

    for (let m = 0; m < 200; m++) {

    push();

    stroke(r, g, b);

    translate (-300, -300)

    rotate(sin(frameCount + m) * 90);

    rect(0, 0, 50 - m, 50 - m);

​

    pop();

}

  // bottom middle rectangle

  for (let n = 0; n < 200; n++) {

    push();

    stroke(r, g, b);

    translate (0, 300)

    rotate(sin(frameCount + n) * 90);

    rect(0, 0, 50 - n, 50 - n);

    pop();

}

  //third row far right rectangle

   for (let n = 0; n < 200; n++) {

    push();

    stroke(r, g, b);

    translate (300, 0)

    rotate(sin(frameCount + n) * 90);

    rect(0, 0, 50 - n, 50 - n);

    pop();

}

  //top right rectangle

  for (let n = 0; n < 200; n++) {

    push();

    stroke(r, g, b);

    translate (300, -300)

    rotate(sin(frameCount + n) * 90);

    rect(0, 0, 50 - n, 50 - n);

    pop();

}

  //bottom right rectangle

  for (let n = 0; n < 200; n++) {

    push();

    stroke(r, g, b);

    translate (300, 300)

    rotate(sin(frameCount + n) * 90);

    rect(0, 0, 50 - n, 50 - n);

    pop();

}

  //4th row second rectangle

  for (let n = 0; n < 200; n++) {

    push();

    stroke(r, g, b);

    translate (150, 150)

    rotate(sin(frameCount + n) * 90);

    rect(0, 0, 50 - n, 50 - n);

    pop();

}

  //third row left rectangle

  for (let n = 0; n < 200; n++) {

    push();

    stroke(r, g, b);

    translate (-300, 0)

    rotate(sin(frameCount + n) * 90);

    rect(0, 0, 50 - n, 50 - n);

    pop();

}

  //bottom left rectangle

  for (let n = 0; n < 200; n++) {

    push();

    stroke(r, g, b);

    translate (-300, 300)

    rotate(sin(frameCount + n) * 90);

    rect(0, 0, 50 - n, 50 - n);

    pop();

}

  //fourth row first rectangle

  for (let n = 0; n < 200; n++) {

    push();

    stroke(r, g, b);

    translate (-150, 150)

    rotate(sin(frameCount + n) * 90);

    rect(0, 0, 50 - n, 50 - n);

    pop();

}

  //These are the borders of my tiles to make them feel a but more cohesive

fill(r,g,b)

noStroke()

rect(0,-400, 800,50)

rect(0,400,800,50)

rect(400,0,50,800)

rect(-400,0,50,800)

}