​

let handpose;

let video;

let predictions = [];

let currentDigit = Math.floor(Math.random() * 10);

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  // Load the handpose model.

  handpose = ml5.handpose(video, modelReady);

​

  // Listen to new 'predict' events

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

    predictions = results;

    checkFingersTouching();

  });

​

  video.hide();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

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

​

  drawFingerPositions();

}

​

function drawFingerPositions() {

  if (predictions.length > 0) {

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

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

​

    // Draw circles on index and thumb tips

    fill(0, 255, 0);

    ellipse(indexTip[0], indexTip[1], 20);

    ellipse(thumbTip[0], thumbTip[1], 20);

​

    // Draw the digit

    let distance = dist(indexTip[0], indexTip[1], thumbTip[0], thumbTip[1]);

    textSize(distance);

    textAlign(CENTER, CENTER);

    text(currentDigit, (indexTip[0] + thumbTip[0]) / 2, (indexTip[1] + thumbTip[1]) / 2);

  }

}

​

function checkFingersTouching() {

  if (predictions.length > 0) {

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

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

​

    let distance = dist(indexTip[0], indexTip[1], thumbTip[0], thumbTip[1]);

​

    // Change digit if fingers are close enough

    if (distance < 20) {

      currentDigit = Math.floor(Math.random() * 10);

    }

  }

}

​