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

}

​