// https://youtu.be/rNqaw8LT2ZU

// http://thecodingtrain.com

​

let video;

let vScale = 16;

let from;

let to;

​

​

function setup() {

  createCanvas(640, 480);

  //pixelDensity(1);

  video = createCapture(VIDEO);

  video.size(width / vScale, height / vScale);

  //video.hide();

  to = color(0, 255, 0);

  from = color(255, 0, 0);

}

​

function draw() {

  background(50);

  video.loadPixels();

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

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

      // let index = (x + (y * video.width)) * 4;

      let index = 4 * (x) + 4 * (y * video.width);

      let r = video.pixels[index + 0];

      let g = video.pixels[index + 1];

      let b = video.pixels[index + 2];

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

      // size of the rectangle is set according to brightness level!

      let rectSize = map(bright, 0, 255, 0, vScale);

      for (let a = 0; a < width; a = a + 1) {

    let portion = map(a, 0, width, 0, 1);

    let intercolor = lerpColor(from, to, portion);

      fill()}

      rectMode(CENTER);

      rect(x * vScale, y * vScale, rectSize, rectSize);

    }

​

  }

}

​