​

let cam; 

let xScale;

let yScale;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // setup the camera

  cam = createCapture(VIDEO);

  cam.size(40,30);

  cam.hide();

  // setup some scale variables we'll use 

  // for sizing rects later

  xScale = width/cam.width;

  yScale = height/cam.height;

}

​

function draw() {

  background(220);

  // tell p5 we're going to use the pixel []

  cam.loadPixels();

  // go through all the camera pixels in this frame

  // first by row (y)

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

    // then by column (x)

    for(let x=cam.width;x>=0;x--) {

      // get the r,g,b of each pixel

      let i = (x + y * cam.width) * 4;

      let r = cam.pixels[i+0];

      let g = cam.pixels[i+1];

      let b = cam.pixels[i+2];

      // use that color to draw a rect to the screen

      noStroke();

      fill(map(mouseX, 0, width, 0, 255),(random(g+60)), map(mouseY, 0, width, 0, 255));

      rect((cam.width-x-1)*xScale, (y*yScale)/2,xScale,((yScale)/2));

      fill(map(mouseX, 0, width, 255, 0),(random(g+30)), map(mouseY, 0, width, 255, 0));

       rect((cam.width-x-1)*xScale, ((y*yScale)/2)+(height/2),xScale,((yScale)/2));

    } // end x for()

  } // end y for()

  // tell p5 we're done messing with pixel []

  cam.updatePixels();

}