let handpose;

let video;

let predictions = [];

​

function setup() {

  createCanvas(600, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

  print("loading");

  fill(0, 255, 0);

​

  handpose = ml5.handpose(video, modelReady);

​

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new hand poses are detected

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

    predictions = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

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

  background(220)

​

  // We can call both functions to draw all keypoints and the skeletons

  drawObject();

}

​

// A function to track the finger and draw the rectangle in the appropriate color

function drawObject() {

   if (predictions.length > 0) {

      let prediction = predictions[0];

      let x = prediction.annotations.indexFinger[3][0]

      let y = prediction.annotations.indexFinger[3][1]

      print(prediction, x, y)

      fill(51);

      noStroke();

      // A small ellipse to track the finger 

      ellipse(round(x), round(y), 20, 20)

​

      // If the finger point is in the region of the rectangle, draw it in yellow; otherwise draw it in gray. 

      if ((x > 150) && (x < 250) && (y > 150) && (y < 350))

    {

      fill(255, 204, 0);

    } else {

      fill(51);

    }

  }

  rect(150, 150, 100, 200);

}

​

​