let faceMesh;

let faces = [];

let canvas;

//let outline = [10, 338, 297, 332, 284, 251, 389, 356, 454, 323, 361, 288, 397, 365, 379, 378, 400, 377, 152, 148, 176, 149, 150, 136, 172, 58, 132, 93, 234, 127, 162, 21, 54, 103, 67, 109, 10];

​

let outline = [8, 285, 295, 282, 283, 276, 353, 265, 345, 352, 376, 416, 434, 430, 431, 262, 428, 199, 208, 32, 211, 210, 214, 192, 147, 123, 116, 35, 124, 46, 53, 52,  65, 55, 8];

​

​

let balls = [];

​

function preload() {

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

}

​

function gotFaces(results) {

  faces = results;

}

​

function setup() {

  canvas = createCanvas(800, 450);

  angleMode(DEGREES);

  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 faceBox = face.box;

    // mesh dots

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

​

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

      fill(255);

      noStroke();

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

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

​

    }    

​

  }

}

​

​