let video;

let faces = [];

let triangles;

let uvCoords;

let options = { flipped: false };

​

function preload() {

  // Load the faceMesh model

  faceMesh = ml5.faceMesh(options);

}

​

function setup() {

  createCanvas(640, 480, WEBGL);

  // Create the webcam video and hide it

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  // Start detecting faces from the webcam video

  faceMesh.detectStart(video, gotFaces);

  triangles = faceMesh.getTriangles();

  uvCoords = faceMesh.getUVCoords();

  // console.log(triangles);

}

​

function draw() {

  background(0);

  // Draw the webcam video

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

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

  // Draw all the tracked face points

  if (faces.length > 0) {

    let face = faces[0];

    texture(video);

    noStroke();

    beginShape(TRIANGLES);

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

      let tri = triangles[i];

      let [a, b, c] = tri;

      let pointA = face.keypoints[a];

      let pointB = face.keypoints[b];

      let pointC = face.keypoints[c];

      let UVa = face.keypoints[a];

      let UVb = face.keypoints[b];

      let UVc = face.keypoints[c];

      vertex(pointA.x, pointA.y, UVa[0], UVa[1]);

      vertex(pointB.x, pointB.y, UVb[0], UVb[1]);

      vertex(pointC.x, pointC.y, UVc[0], UVc[1]);

    }

    endShape();

  }

}

​

// Callback function for when faceMesh outputs data

function gotFaces(results) {

  // Save the output to the faces variable

  faces = results;

}

​