let myVideo;

let myResult;

​

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

}

​

function gotResults(results) {

  console.log(results);

  myResults = results;

}

​

function draw() {

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

  if (myResults) {

    drawKeypoints();

    //console.log(result)

  }

}

​

function drawKeypoints() {

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

    const oneHand = myResults[i];

    for (let j = 0; j < oneHand.keypoints.length; j++) {

      const point = oneHand.keypoints[j];

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

    }

  }

}

​

// function drawKeyPoints(result) {

​

//   //set vars for each selected key point

//   console.log(result[0].index_finger_tip )

// //   indexTip = result[0].index_finger_tip 

// //   middleTip = result[0].middle_finger_tip 

// //   fill(0, 255, 0);

// //   noStroke();

​

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

// //   circle(indexTip.x, indexTip.y, 10);

​

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

// //   circle(middleTip.x, middleTip.y, 10);

​

// }

​