// https://thecodingtrain.com/

​

// ml5.js

// https://ml5js.org/

​

// Happy Halloween!

​

let video;

let faceMesh;

let faces = [];

let triangles;

let uvCoords;

let img;

​

function preload() {

  // Load the face mesh model and the zombie image

  // <----- Check this sketch's files for mesh_map.jpg guide to draw your own mask!

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

  img = loadImage("picard-mask.png");

}

​

function mousePressed() {

  // Log the detected faces to the console

  console.log(faces);

}

​

function gotFaces(results) {

  // Update the faces array with the detected faces

  faces = results;

}

​

function setup() {

  createCanvas(800, 450, WEBGL);

  // Capture video from webcam, flipped horizontally

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

  video.hide();

​

  // Start detecting faces from the video

  faceMesh.detectStart(video, gotFaces);

​

  // Get the face mesh triangles and UV coordinates

  triangles = faceMesh.getTriangles();

  uvCoords = faceMesh.getUVCoords();

}

​

function draw() {

  // Set origin to top-left corner and clear background

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

  background(0);

​

  // Display the webcam video

  image(video, 0, 0);

​

  // If a face is detected, draw the textured face mesh

  if (faces.length > 0) {

    let face = faces[0];

​

    // Apply the texture from the zombie image

    texture(img);

    textureMode(NORMAL);

    noStroke();

    beginShape(TRIANGLES);

​

    // Draw each triangle of the face mesh with UV mapping

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

  }

}

​