​

let handpose;

let predictions = [];

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  // Load the Handpose model.

  handpose = ml5.handpose(video, modelReady);

​

  // Listen for predictions.

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

    predictions = results;

  });

​

  // Hide the video element and show the canvas.

  video.hide();

}

​

function modelReady() {

  console.log("Handpose model ready!");

}

​

function draw() {

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

​

  drawEmojis();

}

​

function drawEmojis() {

  console.log(predictions.length)

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

    const prediction = predictions[i];

​

    // For each hand, find the gap between the index finger and the thumb.

    const thumbTip = prediction.annotations.thumb[3];

    const indexFingerTip = prediction.annotations.indexFinger[3];

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

​

    // Based on which hand it is, draw a different emoji.

    const emoji = i === 0 ? '☁️' : '🌈'; // First hand cloud, second hand rainbow.

    const emojiSize = d; // Size based on the distance between thumb and index finger.

​

    textSize(emojiSize);

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

  }

}

​