let dists;

let capture;

let frm;

let gen;

let see = true;

​

function preload() {

  ref = loadImage("cat.png");

}

​

function avgColour(img) {

  let r = 0;

  let g = 0;

  let b = 0;

​

  img.loadPixels();

  for (let idx = 0; idx < img.pixels.length; idx += 4) {

    r += img.pixels[idx];

    g += img.pixels[idx + 1];

    b += img.pixels[idx + 2];

  }

​

  const np = img.pixels.length / 4.0;

  return color(r / np, g / np, b / np);

}

​

function setup() {

  createCanvas(640, 640);

  capture = createCapture(VIDEO, function () {

    ready = true;

  });

  capture.hide();

​

  frm = createImage(20, 20);

  gen = createImage(640, 640);

​

  dists = [];

  for (let idx = 0; idx < ref.width * ref.height; ++idx) {

    dists.push(1000);

  }

​

  background(255);

}

​

function draw() {

  // A hack to check whether the capture's values are valid, I think.

  if (alpha(capture.get(0, 0)) == 0) {

    return;

  }

​

  let sz = min(capture.width, capture.height);

  frm.copy(

    capture,

    (capture.width - sz) / 2,

    (capture.height - sz) / 2,

    sz,

    sz,

    0,

    0,

    20,

    20

  );

  const ac = avgColour(frm);

​

  ref.loadPixels();

  for (let y = 0; y < ref.height; ++y) {

    for (let x = 0; x < ref.width; ++x) {

      const didx = y * ref.width + x;

      const idx = didx * 4;

      const d = dist(

        red(ac),

        green(ac),

        blue(ac),

        ref.pixels[idx],

        ref.pixels[idx + 1],

        ref.pixels[idx + 2]

      );

      if (d < dists[didx]) {

        dists[didx] = d;

        gen.copy(frm, 0, 0, 20, 20, x * 20, y * 20, 20, 20);

      }

    }

  }

​

  image( gen, 0, 0 );

  if (see) {

    copy(

      capture,

      (capture.width - sz) / 2,

      (capture.height - sz) / 2,

      sz,

      sz,

      0,

      0,

      100,

      100

    );

  }

}

​

function keyPressed() {

  if (key == " ") {

    see = !see;

  }

}

​