// https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/facemesh

// https://youtu.be/R5UZsIwPbJA

let video;

let faceMesh;

let faces = [];

let triangles;

let uvCoords;

​

let imgs = [];

let maskID = 0;

​

function preload() {

  // Initialize FaceMesh model with a maximum of one face

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

​

  // Load the texture image that will be mapped onto the face mesh

  imgs[0] = loadImage("assets/mask2.jpg");

  imgs[1] = loadImage("assets/mask3.jpg");

  imgs[2] = loadImage("assets/mask4.jpg");

  imgs[3] = loadImage("assets/mask5.jpg");

  imgs[4] = loadImage("assets/mask6.jpg");

}

​

function mousePressed() {

  // Log detected face data to the console

  console.log(faces);

}

​

function gotFaces(results) {

  faces = results;

}

​

function setup() {

  createCanvas(640, 480, WEBGL);

  video = createCapture(VIDEO);

  video.hide();

​

  // Start detecting faces

  faceMesh.detectStart(video, gotFaces);

​

  // Retrieve face mesh triangles and UV coordinates

  triangles = faceMesh.getTriangles();

  uvCoords = faceMesh.getUVCoords();

​

  // Set the mask ID

  maskID = 4;

}

​

function draw() {

  // Center the 3D space to align with the canvas

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

  background(0);

​

  // Display the video feed

  image(video, 0, 0);

​

  if (faces.length > 0) {

    for (var j = 0; j < faces.length; j++) {

      let face = faces[j];

      maskID = j;

      // Apply texture mapping to the detected face mesh

      texture(imgs[maskID]);

      textureMode(NORMAL);

      noStroke();

      beginShape(TRIANGLES);

​

      // Loop through each triangle in the face mesh

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

        let tri = triangles[i];

​

        // Get the indices of the three points that form a triangle

        let [a, b, c] = tri;

​

        // Retrieve the corresponding 2D face keypoints

        let pointA = face.keypoints[a];

        let pointB = face.keypoints[b];

        let pointC = face.keypoints[c];

​

        // Retrieve the corresponding UV coordinates for texture mapping

        let uvA = uvCoords[a];

        let uvB = uvCoords[b];

        let uvC = uvCoords[c];

​

        // Define the triangle with both position (x, y) and UV texture coordinates

        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();

    }

  }

}

​