let video;

let hands = [];

​

let squareX = 0,

  squareY = 0; // Square position

let easing = 0.2;

// Fingertip keypoint: Thumb, Index, Middle, Ring, Pinky

const fingertipIndices = [4, 8, 12, 16, 20];

​

function preload() {

  handPose = ml5.handPose();

}

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  handPose.detectStart(video, gotHands);

}

​

function draw() {

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

​

  let highestY = height; // Start with bottom of the canvas

  let highestX = 0; // Default X position

​

  if (hands.length > 0) {

    let hand = hands[0]; // Track the first detected hand

​

    for (let i = 0; i < fingertipIndices.length; i++) {

      let index = fingertipIndices[i];

      let keypoint = hand.keypoints[index];

​

      if (keypoint) {

        // Check if this fingertip is the highest (smallest Y value)

        if (keypoint.y < highestY) {

          highestY = keypoint.y;

          highestX = keypoint.x;

        }

      }

    }

  }

​

  //  smoother motion

  squareX += (highestX - squareX) * easing;

  squareY += (highestY - squareY) * easing;

​

  // Draw the red square following the highest fingertip

  fill(255, 0, 0);

  noStroke();

  rectMode(CENTER);

  rect(squareX, squareY, 40, 40);

}

​

// Callback function for handPose

function gotHands(results) {

  hands = results;

}

​