let video;

let predictions = [];

​

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() {

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

​

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

  drawKeypoints();

  //drawLines();

​

  //if(predictions.length > 0) {console.log(predictions); noLoop();}

  //showLogs();

​

  if (predictions.length > 0) {

    // drawLines([0, 5, 9, 13, 17, 0]);//palm

    //drawLines([0, 1, 2, 3 ,4]);//thumb

    // drawLines([5, 6, 7, 8]);//index finger

    // drawLines([9, 10, 11, 12]);//middle finger

    // drawLines([13, 14, 15, 16]);//ring finger

    // drawLines([17, 18, 19, 20]);//pinky

    //drawLandmarks([0, 1], 0);//palm base

    //drawLandmarks([1, 5], 60);//thumb

    //drawLandmarks([5, 9], 120);//index finger

    //drawLandmarks([9, 13], 180);//middle finger

    //drawLandmarks([13, 17], 240);//ring finger

    //drawLandmarks([17, 21], 300);//pinky

  }

  drawThumb();

}

​

// 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.landmarks.length; j += 1) {

      const keypoint = prediction.landmarks[j];

      fill(0, 255, 0);

      noStroke();

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

    }

  }

}

​

function showLogs() {

  let textX = 10;

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

    let prediction = predictions[i];

    text("Confidence: " + prediction.handInViewConfidence, textX, 40);

​

    text(

      "Top Left: " +

        prediction.boundingBox.topLeft[0] +

        ", " +

        prediction.boundingBox.topLeft[1],

      textX,

      60

    );

    text(

      "Bottom Right: " +

        prediction.boundingBox.bottomRight[0] +

        ", " +

        prediction.boundingBox.bottomRight[1],

      textX,

      80

    );

  }

}

​

function drawLines(index) {

  stroke(0, 0, 255);

  strokeWeight(3);

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

    for (let j = 0; j < index.length - 1; j++) {

      let x = predictions[i].landmarks[index[j]][0];

      let y = predictions[i].landmarks[index[j]][1];

      let z = predictions[i].landmarks[index[j]][2];

​

      let _x = predictions[i].landmarks[index[j + 1]][0];

      let _y = predictions[i].landmarks[index[j + 1]][1];

      let _z = predictions[i].landmarks[index[j + 1]][2];

      line(x, y, _x, _y);

    }

  }

}

​

function drawThumb() {

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

    const prediction = predictions[i];

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

      const keypoint1 = createVector(

        prediction.annotations.thumb[j][0],

        prediction.annotations.thumb[j][1],

        prediction.annotations.thumb[j][2]

      );

      const keypoint2 = createVector(

        prediction.annotations.thumb[j + 1][0],

        prediction.annotations.thumb[j + 1][1],

        prediction.annotations.thumb[j + 1][2]

      );

      fill(0, 255, 0);

      stroke(255);

      strokeWeight(3);

      console.log(keypoint1);

      line(keypoint1.x, keypoint1.y, keypoint1.z, keypoint2.x, keypoint2.y, keypoint2.z);

    }

  }

}

​

function drawLandmarks(indexArray, hue) {

  noFill();

  strokeWeight(10);

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

    for (let j = indexArray[0]; j < indexArray[1]; j++) {

      let x = predictions[i].landmarks[j][0];

      let y = predictions[i].landmarks[j][1];

      let z = predictions[i].landmarks[j][2];

      stroke(hue, 40, 255);

      point(x, y);

    }

  }

}

​