// https://youtu.be/rNqaw8LT2ZU

// http://thecodingtrain.com

​

var video;

​

var vScale = 10; //variable to change the size of the shapes

​

function setup() {

  createCanvas(640, 480);

  pixelDensity(1);// https://p5js.org/reference/#/p5/pixelDensity

  video = createCapture(VIDEO); //variable responsible for capturing the image from the webcam

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

}

​

function draw() {

  background(51);

  video.loadPixels();// Loads the pixel data for the display window into the pixels[] array.

  //a for loop to draw the grid of shapes filling out the whole canvas. to learn more watch this: https://www.youtube.com/watch?v=nMUMZ5YRxHI

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

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

      var index = (video.width - x + 1 + (y * video.width)) * 4;

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

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

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

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

      var w = map(bright, 0, 255, 0, vScale);

      //this will draw the shapes

      noStroke();

      fill(255);

      rectMode(CENTER);

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

    }

  }

​

}