* @name Video Pixels

 * @frame 320,240

 * @description <p>Load a video, manipulate its pixels and draw to canvas.

 * <p><em><span class="small"> To run this example locally, you will need the

 * <a href="http://p5js.org/reference/#/libraries/p5.dom">p5.dom library</a>

 * at least one video file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.</span></em></p>

 */

let fingers;

​

function setup() {

  createCanvas(320, 240);

  // specify multiple formats for different browsers

  fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);

  fingers.loop();

  fingers.hide();

  noStroke();

  fill(0);

}

​

function draw() {

  background(255);

  fingers.loadPixels();

  const stepSize = round(constrain(mouseX / 8, 6, 32));

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

    for (let x = 0; x < width; x += stepSize) {

      const i = y * width + x;

      const darkness = (255 - fingers.pixels[i * 4]) / 255;

      const radius = stepSize * darkness;

      ellipse(x, y, radius, radius);

    }

  }

}

​