* Creative Coding Workshop #5 - Draw Pixelated Camera Feed - Rotating Rectangles

 *

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

 */

​

let graphics;

let capture;

let cols = 20;

let rows = 20;

let tileWidth;

let tileHeight;

let pd;

​

// everything in preload() will be loaded before setup() is run

function preload() {

  graphics = loadImage('abstract-fluid.png');

}

​

function setup() {

  // create a canvas with a width of 400 px and a height of 400 px

  createCanvas(400, 400);

  // sets pixel density to 1 for simplicity

  pd = pixelDensity();

  // calculate dimensions for each tile

  tileWidth = width/cols;

  tileHeight = height/rows;

  capture = createCapture(VIDEO);

  capture.hide();

}

​

function draw() {

  push()

  translate(width,0);

  scale(-1,1);

  // replace graphics when capture/webcam is ready

  if (capture.loadedmetadata) {

      graphics = capture;

  }

  // draws graphics to fill entire canvas

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

  // load the pixels of the entire canvas for reading/writing

  loadPixels();

  pop();

  // set background to light gray on a scale of 0 to 255

  background(0);

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

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

      // calculate coordinate

      let x = floor(tileWidth*col);

      let y = floor(tileHeight*row);

​

      // caculate the index of the pixel at (x, y)

      // each pixel takes up four values, r, g, b, a

      let index = ((y * pd) * (width * pd) + x * pd)*4;

      let r = pixels[index];

      let g = pixels[index+1];

      let b = pixels[index+2];

      let a = pixels[index+3];

​

      // converts values to a color

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

      let angle = map(red(c), 0, 255, 0, TWO_PI);

​

      // draw ellipes at (x, y)

      noStroke();

      fill(c);

      rectMode(CENTER);

      push()

      translate(x+tileWidth/2, y+tileHeight/2);

      rotate(angle);

      rect(0, 0, tileWidth, tileHeight);

      pop();

    }

  }

}