let blockSize = 10;

let columns, rows;

let colorMap = [

  "#F1DC9A",

  "rgb(236,163,163)",

  "rgb(184,184,238)",

  "rgb(171,255,171)",

];

​

function setup() {

  createCanvas(1000, 780);

  capture = createCapture(VIDEO);

  capture.size(1000, 780);

  capture.hide();

  columns = width / blockSize;

  rows = height / blockSize;

}

​

function draw() {

  let cTime = millis();

  let index = floor(cTime / 500) % 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]);

  let complementaryLightest = complementaryColor(lightest);

​

  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 = lerpColor(

          darkest,

          aBitLighter,

          map(avgBrightness, 64, 128, 0, 1)

        );

      } else if (avgBrightness < 192) {

        colorValue = lerpColor(

          aBitLighter,

          aBitLighter2,

          map(avgBrightness, 128, 192, 0, 1)

        );

      } else {

        // Determine if this block should be one of the 50% that change color

        let change = random(1);

        if (change > 0.5) {

          colorValue = lerpColor(

            aBitLighter2,

            complementaryLightest,

            map(avgBrightness, 192, 256, 0, 1)

          );

        } else {

          colorValue = color(

            capture.pixels[(blockStartX + blockStartY * capture.width) * 4],

            capture.pixels[(blockStartX + blockStartY * capture.width) * 4 + 1],

            capture.pixels[(blockStartX + blockStartY * capture.width) * 4 + 2]

          );

        }

      }

​

      fill(colorValue);

      noStroke();

      rect(blockStartX, blockStartY, blockSize, blockSize);

    }

  }

}

​

function complementaryColor(c) {

  let r = red(c);

  let g = green(c);

  let b = blue(c);

​

  // convert RGB to HSV

  let hsb = rgbToHsb(r, g, b);

​

  // shift hue by 180 degrees

  hsb.h = (hsb.h + 180) % 360;

​

  // convert HSV back to RGB

  let rgb = hsbToRgb(hsb.h, hsb.s, hsb.b);

​

  return color(rgb.r, rgb.g, rgb.b);

}

​

// helper functions for converting between RGB and HSB color spaces

function rgbToHsb(r, g, b) {

  r /= 255;

  g /= 255;

  b /= 255;

​

  let h, s, v;

  let cmax = max(r, g, b);

  let cmin = min(r, g, b);

  let cd = cmax - cmin;

​

  if (cd == 0) {

    h = 0;

  } else if (cmax == r) {

    h = ((g - b) / cd) % 6;

  } else if (cmax == g) {

    h = (b - r) / cd + 2;

  } else {

    h = (r - g) / cd + 4;

  }

​

  h = (h + 6) % 6;

  s = cmax == 0 ? 0 : cd / cmax;

  v = cmax;

​

  return { h: h * 60, s: s, b: v };

}

​

function hsbToRgb(h, s, v) {

  h /= 60;

  let c = v * s;

  let x = c * (1 - abs((h % 2) - 1));

  let m = v - c;

​

  let r, g, b;

  if (h >= 0 && h < 1) {

    r = c;

    g = x;

    b = 0;

  } else if (h >= 1 && h < 2) {

    r = x;

    g = c;

    b = 0;

  } else if (h >= 2 && h < 3) {

    r = 0;

    g = c;

    b = x;

  } else if (h >= 3 && h < 4) {

    r = 0;

    g = x;

    b = c;

  } else if (h >= 4 && h < 5) {

    r = x;

    g = 0;

    b = c;

  } else {

    r = c;

    g = 0;

    b = x;

  }

​

  r += m;

  g += m;

  b += m;

​

  return { r: r * 255, g: g * 255, b: b * 255 };

}

​