​

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

​

  if (hands.length > 1) {

    let index_finger_tip1 = hands[0].index_finger_tip;

    let index_finger_tip2 = hands[1].index_finger_tip;

    // draw a circle

    let centerX = (index_finger_tip1.x + index_finger_tip2.x) / 2;

    let centerY = (index_finger_tip1.y + index_finger_tip2.y) / 2;

    let circleSize = dist(

      index_finger_tip1.x,

      index_finger_tip1.y,

      index_finger_tip2.x,

      index_finger_tip2.y

    );

    circle(centerX, centerY, circleSize);

  }

}

​