let hands = [];

let video;

let rad = 50;

let x, y;

​

function preload() {

  handPose = ml5.handPose({ flipped: true });

}

​

function setup() {

  createCanvas(640, 480);

  textAlign(CENTER);

​

  // Create the video and hide it

  video = createCapture(VIDEO, { flipped: true });

  video.size(640, 480);

  video.hide();

​

  handPose.detectStart(video, gotHands);

}

​

function draw() {

  background(220);

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

​

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

    let hand = hands[i];

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

      let keypoint = hand.keypoints[8];

      noStroke();

      fill(255);

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

​

      let d = dist(x, y, keypoint.x, keypoint.y);

​

      if (d < rad / 2) {

        fill(0, 255, 0);

        stroke(255, 0, 0);

        circle(x, y, rad);

      }

    }

  }

  x = width / 2;

  y = height / 2;

  noFill();

  stroke(255, 0, 0);

  circle(x, y, rad);

  // console.log(hands);

}

​

// Callback function for when handPose outputs data

function gotHands(results) {

  // Save the output to the hands variable

  hands = results;

}

​