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(36, 74, 74);

  drawForest();

  drawHand();

  drawMist()

}

​

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, "black");

      }

​

      if (showPoints) {

        drawDebugPoints(landmarks);

      }

​

    }

  }

}

​

function drawForest() {

​

​

  stroke(128, 140, 140)

  for (var i = 0; i < width; i = i + 1) {

    var x = i;

    var y = height * noise(x / 500);

    line(x, 0, x, y);

  }

  //tree

  stroke(0);

  strokeWeight(10);

  line(-30, 480, 70, 200);

  strokeWeight(7);

  line(70, 200, 130, 150);

  line(40, 300, 150, 250);

  line(90, 180, 90, 160);

  line(50, 250, 30, 150);

​

  fill(51, 63, 64);

  noStroke();

  beginShape();

  vertex(-30, 480);

  vertex(50, 450);

  vertex(75, 410);

  vertex(150, 390);

  vertex(400, 380);

  vertex(450, 360);

  vertex(550, 350);

  vertex(700, 480);

  endShape();

​

}

​

function drawMist() {

  stroke(255, 255, 255, 5)

  for (var layer = 0; layer < 10; layer++) {

    for (var j = 0; j < width; j = j + 1) {

      var mistx = j;

      var mistSpeed = 30000 + 10000 * layer;

      var misty = height * noise(layer + mistx / 1450.0 + millis() / mistSpeed);

      line(mistx, height, mistx, misty);

    }

  }

}

​

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

  var superbaseOfThumb = hand[1];

​

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

  quad(baseOfPinky.x, handBase.y, superbaseOfThumb.x, handBase.y, baseOfIndex.x, baseOfPinky.y, baseOfPinky.x, baseOfPinky.y);

  stroke(0,0,0);

  strokeWeight(20);

  line(baseOfPinky.x, handBase.y,baseOfPinky.x, 480 );

  line(superbaseOfThumb.x, handBase.y, superbaseOfThumb.x, 480);

  //hind legs

  line(baseOfPinky.x+45, handBase.y,baseOfPinky.x+75, 480 );

  line(superbaseOfThumb.x+45, handBase.y, superbaseOfThumb.x+75, 480);

  noStroke();

  rectMode(CENTER);

  fill(0,0,0);

  rect(handBase.x, handBase.y, 130, 100, 34, 34, 34, 34)

​

​

  //eyeball

​

  fill("white");

  noStroke();

​

  circle(baseOfMiddle.x + headHeight / 10,

    baseOfMiddle.y + 30,

    headHeight / 5);

  circle(baseOfMiddle.x - headHeight / 2,

    baseOfMiddle.y + 30,

    headHeight / 5);

​

​

​

  //antlers

  stroke(critterColor);

  strokeWeight(10);

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

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

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

  line(endOfIndex.x - 30, endOfIndex.y, endOfIndex.x - 80, endOfIndex.y - 30);

  line(baseOfIndex.x, baseOfPinky.y, jointOfIndex.x + 40, jointOfIndex.y);

​

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

​

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

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

  line(endOfPinky.x + 30, endOfPinky.y, endOfPinky.x + 80, endOfPinky.y - 30);

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

}

​

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)

      }

    });

}