let handpose;

let video;

let predictions = [];

​

function setup() {

  createCanvas(600, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

  print("loading")

​

  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", function(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);

​

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

  drawObject();

}

​

// A function to draw a rectangle on the half of the screen that the finger point is in 

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 left of the screen, draw the first rectangle; otherwise draw the second

    if (x < (300)) {

      rect(0, 0, 300, 480);  // Left

    }

    else {

      rect(300, 0, 300, 480); // Right

    }

  }

}