let video;

let predictions = [];

let color1 = [0, 255, 255];

let color2 = [255, 0, 0];

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  handpose = ml5.handpose(video, modelReady);

​

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new hand poses are detected

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

    predictions = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  // camera flip code from https://editor.p5js.org/js6450/sketches/ls5ETAfd0

  //move image by the width of image to the left

  translate(video.width, 0);

  //then scale it by -1 in the x-axis

  //to flip the image

  scale(-1, 1);

  //draw video capture feed as image inside p5 canvas

  image(video, 0, 0);

​

  // We can call both functions to draw all keypoints and the skeletons

  drawKeypoints();

  console.log(predictions);

}

// thumb: Array(4)

// indexFinger: Array(4)

// middleFinger: Array(4)

// ringFinger: Array(4)

// pinky: Array(4)

// palmBase: Array(1)

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const prediction = predictions[i];

​

    for (let j = 0; j < prediction.annotations.thumb.length; j += 1) {

      const sculpture = prediction.annotations.thumb[j];

      fill(255, 0, 0);

      ellipse(sculpture[0], sculpture[1], 40, 40);

      //console.log(thumbTip);

    }

​

    for (let j = 0; j < prediction.annotations.pinky.length; j += 1) {

      // made variable for tip length of array - 1

      const tipNumber = prediction.annotations.pinky.length - 1;

      // only do for the tip circle

      const pinkyTime = prediction.annotations.pinky[tipNumber];

      if (pinkyTime[0] > width / 2) {

      ellipse(pinkyTime[0], pinkyTime[1], 40, 40);

​

      //console.log(thumbTip);

    }

  }

}

​