let handpose;

let predictions = [];

let img;

let hatImage;

​

function preload() {

  img = loadImage("data/hand.jpg");

  hatImage = loadImage("data/hat.png");

}

​

function setup() {

  // Create a canvas that's at least the size of the image.

  createCanvas(400, 350);

  print("loading")

  // call modelReady() when it is loaded

  handpose = ml5.handpose(modelReady);

​

  frameRate(1); // set the frameRate to 1 since we don't need it to be running quickly in this case

}

​

// when poseNet is ready, do the detection

function modelReady() {

  console.log("Model ready!");

  // when the predict function is called, tell 

  // handpose what to do with the results.

  // in this case we assign the results to our global

  // predictions variable

  handpose.on("predict", function(results) {

    predictions = results;

  });

​

  handpose.predict(img);

}

​

// draw() will not show anything until poses are found

function draw() {

  if (predictions.length > 0) {

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

    drawKeypoints();

    noLoop(); // stop looping when the poses are estimated

  }

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

  {

    let prediction = predictions[i];

    // Add the points for each finger to a struct 

    let fingers = [

        createFinger("thumb", prediction.annotations.thumb, 'red'),

        createFinger("indexFinger", prediction.annotations.indexFinger, 'green'),

        createFinger("middleFinger", prediction.annotations.middleFinger, 'blue'),

        createFinger("ringFinger", prediction.annotations.ringFinger, 'yellow'),

        createFinger("pinky", prediction.annotations.pinky, 'purple')

      ];

​

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

      let finger = fingers[i];

      fill(finger.color);

      noStroke();

      // The tip of the finger is the last item in the list - pos 3

      // draw the ellipse with the x-y coordinates

      ellipse(finger.points[3][0], finger.points[3][1], 10, 10);

      image(hatImage, finger.points[3][0] - hatImage.width / 2, finger.points[3][1] - hatImage.height / 2);

    }

  }

}

​

// A function to create the finger 

function createFinger(name, points, color) {

  return {

    name: name,

    points: points,

    color: color

  };

}

​