let video;

let predictions = [];

let squareX, squareY;

let pinchThreshold = 30; // Adjust the threshold as needed

let isHoldingSquare = false;

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  // Load the Handpose model

  handpose = ml5.handpose(video, modelReady);

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

    predictions = results;

  });

​

  video.hide();

  squareX = width / 2;

  squareY = height / 2;

}

​

function modelReady() {

  console.log("Handpose model is ready!");

}

​

function draw() {

  // Display video feed

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

​

  if (predictions.length > 0) {

    let landmarks = predictions[0].landmarks;

​

    let thumb = landmarks[4]; // Thumb tip

    let index = landmarks[8]; // Index finger tip

​

    // Calculate the distance between thumb and index finger

    let pinchDistance = dist(thumb[0], thumb[1], index[0], index[1]);

​

    // Check if the pinch gesture is detected

    if (pinchDistance < pinchThreshold && !isHoldingSquare) {

      isHoldingSquare = true;

      squareX = index[0];

      squareY = index[1];

    }

​

    // If the square is held, move it with the hand

    if (isHoldingSquare) {

      squareX = index[0];

      squareY = index[1];

    }

​

    // If the fingers are open, release the square

    if (pinchDistance >= pinchThreshold && isHoldingSquare) {

      isHoldingSquare = false;

    }

​

    // Draw the moving square on top of the video feed

    fill(255, 0, 0); // Red square

    rect(squareX - 25, squareY - 25, 50, 50);

  }

}

​

​