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

  stroke(255,0,0);

  fill(255,255,0);

  strokeWeight(5);

}

​

function gotResults(results) {

  console.log(results);

  myResults = results;

}

​

function draw() {

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

  if (myResults) {

    //drawLines();

    drawKeyPoints()

  }

}

​

function drawKeyPoints() {

  if (!myResults[0] || !myResults[1]) {

    return;

  }

​

  //set vars for each selected key point

  left_thumbTip = myResults[0].thumb_tip 

  left_ringTip = myResults[0].ring_finger_tip

  right_thumbTip = myResults[1].thumb_tip 

  right_ringTip = myResults[1].ring_finger_tip

  fill(0, 255, 0);

  noStroke();

​

  //draw a circle at thumbTip's x&y coords!

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

​

  //draw a circle at ringTip's x&y coords!

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

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

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

​

}

​

//let's just do it for 1 hand

​

​

​

​

​

​

​

​

function drawLines() {

  const leftHand = myResults[0];

  const rightHand = myResults[1];

  if (!leftHand || !rightHand) {

    return;

  }

  const leftIndexTip = leftHand.index_finger_tip;

  const rightIndexTip = rightHand.index_finger_tip;

  line(leftIndexTip.x, leftIndexTip.y, rightIndexTip.x, rightIndexTip.y);

  const leftThumbTip = leftHand.thumb_tip;

  const rightThumbTip = rightHand.thumb_tip;

  line(leftThumbTip.x, leftThumbTip.y, rightThumbTip.x, rightThumbTip.y);

  line(leftThumbTip.x, leftThumbTip.y, leftIndexTip.x, leftIndexTip.y);

  line(rightThumbTip.x, rightThumbTip.y, rightIndexTip.x, rightIndexTip.y);

  // bezier(rightThumbTip.x, rightThumbTip.y, leftThumbTip.x, leftThumbTip.y, rightIndexTip.x, rightIndexTip.y, leftIndexTip.x, leftIndexTip.y);

  drawCircle(leftIndexTip, leftThumbTip);

  drawCircle(rightIndexTip, rightThumbTip);

  // drawCircle(rightIndexTip, leftIndexTip);

  // drawCircle(leftThumbTip, rightThumbTip);

}

​

function drawCircle(pointA, pointB) {

  const centerX = (pointA.x + pointB.x) / 2;

  const centerY = (pointA.y + pointB.y) / 2;

  const r = dist(pointA.x, pointA.y, pointB.x, pointB.y);

  circle(centerX, centerY, r);

}

​

​

​

​

​