let sizeDifference;

let numCols = 8; // 8 columns

let numRows = 12; // 12 rows

let offsetX, offsetY;

​

function setup() {

  createCanvas(1080, 1080);

  background(255);

  rectMode(CORNER);

  strokeWeight(2);

  stroke(250); // Stroke color

  fill(0);   // Fill color

​

  // Exact square size for perfect fit

  sqSize = width / numCols;  

​

  sizeDifference = sqSize / 20;

​

  // Initialize offsets

  offsetX = 5;

  offsetY = 7;

}

​

function draw() {

  background(250); // Background reset for animation

​

  // Loop through the grid to draw squares

  for (let r = 0; r < numRows; r++) {

    for (let c = 0; c < numCols; c++) {

      let x = c * sqSize;

      let y = r * sqSize;

      square(x, y, sqSize); // Draw main square

​

      // Animated offsets based on frameCount

      let animatedOffsetX = offsetX * sin(frameCount * 0.05 + r * 0.5);

      let animatedOffsetY = offsetY * cos(frameCount * 0.05 + c * 0.5);

​

      // Draw additional animated squares

      for (let i = 1; i < 8; i++) {

        let newX = x + i * animatedOffsetX;

        let newY = y + i * animatedOffsetY;

        let newSize = sqSize - i * sizeDifference + sin(frameCount * 0.05 + i) * sizeDifference;

        rect(newX, newY, newSize, newSize);

      }

    }

  }

}

​

function keyPressed() {

  if (key === 'q') saveGif('animfinal.gif', 5);

}

​