var videoScale = 8;

​

// Comuns and Rows

var cols, rows;

​

function preload(){

 frame = loadImage('images/frame.png');

}

​

function setup() {

  createCanvas(640, 480);

    cols = 640 / videoScale;

  rows = 480 / videoScale;

​

  // Initialize columns and rows

  pixelDensity(1);

  video = createCapture(VIDEO);

  video.size(cols, rows);

  video.hide();

}

​

function mousePressed() {}

​

function draw() {

  background(0);

  video.loadPixels();

​

  // Columns

  for (var i = 0; i < cols; i++) {

    // Rows

    for (var j = 0; j < rows; j++) {

      // Reversing x to mirror the image

      // In order to mirror the image, the column is reversed with the following formula:

      // mirrored column = width - column - 1

      var loc = ((cols - i - 1) + j * cols) * 4;

​

      // Pulling out color components from a pixel

      var r = video.pixels[loc];

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

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

​

      //Brightness increases size of ellipse, darkness decreases size.

      var sz = map((r + g + b), 0, 255, 0, videoScale)+5;

      fill(r, g, b);

   noStroke();

      // The ellipse is drawn at an x,y location according to videoScale.

      var x = i * videoScale;

      var y = j * videoScale;

        image(frame, 0,0);

     ellipse(x+videoScale/2 , y+videoScale/2, sz, sz);

​

      // text("0", x + videoScale/2, y + videoScale/2);

    }

  }

}