​

let cols1 = ["#3F1820","#307070", "#FFB88F", "#FFF8FF"]

let cols2 = ["#3F383F","#1F48AF", "#80C86F", "#EFF8D0"]

let cols3 = ["#000000","#606060", "#B0B0B0", "#FFF8FF"]

let cols4 = ["#00313d","#ff6c72", "#ffcb8d", "#f1f2d7"]

​

let colsRects = [

  { x: 460, y: 415, w: 30, h: 30, colors: cols1 },

  { x: 495, y: 415, w: 30, h: 30, colors: cols2 },

  { x: 530, y: 415, w: 30, h: 30, colors: cols3 },

  { x: 565, y: 415, w: 30, h: 30, colors: cols4 }

];

​

let currentColors = [cols1[0], cols1[1], cols1[2], cols1[3]];

​

function hexToRgb(hex) {

  let r = parseInt(hex.slice(1, 3), 16);

  let g = parseInt(hex.slice(3, 5), 16);

  let b = parseInt(hex.slice(5, 7), 16);

  return [r, g, b];

}

​

let color1 = hexToRgb("#FFB88F");

let color2 = hexToRgb("#80C86F");

let color3 = hexToRgb("#B0B0B0");

let color4 = hexToRgb("#ff6c72");

​

function setup() {

  createCanvas(600, 450);

  capture = createCapture(VIDEO);

  capture.size(width, height);

  capture.hide();

  pixelDensity(1);

  frameRate(15);

}

​

function draw() {

  background(0);

  capture.loadPixels();

​

  const blockSize = 7;

  const w = capture.width;

  const h = capture.height;

  const blocksX = Math.floor(w / blockSize);

  const blocksY = Math.floor(h / blockSize);

​

  push();

  translate(width, 0);

  scale(-1, 1);

​

  for (let by = 0; by < blocksY; by++) {

    for (let bx = 0; bx < blocksX; bx++) {

      grayscaleBlock(bx * blockSize, by * blockSize, blockSize, blockSize);

    }

  }

​

  capture.updatePixels();

  image(capture, 0, 0);

  pop();

  noStroke();

  for (let rectInfo of colsRects) {

    fill(hexToRgb(rectInfo.colors[0])[0], hexToRgb(rectInfo.colors[0])[1], hexToRgb(rectInfo.colors[0])[2]);

    rect(rectInfo.x, rectInfo.y, rectInfo.w, rectInfo.h);

  }

  }

​

function mousePressed() {

  for (let rectInfo of colsRects) {

    if (mouseX >= rectInfo.x && mouseX <= rectInfo.x + rectInfo.w &&

        mouseY >= rectInfo.y && mouseY <= rectInfo.y + rectInfo.h) {

​

      currentColors = rectInfo.colors.map(hex => hexToRgb(hex));

      break;

    }

  }

}

function grayscaleBlock(x, y, w, h) {

  let i = (x + y * capture.width) * 4;

  let sum = 0;

  let count = 0;

​

  for (let by = 0; by < h; by++) {

    for (let bx = 0; bx < w; bx++) {

      let idx = i + (bx + by * capture.width) * 4;

      let r = capture.pixels[idx];

      let g = capture.pixels[idx + 1];

      let b = capture.pixels[idx + 2];

      let avg = (r + g + b) / 3;

      sum += avg;

      count++;

    }

  }

​

  let blockAvg = Math.floor(sum / count);

​

  let color;

  if (blockAvg < 64) { 

    color = currentColors[0];

  } else if (blockAvg < 128) { 

    color = currentColors[1];

  } else if (blockAvg < 192) { 

    color = currentColors[2];

  } else { 

    color = currentColors[3];

  }

​

  for (let by = 0; by < h; by++) {

    for (let bx = 0; bx < w; bx++) {

      let idx = i + (bx + by * capture.width) * 4;

      capture.pixels[idx] = color[0];     

      capture.pixels[idx + 1] = color[1];

      capture.pixels[idx + 2] = color[2]; 

    }

  }

}