// https://github.com/kylemcdonald/AppropriatingNewTechnologies/wiki/Week-2

​

var capture;

var tracker

var w = 640,

  h = 480;

var hat;

​

function preload() {

  hat = loadImage('hat.png');

}

​

function setup() {

  capture = createCapture({

    audio: false,

    video: {

      width: w,

      height: h

    }

  }, function() {

    console.log('capture ready.')

  });

  capture.elt.setAttribute('playsinline', '');

  createCanvas(w, h);

  capture.size(w, h);

  capture.hide();

​

  colorMode(HSB);

​

  tracker = new clm.tracker();

  tracker.init();

  tracker.start(capture.elt);

}

​

function draw() {

  background("gray");

  imageMode(CORNER);

  //image(capture, 0, 0, w, h);

  var positions = tracker.getCurrentPosition();

​

  if (positions.length > 0) {

    // Eyes

    noStroke();

    fill(0, 0, 255);

    var lw = positions[28][0] - positions[30][0];

    var lh = positions[31][1] - positions[29][1];

    var rw = positions[25][0] - positions[23][0];

    var rh = positions[26][1] - positions[24][1];

    ellipse(positions[32][0], positions[32][1], lw, lh);

    ellipse(positions[27][0], positions[27][1], rw, rh);

    fill(0, 0, 0);

    ellipse(positions[32][0], positions[32][1], lh/2, lh/2);

    ellipse(positions[27][0], positions[27][1], rh/2, rh/2);

​

    // Eyebrows

    stroke(0);

    strokeWeight(10);

    line(positions[19][0], positions[19][1], positions[22][0], positions[22][1]);

    line(positions[18][0], positions[18][1], positions[15][0], positions[15][1]);

    // Nose

    noStroke();

    fill(0, 255, 255);

    triangle(positions[41][0], positions[41][1], positions[35][0], positions[35][1], positions[39][0], positions[39][1]);

    // Mouth

    stroke(0);

    strokeWeight(2);

    fill(127, 255, 255);

    beginShape()

    vertex(positions[44][0], positions[44][1]);

    vertex(positions[61][0], positions[61][1]);

    vertex(positions[60][0], positions[60][1]);

    vertex(positions[59][0], positions[59][1]);

    vertex(positions[50][0], positions[50][1]);

    vertex(positions[58][0], positions[58][1]);

    vertex(positions[57][0], positions[57][1]);

    vertex(positions[56][0], positions[56][1]);

    endShape(CLOSE);

    // Hat

    var forehead = positions[33];

    var left = positions[0];

    var right = positions[14];

    var hatWidth = right[0] - left[0] + 50;

    var hatHeight = hat.height / hat.width * hatWidth;

    imageMode(CENTER);

    image(hat, forehead[0], forehead[1] - 100, hatWidth, hatHeight);

  }

}