VIDEO PIXELS

Video input is basically just like an image: we can get it's width and height, and access the frame's pixel values too!

​

BASED ON

https://p5js.org/examples/dom-video-pixels.html

​

CHALLENGES

1. Can you have the circles filled with the pixel color instead of just black?

2. Notice a lag before the video starts? Can you have something else display onscreen before the camera is ready? (Hint: if video.width === 0, then it's not ready yet)

*/

​

let video;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  // Webcam capture (at the size of the window)

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide();

}

​

function draw() { 

  background(255);

​

  // Try experimenting with this, or map the grid size to your mouse position to make it interactive!

  let gridSize = 20;

​

  // The video has pixels just like an image...

  video.loadPixels();

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

    for (let x=0; x<video.width; x+=gridSize) {

      // At the current position, get the red value (an approximation for brightness) and use it to create the diameter

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

      let r = video.pixels[index];

      let dia = map(

        r, 

        0, 255,

        gridSize, 2

      );

      // Draw a circle at the current location using the diameter we calculated

      fill(0);

      noStroke();

      circle(x + gridSize/2, y + gridSize/2, dia);

    }

  }

}

​

​