let ctracker;

let facePoints = [];

​

function setup() {

  createCanvas(640, 480);

  capture = createCapture(VIDEO);

  capture.size(640, 480);

  capture.hide();

​

  ctracker = new clm.tracker();

  ctracker.init();

  ctracker.start(capture.elt);

}

​

function draw() {

  background(0);

  image(capture, 0, 0, width, height);

​

  facePoints = ctracker.getCurrentPosition();

​

  if (facePoints) {

    drawFacePoints();

    drawFaceMesh();

    drawEmojiEyes();

  }

}

​

function drawFacePoints() {

  stroke(255, 0, 0);

  strokeWeight(4);

  for (let i = 0; i < facePoints.length; i++) {

    point(facePoints[i][0], facePoints[i][1]);

  }

}

​

function drawFaceMesh() {

  noFill();

  stroke(0, 255, 0);

  strokeWeight(1);

  beginShape();

  for (let i = 0; i < facePoints.length; i++) {

    vertex(facePoints[i][0], facePoints[i][1]);

  }

  endShape(CLOSE);

}

​

function drawEmojiEyes() {

  if (facePoints.length > 0) {

    let leftEye = facePoints[32];

    let rightEye = facePoints[27];

    let eyeSize = dist(facePoints[23][0], facePoints[23][1], facePoints[25][0], facePoints[25][1]);

    // Draw white of the eyes

    fill(255);

    noStroke();

    ellipse(leftEye[0], leftEye[1], eyeSize, eyeSize);

    ellipse(rightEye[0], rightEye[1], eyeSize, eyeSize);

    // Draw pupils that follow the mouse

    fill(0);

    let angle = atan2(mouseY - leftEye[1], mouseX - leftEye[0]);

    let eyeX = leftEye[0] + cos(angle) * eyeSize * 0.2;

    let eyeY = leftEye[1] + sin(angle) * eyeSize * 0.2;

    ellipse(eyeX, eyeY, eyeSize * 0.4);

    angle = atan2(mouseY - rightEye[1], mouseX - rightEye[0]);

    eyeX = rightEye[0] + cos(angle) * eyeSize * 0.2;

    eyeY = rightEye[1] + sin(angle) * eyeSize * 0.2;

    ellipse(eyeX, eyeY, eyeSize * 0.4);

  }

}