let showPoints = false;

​

​

//------------------------------------------

function setup() {

  createCanvas(640, 480);

​

  //you can change the maxNumHands if you want more than 1

  handsfree = new Handsfree({

    showDebug: true,

    hands: true,

    maxNumHands: 1

  })

​

  handsfree.start();

}

​

//------------------------------------------

function draw() {

  background(200);

  drawHand();

}

​

function mouseClicked() {

  showPoints = !showPoints;

}

​

//------------------------------------------

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 first hand

      if (nHands > 0) {

        var hand = landmarks[0];

        var rescaledHand = rescaleHand(hand);

        drawCreature(rescaledHand, "blue");

      }

​

      if (showPoints) {

        drawDebugPoints(landmarks);

      }

​

    }

  }

  fill("black");

  text("Click to show the debugging points :-)", 20, 30);

}

​

function drawCreature(hand, critterColor) {

​

  //setup colors

  fill(critterColor);

  strokeWeight(10);

  stroke(critterColor);

​

  //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 pinky finger

  var baseOfPinky = hand[17];

  var jointOfPinky = hand[18];

  var endOfPinky = hand[20];

​

  //the joints of the middle finger

  var baseOfMiddle = hand[9];

  var jointOfMiddle = hand[10];

  var endOfMiddle = hand[12];

​

  //the joints of the thumb finger

  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];

​

  //calculate a height for the body based on the points in the hand

  var bodyHeight = baseOfPinky.y - handBase.y;

  //calculate a width for the body based on the points in the hand

  var bodyWidth = baseOfThumb.x - baseOfPinky.x;

​

  //we want to scale the head and feet 

  //according to the rest of the body too

  var headHeight = bodyHeight / 2;

  var feetHeight = bodyHeight / 5;

  var feetWidth = bodyHeight / 3;

​

  //body of thing

  rect(baseOfPinky.x, handBase.y, bodyWidth, bodyHeight);

​

  //head and neck

  circle(endOfThumb.x,

    endOfThumb.y,

    headHeight);

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

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

​

  //eyeball

  fill("white");

  noStroke();

  circle(endOfThumb.x + headHeight / 10,

    endOfThumb.y,

    headHeight / 3);

  fill("black");

  circle(endOfThumb.x + headHeight / 10,

    endOfThumb.y,

    headHeight / 4);

​

  //legs

  stroke(critterColor);

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

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

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

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

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

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

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

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

​

  //feet

  noStroke();

  fill(critterColor)

  ellipse(endOfRing.x, endOfRing.y, feetWidth, feetHeight);

  ellipse(endOfPinky.x, endOfPinky.y, feetWidth, feetHeight);

  ellipse(endOfIndex.x, endOfIndex.y, feetWidth, feetHeight);

  ellipse(endOfMiddle.x, endOfMiddle.y, feetWidth, feetHeight);

}

​

function drawDebugPoints(landmarks) {

  var nHands = landmarks.length;

  fill("black");

  noStroke();

  for (var h = 0; h < nHands; h++) {

    for (var i = 0; i <= 20; i++) {

      var px = landmarks[h][i].x;

      var py = landmarks[h][i].y;

​

      px = map(px, 0, 1, width, 0);

      py = map(py, 0, 1, 0, height);

      text(i, px + 5, py);

      circle(px, py, 10);

    }

  }

}

​

//YOU DONT NEED TO KNOW HOW THIS WORKS

function rescaleHand(hand) {

  //here we change the values of each 

  //of the objects in the array

  //to be from 0 to width or height instead of 0 to 1

  //you can mostly ignore how this works, but know

  //that it remaps the values of the hand points to 

  //fit better within the p5 canvas

​

  //the Array.map function IS NOT THE SAME AS THE p5 map function

  return hand.map(

    function(point) {

      return {

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

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

      }

    });

}