/*
 * @name Video Pixels
 * @arialabel Video is turned into black circles to look like pixels. Pixel size increases as the user’s mouse is dragged to the right and decreases as the user’s mouse is dragged to the left 
 * @frame 320,240
 * @description Load a video, manipulate its pixels and draw to canvas.
 * To run this example locally, you will need a running 
 * <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.
 */
let fingers;

function setup() {
  // createCanvas(320, 240);
  createCanvas(windowWidth, windowHeight);
  // specify multiple formats for different browsers
  // fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
  fingers = createVideo(['../../../../p5js-website-legacy-examples/assets/fingers.mov', '../../../../p5js-website-legacy-examples/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);
    }
  }
}