let showPoints = false;

​

function setup() {

  createCanvas(640, 480);

  background('#f4f1de');

​

  //Initiate HandsFree.js

    handsfree = new Handsfree({

    //showDebug: true,

    hands: true,

  })

    handsfree.start();

}

​

function draw() {

  drawHand();

}

​

//Save image when mouse is pressed

function mousePressed(){

  saveCanvas();

}

​

//Clears canvas when backspace is pressed

function keyPressed() {

  if (keyCode === BACKSPACE) {

  clear();

  background('#f4f1de');

  }

}

​

​

function drawHand() {

​

  //if the hands exist in the video

  if (handsfree.data.hands) {

    if (handsfree.data.hands.multiHandLandmarks) {

​

      //get the associated data points

      var landmarks = handsfree.data.hands.multiHandLandmarks;

      var nHands = landmarks.length;

​

      //draw the hand

      if (nHands > 0) {

        for(let i=0; i < nHands; i++) {

          var hand = landmarks[i];

          var rescaledHand = rescaleHand(hand);

          var myColor = color(200,100,50);

          drawLines(rescaledHand, myColor);

        }

      }

​

      if (showPoints) {

        drawDebugPoints(landmarks);

      }

    }

  }

}

​

//Storing the lines drawing for the hand

//See https://handsfree.js.org/ref/model/hands.html#data

function drawLines(hand, lineColor){

    //the point representing the base of the hand

  var handBase = hand[0];

​

  //the joints of the index finger

  var baseOfIndex = hand[5];

  var jointOfIndex = hand[6];

  var endOfIndex = hand[8];

    //the joints of the middle finger

  var baseOfMiddle = hand[9];

  var jointOfMiddle = hand[10];

  var endOfMiddle = hand[12];

​

  //the joints of the pinky finger

  var baseOfPinky = hand[17];

  var jointOfPinky = hand[18];

  var endOfPinky = hand[20];

​

  //the joints of the thumb 

  var baseOfThumb = hand[2];

  var jointOfThumb = hand[3];

  var endOfThumb = hand[4];

​

  //the joints of the ring finger

  var baseOfRing = hand[13];

  var jointOfRing = hand[14];

  var endOfRing = hand[16];

  //Draw lines for each finger

  strokeWeight(4);

  stroke(224, 122, 95, 100);

  line(baseOfRing.x, baseOfRing.y, jointOfRing.x, jointOfRing.y);

  line(jointOfRing.x, jointOfRing.y, endOfRing.x, endOfRing.y);

  stroke(61, 64, 91, 100);

  line(baseOfPinky.x, baseOfPinky.y, jointOfPinky.x, jointOfPinky.y);

  line(jointOfPinky.x, jointOfPinky.y, endOfPinky.x, endOfPinky.y);

  stroke(129, 178, 154, 100);

  line(baseOfMiddle.x, jointOfMiddle.y, endOfMiddle.x, endOfMiddle.y);

  line(jointOfMiddle.x, jointOfMiddle.y, endOfMiddle.x, endOfMiddle.y);

  stroke(242, 204, 143, 100);

  line(baseOfIndex.x, jointOfIndex.y, endOfIndex.x, endOfIndex.y);

  line(jointOfIndex.x, jointOfIndex.y, endOfIndex.x, endOfIndex.y);

  line(baseOfThumb.x, jointOfThumb.y, endOfThumb.x, endOfThumb.y);

  line(jointOfThumb.x, jointOfThumb.y, endOfThumb.x, endOfThumb.y);

}

​

function rescaleHand(hand) {

  //this remaps the values of the hand points to 

  //fit better within the p5 canvas

  return hand.map(

    function(point) {

      return {

        x: map(point.x, 0, 1, width, 0),

        y: map(point.y, 0, 1, 0, height)

      }

    });

}

​

/*

Resources:

Handfree.js documentation and guides: 

https://handsfree.js.org/#installing

​

Handsfree Starter Example (fingerpainting):

https://editor.p5js.org/pixelfelt/sketches/oS5CwSbM1

​

Not sure what this sketch was trying to be but I got a lot of my 

understanding and actual drawing references from here:

https://editor.p5js.org/golan/sketches/L6YF-WnQr

​

*/