let video;

let predictions = [];

let ptCollect = [];

let hand;

let indexX = 100;

let indexY = 100;

let thumbX = 400;

let thumbY = 400;

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  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);

  hand = dist(indexX, indexY, thumbX, thumbY);

  if(abs(hand)<50 && abs(hand)>0){

    fill(255,0,0);

    ellipse((indexX+thumbX)/2, (indexY+thumbY)/2, 100, 100);

  }

​

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

  drawKeypoints();

  fill(255,0,0);

  ellipse(ptCollect[0],ptCollect[1], 50,50);

}

​

​

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const prediction = predictions[i];

    const keypointIn=prediction.landmarks[8];

    const keypointTh=prediction.landmarks[4];   

    indexX=keypointIn[0];

    indexY=keypointIn[1];

    thumbX=keypointTh[0];

    thumbY=keypointTh[1];

    for (let j = 0; j < prediction.landmarks.length; j += 1) {

      const keypoint = prediction.landmarks[j];

      fill(0, 255, 0);

      noStroke();

      ellipse(keypoint[0], keypoint[1], 10, 10);

      ptCollect.push(prediction[i]);

    }

  }

}

​