let myVideo;

let myResults;

​

const magicNumber = {

  width: 80,

  height: 60,

};

​

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() {

  translate(width,0); // move to far corner

  scale(-1.0,1.0);    // flip x-axis backwards

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

​

  if (myResults) {

    drawKeypoints();

  }

}

​

function drawKeypoints() {

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

    const oneHand = myResults[i];

    const kp = oneHand.keypoints;

​

    const w = dist(kp[5].x, kp[5].y, kp[17].x, kp[17].y);

    const h = dist(kp[0].x, kp[0].y, kp[17].x, kp[17].y);

​

    const sz =(w/magicNumber.width + h/magicNumber.height)/2

    if (w > magicNumber.width && h > magicNumber.height) {

      circle(kp[8].x, kp[8].y, 15*sz)

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

        const point2D = oneHand.keypoints[j];

        const point3D = oneHand.keypoints3D[j];

​

        // text(j, point2D.x, point2D.y)

        // circle(point2D.x, point2D.y, 10*sz);

        if (point3D.z > 0.01) {

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

          print(point3D.z)

        }

      }

    }

  }

}

​