​

let facemesh;

let video;

let predictions = [];

let history = [];

let skip = 0;

let mask = 0;

let smile = 1;

const face1 = [

  "silhouette",

  "lipsLowerOuter",

  "rightEyeUpper1",

  "leftEyeUpper1",

];

const face2 = [

  "silhouette",

  "lipsUpperOuter",

  "rightEyeLower1",

  "leftEyeLower1",

];

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  facemesh = ml5.facemesh(video, modelReady);

​

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new predictions are made

  facemesh.on("predict", (results) => {

    predictions = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const a = predictions[i].annotations;

​

    const face = smile ? face1 : face2;

    const c = smile ? color(0, 255, 0) : color(255, 0, 0);

​

    for (let j of face) {

      noFill();

      beginShape();

      for (let k = 0; k < a[j].length; k++) {

        const [x, y] = a[j][k];

​

        stroke(c);

        strokeWeight(3);

        vertex(x, y);

      }

      if (j == "silhouette") {

        endShape(CLOSE);

      } else {

        endShape();

      }

    }

  }

}

​

function getViewAngle() {

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

    const keypoints = predictions[i].scaledMesh;

    const p1 = keypoints[234]; // L

    const p2 = keypoints[454]; // R

    const p6 = keypoints[4]; // C

​

    const d = (p6[0] - p1[0]) / (p2[0] - p1[0]);

    keepHistory(d);

  }

}

​

function keepHistory(h) {

  history.push(h);

  while (history.length > frameRate() / 5) {

    history.shift();

  }

}

​

function checkTriggers() {

  if (skip > 0) {

    skip--;

    return;

  }

  const d = history[history.length - 1] - history[0];

  if (abs(d) > 0.3) {

    // change is significant

    skip = frameRate() / 2;

    mask = !mask;

    smile = d > 0 ? 1 : 0;

  }

}

​

function draw() {

  background(40);

  translate(width, 0); // move to far corner

  scale(-1.0, 1.0); // flip x-axis backwards

  if (mask) {

    drawKeypoints();

  } else {

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

  }

  getViewAngle();

  checkTriggers();

}

​