let video;

let handpose;

let predictions = [];

​

function setup() {

  createCanvas(520, 820);

​

  video = createCapture(VIDEO);

  video.size(520, 390); // Adjust the size of the video feed

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

​

  handpose = ml5.handpose(video, modelReady);

}

​

function modelReady() {

  console.log('Model is ready!');

}

​

function draw() {

  // Display the video feed behind the canvas

  image(video, 0, 0, width, height);

​

  // Old beige paper-like background with grain

  applyGrain(1.2, 1.0, 70); // Adjust parameters for the grain intensity

​

  // Set the grid parameters

  let cols = 12;

  let rows = 20;

  let squareSize = 30;

​

  // Calculate the total size of the grid

  let gridWidth = cols * squareSize;

  let gridHeight = rows * squareSize;

​

  // Calculate the starting position to center the grid

  let startX = (width - gridWidth) / 2;

  let startY = (height - gridHeight) / 2;

​

  // Check if there are hand predictions

  if (predictions.length > 0) {

    let hand = predictions[0].landmarks[1]; // Use the tip of the index finger (you may need to adjust the index)

​

    // If updateSquares is true, use fingertip position

    if (updateSquares) {

      let x = map(hand[0], 0, video.width, 0, width);

      let y = map(hand[1], 0, video.height, 0, height);

​

      // Draw a red circle representing the fingertip

      fill(255, 0, 0, 100);

      noStroke();

      ellipse(x, y, 30, 30);

​

      // Draw the grid of squares around the fingertip

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

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

          let xOffset = startX + i * squareSize;

          let yOffset = startY + j * squareSize;

​

          noFill();

          stroke(0);

          strokeWeight(1);

          rect(xOffset, yOffset, squareSize, squareSize);

        }

      }

    } else {

      // If updateSquares is false, use random static position

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

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

          let x = startX + i * squareSize + random(-5, 5);

          let y = startY + j * squareSize + random(-5, 5);

​

          noFill();

          stroke(0);

          strokeWeight(1);

          rect(x, y, squareSize, squareSize);

        }

      }

    }

  }

​

  // Get hand predictions from the video feed

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

    predictions = results;

  });

}

​

// Function to apply grain texture to the background

function applyGrain(scaleX, scaleY, intensity) {

  loadPixels();

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

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

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

      let noiseValue = noise(x * scaleX, y * scaleY) * intensity;

      pixels[index] += noiseValue;

      pixels[index + 1] += noiseValue;

      pixels[index + 2] += noiseValue;

    }

  }

  updatePixels();

}

​