let video;

let predictions = [];

let size = 10;

let flippedVideo;

let t = [];

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide();

  flippedVideo = ml5.flipImage(video);

​

  handpose = ml5.handpose(video, modelReady);

  handpose.on("hand", gotResults);

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function gotResults(results) {

  predictions = results;

}

​

function draw() {

  // draw the video

  flippedVideo = ml5.flipImage(video);

  image(flippedVideo, 0, 0);

  background(0, 0, 0, 220);

​

  // check if we have a prediction

  //print(predictions);

  if (predictions && predictions.length > 0) {

    // check if we have a thumb

    let thumb;

    if (

      predictions[0].annotations.thumb &&

      predictions[0].annotations.thumb.length > 0

    ) {

      // yes, store it in a variable

      thumb =

        predictions[0].annotations.thumb[

          predictions[0].annotations.thumb.length - 1

        ];

      thumb[0] = 640 - thumb[0];

      thumb[1] = thumb[1];

      ellipse(thumb[0], thumb[1], 5, 5);

    }

​

    // check if we have an index finger

    let indexFinger;

    if (

      predictions[0].annotations.indexFinger &&

      predictions[0].annotations.indexFinger.length > 0

    ) {

      // yes, store it in a variable

      indexFinger =

        predictions[0].annotations.indexFinger[

          predictions[0].annotations.indexFinger.length - 1

        ];

      indexFinger[0] = 640 - indexFinger[0];

      indexFinger[1] = indexFinger[1];

      ellipse(indexFinger[0], indexFinger[1], 5, 5);

    }

​

    // if we have both thumb and index finger

    if (thumb && indexFinger) {

      // calculate the distance between the two respective

      // x and y coordinates of the fingers

      size = dist(thumb[0], thumb[1], indexFinger[0], indexFinger[1]);

    }

    //print(thumb[0], thumb[1], indexFinger[0], indexFinger[1]);

    x = (thumb[0] + indexFinger[0]) / 2;

    y = (thumb[1] + indexFinger[1]) / 2;

    d = dist(thumb[0], thumb[1], indexFinger[0], indexFinger[1]) / 3;

    t.push([x, y, d]);

  }

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

    push();

    noStroke();

    fill(random(0, 255), random(0, 255), random(0, 255));

    circle(t[i][0], t[i][1], t[i][2]);

    pop();

  }

  if (t.length > 400) {

    t.splice(0, 1);

  }

}

​