let cols = 50; // Number of columns in the grid

let rows = 50; // Number of rows in the grid

​

function setup() {

  createCanvas(windowWidth, windowHeight); // Create a canvas that fits the browser window

  capture = createCapture(VIDEO); // Capture video from the webcam

  capture.size(cols, rows); // Resize the video feed to match the grid dimensions (cols x rows)

  capture.hide(); 

  strokeWeight(2); 

  stroke(255,255,255) // set stroke color to white

}

​

function draw() {

  background(0); // Set the background color to black

  capture.loadPixels(); // Load the current frame's pixel data from the video feed

  let cellWidth = width / cols; // Calculate the width of each grid cell

  let cellHeight = height / rows; // Calculate the height of each grid cell

  // Loop through each cell in the grid

  for (let y = 0; y < rows; y++) {

    for (let x = 0; x < cols; x++) {

      // Calculate the index of the pixel in the video feed corresponding to the current cell

      let index = (x + (y * cols)) * 4;

      // Get the RGB values from the pixel

      let r = capture.pixels[index];

      let g = capture.pixels[index + 1];

      let b = capture.pixels[index + 2];

      // Calculate the brightness of the pixel as the average of RGB values

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

      // Map the brightness to an angle between horizontal (HALF_PI) and vertical (0)

      let angle = map(brightness, 0, 255, HALF_PI, 0);

      // Calculate the center of the current cell

      let cx = x * cellWidth + cellWidth / 2;

      let cy = y * cellHeight + cellHeight / 2;

      // Draw the line in the cell

      push(); 

      translate(cx, cy); // Move the origin to the center of the cell

      rotate(angle); // Rotate the line according to the brightness

      line(-cellWidth / 2, 0, cellWidth / 2, 0); // Draw a line centered at (0, 0)

      pop();

    }

  }

}

​

​