// https://youtu.be/rNqaw8LT2ZU

// http://thecodingtrain.com

​

let video;

let vScale = 16;

let degree = 0;

let frame

​

function preload(){frame=loadImage("frame.png")}

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

​

  video.hide();

}

​

function draw() {

​

  image(frame,0,0,windowWidth/2, windowHeight/2)

  image(frame,windowWidth/2,windowHeight/2,windowWidth/2, windowHeight/2)

  image(frame,windowWidth/2,0,windowWidth/2, windowHeight/2)

  image(frame,0,windowHeight/2,windowWidth/2, windowHeight/2)

  video.loadPixels();

  translate(mouseX,mouseY);

  //rotate(degree);

  //degree = degree + 0.01;

  image(video, width / 2, height / 2);

​

  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 );

      noStroke();

      fill(r, g, b);

      //rectMode(CENTER);

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

      // triangle(x * vScale, y * vScale, r,g,b,vScale);

      ellipse(x * vScale, y * vScale, 10);

    }

  }

}

function mousePressed() {

  let fs = fullscreen();

  fullscreen(!fs);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

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

}

​