let video;

let predictions = [];

let textArr = ["let","your","hands","not","carpal"]

function setup() {

  createCanvas(640, 480);

  buff = createGraphics(300, 100)

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

  // textAlign(CENTER)

  // angleMode(DEGREES)

  buff.background(255, 100)

}

​

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

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const prediction = predictions[i];

    let indexFingerX, indexFingerY, thumbX, thumbY

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

      const keypoint = prediction.landmarks[j];

      fill(0, 255, 0);

      noStroke();

      thumbX = prediction.landmarks[4][0]; //thumb tip landmark point is 4 as per the model keypoint 0 is the x coordinate

      thumbY = prediction.landmarks[4][1];

​

      indexFingerX =  prediction.landmarks[8][0]; //index tip landmark point is 4 as per the model

      indexFingerY =  prediction.landmarks[8][1];

//       if(j == 4 || j == 8){

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

//       }

    }

    ellipse(thumbX, thumbY, 10, 10)

    ellipse(indexFingerX, indexFingerY, 10, 10)

    let v = createVector(indexFingerX, indexFingerY, thumbX, thumbY)

    let dy = dist(thumbX,thumbY,indexFingerX, indexFingerY)

    let angle = v.heading()

    strokeWeight(1)

    stroke(0)

    line(thumbX,thumbY,indexFingerX, indexFingerY)

    // console.log(dy)

    textSize(dy)

    // rotate(dy)

    let textString = "copycat"

​

    let mid = midpoint(thumbX,thumbY,indexFingerX, indexFingerY)

    buff.text(textString,0,0,thumbX,thumbY)

    translate(mid.x, mid.y)

    rotate(angle)

    translate(-mid.x, -mid.y)

    // image(buff, indexFingerX, indexFingerY, dy, dy / 3)

    fill(230, 100)

    noStroke()

    rect(mid.x - dy / 2, mid.y - dy / 4, dy, dy / 2)

    // rectMode(CENTER)

    // rect(mid.x, mid.y, dy, dy / 2)

  }

}

​

function midpoint(x1, y1, x2, y2) {

  return createVector((x1 + x2) / 2, (y1 + y2) / 2)

}

​