​

let handpose;

let predictions = [];

let randomDigit = 0;

let prevDistance = 0;

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  // Load the handpose model.

  handpose = ml5.handpose(video, modelReady);

​

  // Listen to new predictions

  handpose.on("predict", results => {

    predictions = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

​

  newRandomDigit();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

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

​

  if (predictions.length > 0) {

    const thumbTip = predictions[0].annotations.thumb[3];

    const indexFingerTip = predictions[0].annotations.indexFinger[3];

​

    const d = dist(thumbTip[0], thumbTip[1], indexFingerTip[0], indexFingerTip[1]);

​

    if (abs(d - prevDistance) > 5) {

      newRandomDigit();

      prevDistance = d;

    }

​

    textSize(d);

    text(randomDigit, (thumbTip[0] + indexFingerTip[0]) / 2, (thumbTip[1] + indexFingerTip[1]) / 2);

  }

}

​

function newRandomDigit() {

  randomDigit = int(random(0, 10));

}

​