Port of Processing Examples > Libraries > Video > Mirror to p5.js

mirror.js

// Port of Processing Examples > Libraries > Video > Mirror


// Size of each cell in the grid
var cellSize = 20;
// Number of columns and rows in our system
var cols, rows;
// Variable for capture device
var vid;

var ready = false;


function setup() {
  pixelDensity(1);
  createCanvas(640, 480);
  cols = width / cellSize;
  rows = height / cellSize;
  colorMode(RGB, 255, 255, 255, 100);
  vid = createCapture(VIDEO, function() {
    vid.size(width, height);
    vid.hide();
    ready = true;
  });
  
  background(0);
}


function draw() { 

  if (ready) {
    vid.loadPixels();

    // Begin loop for columns
    for (var i = 0; i < cols; i++) {
      // Begin loop for rows
      for (var j = 0; j < rows; j++) {
      
        // Where are we, pixel-wise?
        var x = i*cellSize;
        var y = j*cellSize;
        var loc = 4 * ((vid.width - x - 1) + y*vid.width); // Reversing x to mirror the image
      
        var r = vid.pixels[loc];
        var g = vid.pixels[loc+1];
        var b = vid.pixels[loc+2];
        // Make a new color with an alpha component
        var c = color(r, g, b, 75);
      
        // Code for drawing a single rect
        // Using translate in order for rotation to work properly
        push();
        translate(x+cellSize/2, y+cellSize/2);
        // Rotation formula based on brightness
        rotate((2 * PI * brightness(c) / 255.0));
        rectMode(CENTER);
        fill(c);
        noStroke();
        // Rects are larger than the cell for some overlap
        rect(0, 0, cellSize+6, cellSize+6);
        pop();
      }
    }
  }
}