* @name Shader Using Webcam

 * @description The webcam can be passed to shaders as a texture.

 * <br> To learn more about using shaders in p5.js: <a href="https://itp-xstory.github.io/p5js-shaders/">p5.js Shaders</a>

 */

​

 // this variable will hold our shader object

 // this variable will hold our webcam video

 let cam;

​

​

 function setup() {

   createCanvas(710, 400);

   noStroke();

​

   cam = createCapture(VIDEO);

   cam.size(710, 400);

​

   cam.hide();

 }

function mousePressed() {

  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {

    let fs = fullscreen();

    fullscreen(!fs);

  }

}

 function draw() {

   fill(0,0,255);

background(0,0,0);

   cam.loadPixels();

  const stepSize = round(constrain(1/ 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 - cam.pixels[i * 4]) / 255;

      const radius = stepSize * darkness;

      ellipse(x, y, radius, radius);

    }

  }

 }

​