let randomColor;

let angle = 0;

let changeCol = 0;

let t = 0.1;

let rotationSpeed = 0.6;

let isPaused = false;

let width = 600;

let height = 600;

​

// Variables for smooth background transition

let col1, col2, bgCol;

​

// Setup function

function setup() {

  createCanvas(width, height);

  col1 = color(random(255), random(255), random(255));

  col2 = color(random(255), random(255), random(255));

  bgCol = lerpColor(col1, col2, t);

​

  noFill();

  angleMode(DEGREES);

  rectMode(CENTER);

  frameRate(60);

}

​

// Draw Function

function draw() {

  if (isPaused) return; // If paused, exit draw

​

  // Smooth background transition

  t += 0.01;

  if (t >= 1) {

    t = 0;

    col1 = col2;

    col2 = color(random(255), random(255), random(255));

  }

  bgCol = lerpColor(col1, col2, t);

  background(bgCol);

​

  // Change rotation speed based on mouse interaction

  if (mouseIsPressed) {

    rotationSpeed = 2; // Increase speed when mouse is pressed

  } else {

    rotationSpeed = 0.6; // Normal speed

  }

​

  translate(width / 2, height / 2);

  rotate(angle);

  // Generate random RGB values for each square

  let r = random(255);

  let g = random(255);

  let b = random(255);

  // Loop for centers of every possible square patterns

  for (let x = -500 + 50; x < 500; x += 100) {

    for (let y = -500 + 50; y < 500; y += 100) {

      // Variable stroke color based on a sine wave

      changeCol = sin(t * 100);

      let newCol = map(changeCol, -1, 1, 0, 255);

​

      // Draw multiple concentric squares with decreasing sizes and random RGB values

      stroke(newCol);

      strokeWeight(3);

      fill(r, g, b, 60); // Random RGB with fixed alpha

      rect(x, y, 80, 80);

​

      stroke(newCol / 2);

      fill(r, g, b, 80); // RGB for smaller square

      rect(x, y, 60, 60);

​

      stroke(newCol / 4);

      fill(r, g, b, 120); // RGB for even smaller square

      rect(x, y, 40, 40);

​

      stroke(newCol / 6);

      fill(r, g, b, 140); // RGB with different alpha

      rect(x, y, 20, 20);

​

      stroke(newCol / 8);

      fill(r, g, b, 160); // RGB with a different alpha

      rect(x, y, 10, 10);

    }

  }

​

  // Update rotation

  angle += rotationSpeed;

}

​

// Toggle pause with spacebar

function keyPressed() {

  if (key === ' ') {

    isPaused = !isPaused;

  }

}