let capture; 

let cols = 30; 

let rows = 30; 

let cellWidth, cellHeight;

let handpose;

let predictions = [];

​

// Multiple color palettes

let palettes = [

  ['#FF4500', '#FFD700', '#00FA9A', '#1E90FF', '#FF69B4', '#8A2BE2', '#FFDAB9'], // Palette 1

  ['#D32F2F', '#1976D2', '#388E3C', '#FBC02D', '#8E24AA', '#FF6F00', '#0288D1'], // Palette 2

  ['#673AB7', '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#FFC107', '#E91E63']  // Palette 3

];

let currentPalette = palettes[0];

​

let lastPinchTime = 0; // Timestamp of the last pinch

let cooldownTime = 1000; // Cooldown period in milliseconds (1 second)

​

function setup() {

  createCanvas(windowWidth, windowHeight); 

  capture = createCapture(VIDEO);

  capture.size(cols, rows); 

  capture.hide(); 

  cellWidth = width / cols;

  cellHeight = height / rows;

  noStroke();

​

  // Initialize the handpose model !! still dont understand this, but it gets the handpose info and puts it into the predicitons array

  handpose = ml5.handpose(capture, () => console.log('Handpose model ready'));

  handpose.on('predict', results => {

    predictions = results;

  });

}

​

function draw() {

  background(30); 

  capture.loadPixels();

  // Check for pinch gestures only call detect pinch if there is more than 0 hand points detected

  if (predictions.length > 0) {

    detectPinch(predictions);

  }

  // Draw the video pixelated grid

    drawGrid();

}

​

// Draw the grid based on webcam input and pixel brightness

function drawGrid() {

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

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

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

      let r = capture.pixels[index];

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

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

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

​

      // Map brightness to a value between 0 and 1 for color interpolation

      let brightnessFactor = map(brightness, 0, 255, 0, 1);

​

      // Choose a base color from the current palette based on brightness use floor to make it an int and map to easily get it from  0-255 to the length of the color palette

      let colorIndex = floor(map(brightness, 0, 255, 0, currentPalette.length - 1));

      let baseColor = color(currentPalette[colorIndex]);

​

      // Interpolate between white and the base color based on brightness

      let finalColor = lerpColor(color(255), baseColor, brightnessFactor);

      fill(finalColor);

​

      rect(x * cellWidth, y * cellHeight, cellWidth, cellHeight);

    }

  }

}

​

// Detect pinch gesture based on thumb and index finger distance

function detectPinch(predictions) {

  let hand = predictions[0]; // Get the first detected hand

  let thumbTip = hand.landmarks[4]; // Thumb tip landmark

  let indexTip = hand.landmarks[8]; // Index finger tip landmark

  // Calculate the distance between thumb tip and index finger tip

  let distance = dist(thumbTip[0], thumbTip[1], indexTip[0], indexTip[1]);

  //compare the x and y values of the thumb and index finger 

  console.log(distance)

  //console.log(hand.landmarks[4])

  //console.log(thumbTip[0])

  //console.log(hand.landmarks[8])

  //console.log(indexTip[0])

​

  // If the distance is less than a threshold and cooldown has passed

  if (distance < 50 && millis() - lastPinchTime > cooldownTime) {

    changeColorPalette();

    lastPinchTime = millis(); // Update the time of the last palette change

  }

}

​

// Change the color palette to the next one in the list

function changeColorPalette() {

  //get the index of the current palette and add one to update it, use modulo to ensure that it doesnt exceed the total number of palettes 

  let nextIndex = (palettes.indexOf(currentPalette) + 1) % palettes.length;

  currentPalette = palettes[nextIndex];

}

​

// Handle resizing

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  cellWidth = width / cols;

  cellHeight = height / rows;

}

​