​

let handPose;

let video;

let hands = [];

​

function preload() {

  handPose = ml5.handPose();

}

​

function setup() {

  createCanvas(640, 480);

​

  // Create the webcam video and hide it

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

​

  // Start detecting hands in the webcam video

  handPose.detectStart(video, gotHands);

}

​

// This "callback" function gets executed whenever

// a detection has finished

function gotHands(results) {

  // Save the result in the global "hands" variable

  // we'll use inside draw()

  hands = results;

  console.log(hands);

}

​

function draw() {

  // Draw the webcam video

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

​

  // Draw all the tracked keypoints

  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[j];

      fill(0, 255, 0);

      noStroke();

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

    }

  }

}

​