​

function setup() {

  createCanvas(400, 400);

  vid = createCapture(VIDEO);  // Start capturing video

  vid.size(400, 400);          // Match the size of the canvas to avoid scaling issues

  vid.hide();                  // Hide the HTML video element

}

​

function draw() {

  background(220);

  vid.loadPixels();  // Load the video pixels to access them

​

  // Loop through the pixels at a step of 10 to draw larger rectangles

  for (let x = 0; x < vid.width; x += 20) {

    for (let y = 0; y < vid.height; y += 20) {

      let i = 4 * ((y * vid.width) + x); // Calculate the index for the pixels array

      let r = vid.pixels[i];       // Red

      let g = vid.pixels[i + 1];   // Green

      let b = vid.pixels[i + 2];   // Blue

      let a = vid.pixels[i + 3];   // Alpha

//       let c = (r+g+b)/2;

//       let gray = (r + g + b) / 3;

​

//       if (gray > 100) {

//         fill(255); 

//       } else {

//         fill(0); 

//       }

      let c = color(r, g, b);

      // Get the brightness of the color

      let brightnessValue = brightness(c);

​

      if (brightnessValue > 55) {

        fill(255); 

      } else {

        fill(0); 

      }

      //fill(r, g, b, a);            // Use the color from the video

      rect(x, y, 20, 20);          // Draw a rectangle at (x, y) with the color

    }

  }

}