//

// We're using a specific version of handsfree.js

// that has the (commercial, trial) BRFv4 tracker baked in:

// https://unpkg.com/handsfree@4.0.3/dist/handsfree.js

// more information about the BRFv4 tracker is at: 

// https://github.com/Tastenkunst/brfv4_javascript_examples

​

var myHandsfree;

​

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

function setup() {

  createCanvas(640, 480, WEBGL);

​

  var myConfig = {

    hideCursor: true

  };

  myHandsfree = new Handsfree(myConfig);

  myHandsfree.start();

}

​

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

function draw() {

  background(0, 0, 0);

​

  if (myHandsfree.isTracking) {

    if (myHandsfree.pose.length > 0) {

​

      var face0 = myHandsfree.pose[0].face;

      var nPoints = face0.vertices.length;

      var noseIndex = 30;

      var cx = face0.vertices[noseIndex*2 + 0];

      var cy = face0.vertices[noseIndex*2 + 1];

      push();

      translate(-width/2, -height/2); 

      for (var i = 0; i < nPoints; i += 2) {

        var x = face0.vertices[i + 0];

        var y = face0.vertices[i + 1];

        fill(255, 0, 0);

        ellipse(x, y, 9, 9);

      }

      fill(255,255,0); 

      ellipse(cx, cy, 9, 9);

      pop();

      // Rotations of the head, in radians

      var rx = face0.rotationX; // pitch

      var ry = face0.rotationY; // yaw

      var rz = face0.rotationZ; // roll

      // Box dimensions

      var bw = 200; 

      var bh = 250; 

      var bd = 200; 

      push();

      noFill(); 

      stroke(255);

      translate(cx - width/2, cy-height/2); 

      rotateY(0 - ry);

      rotateX(0 - rx);

      rotateZ(rz);

      box(bw, bh, bd);

      pop();

    }

  }

}