let myVideo;

let myResults;

​

function setup() {

  createCanvas(640, 480);

  myVideo = createCapture(VIDEO);

  myVideo.size(width, height);

  myVideo.hide();

​

  handPose = ml5.handpose();

  handPose.detectStart(myVideo, gotResults);

}

​

function gotResults(results) {

  //console.log(results); // uncomment if you want to see your results!

  myResults = results;

}

​

function draw() {

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

​

  if (myResults) {

    drawKeyPoints();

  }

}

​

// Paste functions generated by the ml5 KeyPoints tool for your selected key points here!

​

// ---------------------------------------

function drawKeyPoints() {

  //myResults returns an object for each hand

  leftHand = myResults[0];

  rightHand = myResults[1];

  if (!leftHand && !rightHand) {

    return

  }

  KeyPointsHelper(leftHand);

  KeyPointsHelper(rightHand);

}

​

function KeyPointsHelper(hand) {

if (!hand) return;

  //set vars for each selected key point

  thumbTip = hand.thumb_tip 

  pinkyTip = hand.pinky_finger_tip 

​

  fill(0, 255, 0);

  noStroke();

​

  circle(thumbTip.x, thumbTip.y, 10);

  circle(pinkyTip.x, pinkyTip.y, 10);

}