let numSquares = 6; // Total number of larger squares

let nestedSquares = 4; // Number of nested squares within each larger square

let squareSize;

let maxSize, minSize;

let spacing; // Spacing between larger squares

let noiseOffset = 0; // Initial noise offset

​

function setup() {

  createCanvas(560, 372);

  squareSize = width / (numSquares / 2); // Assuming 3 squares in a row

  maxSize = squareSize;

  minSize = squareSize / 10;

  spacing = squareSize / 50;

​

  // Initialize properties for each large square

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

    let x = (i % 3) * squareSize + squareSize / 2;

    let y = floor(i / 3) * squareSize + squareSize / 2;

    squares.push({ x, y, size: maxSize, hovered: false });

  }

}

​

function draw() {

  background(255);

​

  // Increment noise offset to change colors over time

  noiseOffset += 0.01;

​

  for (let i = 0; i < squares.length; i++) {

    let sq = squares[i];

​

    // Determine if the mouse is over the square

    sq.hovered = (mouseX > sq.x - sq.size / 2 && mouseX < sq.x + sq.size / 2 &&

                  mouseY > sq.y - sq.size / 2 && mouseY < sq.y + sq.size / 2);

​

    // Draw the nested squares

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

      let nestedSize = sq.size - n * (sq.size - minSize) / nestedSquares;

​

      // Calculate color using perlin noise for smooth transitions

      let hue = map(noise(sq.x * 0.01, sq.y * 0.01, noiseOffset), 0, 1, 0, 360);

      let saturation = 100;

      let brightness = 255;

​

      // Adjust color when mouse hovers over

      if (sq.hovered) {

        hue = map(mouseX, 0, width, 0, 360);

        brightness = 255;

      }

​

      fill(hue, saturation, brightness);

​

      // Draw each nested square

      rectMode(CENTER);

      rect(sq.x, sq.y, nestedSize - n * spacing, nestedSize - n * spacing);

    }

  }

}

​