let handpose;              // hand pose model

let hand = [];             // result from hand pose detection

​

let videoScale = 5; 

​

function setup() {

  // creates canvas

  createCanvas(windowWidth, windowHeight);

  // storing video feed to video_feed variable

  video_feed = createCapture(VIDEO);

  // video_feed.size(windowWidth, windowHeight);

  // prevents duplicate feed on the canvas

  video_feed.hide();

  // loading handpose model from ml5

  handpose = ml5.handpose(video_feed, modelLoaded);

  handpose.on('hand', results => {

      hand = results;

  })

}

​

function draw() {

  // setting background color

  background(255);

  // scaling video to avoid distortion

  let aspectRatio = video_feed.height/video_feed.width;

  // mirroring feed from the webcam

  // -- beginning of transformation

  push();

  translate(width, 0);

  scale(-1, 1);

  image(video_feed, width - ( width / videoScale ), 0,  width / videoScale , (width /videoScale) * aspectRatio);

  drawKeypoints();

  drawBoundingBox();

  pop();

  // -- ending of transformation

​

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function modelLoaded() {

  print("Model loaded");

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const prediction = hand[i];

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

      const keypoint = prediction.landmarks[j];

      fill(0, 255, 0);

      noStroke();

      let x = map(keypoint[0], 0, video_feed.width, 0, width);

      let y = map(keypoint[1], 0, video_feed.height, 0 , height);

      ellipse(x, y , 10, 10);

      print(keypoint[2]);

    }

  }

}

​

// A function to draw bounding box of the detected hand

function drawBoundingBox() {

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

    const prediction = hand[i];

    let x = map(prediction.boundingBox.topLeft[0], 0, video_feed.width, 0, width);

    let y = map(prediction.boundingBox.topLeft[1], 0, video_feed.height, 0 , height);

    let w = map(prediction.boundingBox.bottomRight[0], 0, video_feed.width, 0, width) - x;

    let h = map(prediction.boundingBox.bottomRight[1], 0, video_feed.height, 0, height) - y;

    noFill();

    stroke('pink');

    rect(x, y, w, h);

    }

}