let blockSize = 50;

let columns, rows;

let colorMap = ['#F1DC9A', 'rgb(236,163,163)', 'rgb(184,184,238)', 'rgb(171,255,171)'];

let lastChangeTime = 0;

​

function setup() {

  createCanvas(1000, 780);

  capture = createCapture(VIDEO);

  capture.size(1000, 780);

  capture.hide();

  columns = width / blockSize;

  rows = height / blockSize;

  strokeWeight(0.2);

  stroke(225);

}

​

function draw() {

  let currentTime = millis();

  let index = floor(currentTime / 2000) % colorMap.length;

  let darkest = color(colorMap[index]);

  let aBitLighter = color(colorMap[(index + 1) % colorMap.length]);

  let aBitLighter2 = color(colorMap[(index + 2) % colorMap.length]);

  let lightest = color(colorMap[(index + 3) % colorMap.length]);

  background(255);

  capture.loadPixels();

  for (let y = 0; y < rows; y++) {

    for (let x = 0; x < columns; x++) {

      let blockStartX = x * blockSize;

      let blockStartY = y * blockSize;

      let sumR = 0;

      let sumG = 0;

      let sumB = 0;

      let count = 0;

      for (let i = blockStartY; i < blockStartY + blockSize; i++) {

        for (let j = blockStartX; j < blockStartX + blockSize; j++) {

          let index = (j + i * capture.width) * 4;

          sumR += capture.pixels[index];

          sumG += capture.pixels[index + 1];

          sumB += capture.pixels[index + 2];

          count++;

        }

      }

      let avgR = sumR / count;

      let avgG = sumG / count;

      let avgB = sumB / count;

      let avgBrightness = (avgR + avgG + avgB) / 3;

      let colorValue;

      if (avgBrightness < 64) {

        colorValue = darkest;

      } else if (avgBrightness < 128) {

        colorValue = aBitLighter;

      } else if (avgBrightness < 192) {

        colorValue = aBitLighter2;

      } else {

        colorValue = lightest;

      }

      fill(colorValue);

      rect(blockStartX, blockStartY, blockSize, blockSize);

    }

  }

  // Check if it's been 3 seconds since the last blockSize change

  if (currentTime - lastChangeTime >= 1000 && blockSize > 5) {

    blockSize -= 2;

    columns = width / blockSize;

    rows = height / blockSize;

    lastChangeTime = currentTime;

  }

}

​