let faceMesh;

let faces = [];

let mouthX, mouthY, mouthW;

let mouthClosed = false;

​

let movers = [];

let attractors = [];

let mode = "OFF";

​

function mouseClicked() {

  if (mouseX > width - 50 && mouseY < 50) {

    // Change mode

    if (mode == "OFF") {

      mode = "FLIES";

    } else if (mode == "FLIES") {

      mode = "SAND";

    } else {

      mode = "OFF";

    }

  }

}

​

function preload() {

  faceMesh = ml5.faceMesh({ maxFaces: 1, flipped: true });

}

​

function gotFaces(results) {

  // console.log(results);

  faces = results;

}

​

​

​

function setup() {

  createCanvas(800, 450); //1020, 575

​

  var constraints = {

    audio: false,

    video: {

      mandatory: {

        minWidth: 800,

        minHeight: 450

      }

    }

  };

​

  video = createCapture(constraints, { flipped: true });

​

  video.hide();

​

  faceMesh.detectStart(video, gotFaces);

}

​

​

function draw() {

  background(0);

  image(video, 0, 0);

​

  if (faces.length > 0) {

    let face = faces[0];

    let keypoints = face.keypoints;

    let mouthTop = keypoints[13];

    let mouthBottom = keypoints[14];

​

      // mesh dots

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

   fill(255);

   noStroke();

   ellipse(keypoints[i].x, keypoints[i].y, 2, 2);

  }    

  }

​

  if (mode == "FLIES") {  

  }

​

}

​