let model;

let faces = [];

​

function setup() {

  createCanvas(640, 480, WEBGL);

  video = createCapture(VIDEO);

  video.hide();

​

  // Load the model

  facemesh.load().then(function(_model) {

    model = _model;

  });

}

​

// Detect faces using the video

function detect() {

  model.estimateFaces(video.elt).then(function(_faces) {

    faces = _faces;

  });

}

​

function draw() {

  background(0);

  // Detect faces assuming the model has loaded

  if (model) detect();

​

  // Move everything to the top-left corner

  // WEBGL draws 0,0,0 in the center of the screen

  push();

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

  // Make sure video is behind all the face points

  push();

  translate(0, 0, -35);

  //image(video, 0, 0);

  pop();

​

  // Iterate through the faces

  let center = { x : 0, y : 0 };

  for (let face of faces) {

    //console.log(face.annotations);

    let top = face.annotations.rightEyeUpper0;

    let bottom = face.annotations.rightEyeLower0;

    let positions = top.concat(bottom);

​

    strokeWeight(10);

    stroke('white');

    for (let pos of positions) {

      center.x += pos[0];

      center.y += pos[1];

      push();

      // Flip the z-coordinate

      translate(pos[0], pos[1], -pos[2]);

      point(0, 0, 0);

      pop();

    }

    center.x /= positions.length;

    center.y /= positions.length;

  }

  image(video, 0, center.y-5, width, 10, 0, center.y-5, width, 10);

  pop();

​

}