let positions = [];

let w = 640, h = 480;

let hat;

let hatMode = false;

​

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();

​

  tracker = new clm.tracker();

  tracker.init();

  tracker.start(capture.elt);

}

​

function draw() {

  background(255);

  imageMode(CORNER);

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

  // Avoid blinking out when face isn't detected

  // by keeping track of previous position

  if (tracker.getScore() > 0.5) {

    positions = tracker.getCurrentPosition();

  }

​

  if (positions.length > 0) {

    let tilt = getAngle(positions[27][0], positions[27][1],

                        positions[32][0], positions[32][1]);

    let centerx = positions[60][0];

    let centery = positions[60][1];

    let facew = getDist(positions[1][0], positions[1][1],

                        positions[13][0], positions[13][1]) * 1.5;

    // Head

    push();

    translate(centerx, centery);

    rotate(tilt);

    stroke(68,85,12);

    strokeWeight(facew / 10);

    fill(174,210,53); 

    beginShape();

    curveTightness(-0.5);

    curveVertex(0, facew * -0.9);

    curveVertex(facew / 2, 0);

    curveVertex(0, facew / 2);

    curveVertex(facew / -2, 0);

    curveVertex(0, facew * -0.9);

    curveVertex(facew / 2, 0);

    curveVertex(0, facew / 2);

    endShape();

    pop();

    // Eyes

    noStroke();

    let lw = getDist(positions[28][0], positions[28][1],

                     positions[30][0], positions[30][1]) * 2;

    let lh = getDist(positions[31][0], positions[31][1],

                     positions[29][0], positions[29][1]) * 3;

    let rw = getDist(positions[25][0], positions[25][1],

                     positions[23][0], positions[23][1]) * 2;

    let rh = getDist(positions[26][0], positions[26][1],

                     positions[24][0], positions[24][1]) * 3;

    push()

    translate(positions[32][0], positions[32][1]);

    rotate(tilt);

    fill(255);

    ellipse(0, 0, lw, lh);

    fill(0);

    ellipse(0, 0, lh/2, lh/2);

    pop();

    push()

    translate(positions[27][0], positions[27][1]);

    rotate(tilt);

    fill(255);

    ellipse(0, 0, rw, rh);

    fill(0);

    ellipse(0, 0, rh/2, rh/2);

    pop();

​

    // Eyebrows

    push();

    stroke(0);

    strokeWeight(facew / 15);

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

    pop();

    // Mouth

    push()

    translate(centerx, centery);

    rotate(tilt);

    noStroke();

    strokeWeight(2);

    fill(114,83,12);

    let mouthw = getDist(positions[44][0], positions[44][1],

                         positions[50][0], positions[50][1]) * 2;

    let mouthh = getDist(positions[60][0], positions[60][1],

                         positions[57][0], positions[57][1]) * 3;

    ellipse(0, 0, mouthw, mouthh);

​

    pop();

​

    // Hat (push space to activate)

    if (hatMode) {

      push()

      translate(centerx, centery);

      rotate(tilt);

      var forehead = positions[33];

​

      var hatWidth = facew;

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

      imageMode(CENTER);

      image(hat, 0, 0 - (facew * 0.75), hatWidth, hatHeight);

      pop();

    }

  }

}

​

function getAngle(x1, y1, x2, y2) {

​

  // angle in radians

  return Math.atan2(y2 - y1, x2 - x1);

​

  // angle in degrees

  // return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;

}

​

function getDist(x1, y1, x2, y2) {

  return Math.sqrt( Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2) );

}

​

function keyPressed() {

  if (keyCode === 32) {

    hatMode = !hatMode;

  }

}