let faceMesh;

let faces = [];

let triangles;

let uvCoords;

let img;

​

function preload() {

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

  img = loadImage("picard.jpg");

}

​

function mousePressed() {

  console.log(faces);

}

​

function gotFaces(results) {

  faces = results;

}

​

function setup() {

  createCanvas(640, 640, WEBGL);

  faceMesh.detectStart(img, gotFaces);

  triangles = faceMesh.getTriangles();

  console.log(triangles);

​

  uvCoords = faceMesh.getUVCoords();

  console.log(uvCoords);

  textureMode(NORMAL);

}

​

function draw() {

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

  background(0);

  if (faces.length > 0) {

    let face = faces[0];

​

    texture(img);

    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 = uvCoords[a];

      let uvB = uvCoords[b];

      let uvC = uvCoords[c];

​

      vertex(uvA[0]*640, uvA[1]*640, pointA.x/640, pointA.y/640);

      vertex(uvB[0]*640, uvB[1]*640, pointB.x/640, pointB.y/640);

      vertex(uvC[0]*640, uvC[1]*640, pointC.x/640, pointC.y/640);

​

    }

    endShape();

  }

}

​