let handpose;

​

//array for hand point predictions

let predictions = [];

​

//variable for image

let img;

​

// load the image from the data folder before the main program starts

function preload(){

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

}

​

function setup() {

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

  createCanvas(400, 350);

​

  // print to let us know that handpose model (which is initialized on the next line) started loading

  print("loading")

  /* initialize the handpose model,

 passes the modelReady function as a callback,

      and calls modelReady when the 

      handpose model is loaded and ready to use. */

  handpose = ml5.handpose(modelReady);

  /* set the frameRate to 1 because an image does not change

      so model predictions shouldn't change */

  frameRate(1); 

}

​

// when handPose ml model is ready this function will run

function modelReady() {

  // print to let us know that the model is loaded and ready to start predicting!

  console.log("Model ready!");

  /* when the predict function is called, we pass a function 

     that tells handpose what to do with the results. */

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

​

    // results from the prediction is stored in the predictions variable

    predictions = results;

  });

  /* calls the handpose.predict method on img to predict points on the hand 

    to identify landmarks and fingers */

   handpose.predict(img);

}

​

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

function draw() {

  if (predictions.length > 0) {

    //display image on canvas

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

    //function to draw points for all predictions

    drawKeypoints();

​

    // stop draw from running again when poses are estimated

    noLoop();   

  }

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

 // Make sure that a prediction is present in the prediction array 

 if (predictions.length > 0) {

    // The Handpose model keeps making predictions. To keep it simple, we just take the first prediction is this case

    let prediction = predictions[0];

​

           /* array for each prediction point

              indicies 0 - 4 : thumb

              indicies 5 - 8 : pointer

              indicies 9 - 12 : middle finger

              indicies 13 - 16 : ring finger

              indicies 17 - 20 : pinky

           */

    let keypoints = prediction.landmarks

    //display predictions object in the console    

    console.log(prediction)

    /* Loop through all the predicted key points

              index 0 : x

              index 1 : y

              index 2 : z  */

     for (let keypoint of keypoints) {

        //draw ellipses at each keypoint

        fill(0, 255, 0);

        noStroke();

        ellipse(keypoint[0], keypoint[1], 10, 10);

    }

  }

}