* Creative Coding Workshop #5 Demo - Pixelated Webcam Feed with Animated Rotating Rectangular Pixels

 *

 * Jack B. Du (github@jackbdu.com)

 */

​

let capture;

let rows = 20;

let cols = 20;

let tileWidth;

let tileHeight;

let pd;

​

function setup() {

  createCanvas(400, 400);

  tileWidth = width/cols;

  tileHeight = height/rows;

  pd = pixelDensity();

  // create camera feed and load it to capture variable

  capture = createCapture(VIDEO);

  // hide camera feed preview outside canvas

  capture.hide();

}

​

function draw() {

  // push and pop ensures both translate and scale only affect this block of code, which flips video feed horizontally to draw a mirrored image

  push();

  // move origin to top right corner

  translate(width,0);

  // flip coordiante horizontally around the translated origin

  scale(-1,1);

  // use capture variable same as an image

  // COVER ensures the image cover entire canvas by cropping symmetrically

  image(capture, 0, 0, width, height, 0, 0, capture.width, capture.height, COVER);

  loadPixels();

  pop();

  // draw background to cover original image (the video feed)

  background(0);

  // for each row

  for (let row = 0; row < rows; row++) {

    // for each col within the row

    for (let col = 0; col < cols; col++) {

      // calculate center coordinate for each tile

      let x = floor(tileWidth*(col+0.5));

      let y = floor(tileHeight*(row+0.5));

      // calculate these values by incorporating pixel density

      let calculatedWidth = width * pd;

      let calculatedY = y * pd;

      let calculatedX = x * pd;

      // calculate pixel starting index for tile center pixel

      let index = (calculatedY * calculatedWidth + calculatedX) * 4;

      let r = pixels[index];

      let g = pixels[index+1];

      let b = pixels[index+2];

      let a = pixels[index+3];

​

      // define a color based on retrieved color values

      let c = color(r, g, b, a);

      // calculate an animated scale ratio for tile width and height based on current coordinate

      let sclWidth = map(sin(x/2+y/2+frameCount/10),-1,1,0.5,1);

      let sclHeight = map(sin(-x/2+y/2+frameCount/10),-1,1,0.5,1);

      noStroke();

      // set fill color to picked color

      fill(c);

      // draw each tile with center pixel color

      rectMode(CENTER);

      // push and pop ensures this translate and rotate only affect this block of code

      push();

      // move origin to (x, y)

      translate(x,y);

      // calculate rotation based on cooresponding pixel's brightness

      let rotation = map(brightness(c), 0, 100, 0, TWO_PI);

      rotate(rotation);

      // draw each tile with animated scale for width and height

      rect(0,0,tileWidth*sclWidth,tileHeight*sclHeight, tileWidth*0.2);

      pop();

    }

  }  

​

}