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

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

​

// Global variables for storing color palettes, stolen from olivia

let cA, c1, c2, c3, c4;

​

function setup() {

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

  initializeCapture(); // Initialize webcam capture

  setupDrawing(); // Set up drawing parameters

​

  // Define color palettes 

  cA = random([

    "#D74102", "#290431", "#DF1233", "red", "#CA2C09", "#1F1155", "#4D57DD", "#640124", 

    "#A90E0C", "#002464", "#78BADB", "#F13450", "#EB712E", "#640124", "#002464", "#12A7F1"

  ]);

  c1 = random(["#D74102", "#290431", "#DF1233", "red"]);

  c2 = random(["#CA2C09", "#1F1155", "#4D57DD", "#640124"]);

  c3 = random(["#A90E0C", "#002464", "#78BADB", "#F13450"]);

  c4 = random(["#EB712E", "#640124", "#002464", "#12A7F1"]);

}

​

function draw() {

  background(10,10,10); // Set the background color to off black

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

  drawGrid(); // Draw the grid based on webcam pixels

}

​

// Function to initialize the webcam capture

function initializeCapture() {

  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(); 

}

​

// Function to set up drawing parameters

function setupDrawing() {

  strokeWeight(2); 

  stroke(255, 255, 255); // Set stroke color to white

}

​

// Function to draw the grid

function drawGrid() {

  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 = calculateBrightness(r, g, b);

      // Calculate the rotation angle based on the brightness

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

      // Set color based on brightness or any custom logic using the random palettes

      let cellColor = getColorForCell(brightness);

​

      // Calculate the center of the current cell

      let cx = x * cellWidth + cellWidth / 2;

      let cy = y * cellHeight + cellHeight / 2;

      // Set the stroke to the cell's color

      stroke(cellColor);

      // Draw the line in the cell with the calculated angle

      drawLine(cx, cy, angle, cellWidth);

    }

  }

}

​

// Function to calculate the brightness of a pixel based on its RGB values

function calculateBrightness(r, g, b) {

  return (r + g + b) / 3; // Return the average of the RGB values

}

​

// Function to draw a line at a given position with a specified rotation angle

function drawLine(x, y, angle, cellWidth) {

  push(); 

  translate(x, y); // 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();

}

​

function getColorForCell(brightness) {

  // Define an array of colors from the palette

  let palette = [cA, c1, c2, c3, c4]; 

​

  // Select a color based on the brightness range

  if (brightness < 64) {

    return palette[0]; // First color

  } else if (brightness < 128) {

    return palette[1]; // Second color

  } else if (brightness < 192) {

    return palette[2]; // Third color

  } else {

    return palette[3]; // Fourth color

  }

}

​