Simple Face Mask with Facemesh

​

This example uses Facemesh to analyse a face via the webcam and creates a simple face mask.

It uses the x and y coordinates to position the mask and the z coordinate to give each point a lighter or darker color according to their position. This results in a very simple face mask with a depth effect.

​

Built with Facemesh model from ml5js and p5js

​

Created by Tom-Lucas Säger 2021

​

*/

​

let video;

let predictions = [];

​

//Setup the canvas and initiate the webcam and Facemesh

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  const facemesh = ml5.facemesh(video, modelReady);

  facemesh.on('predict', gotResults);

  video.hide();

  //We use the HSB (Hue, Saturation, Brightness) color mode to control the brightness more precisely which will get useful later in the code 

  colorMode(HSB);

  noStroke();

}

​

//Draw the webcam video and the Keypoints (once they're ready) on the canvas

function draw() {

  background(220);

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

  drawKeypoints();

}

​

function modelReady() {

  console.log('model ready')

}

​

//If results are found, write them in our variable predictions

function gotResults(results) {

  predictions = results;

}

​

//Once the results are in, we draw the keypoints, therefore we first check if the variable predictions is not empty

function drawKeypoints() {

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

    const keypoints = predictions[i].scaledMesh;

​

    //Now we can really draw the keypoints by looping trough the array  

    for (let j = 0; j < keypoints.length; j += 1) {

      const [x, y, z] = keypoints[j];

​

      //We set  the colorMode to HSB in the beginning this will help us now. We can use fixed values for hue and saturation. Then we convert the values from the z axis, they range from about -70 to 70, to range from 100 to 0, so we can use them as third argument for the brightness. 

      fill(200, 100, map(z, -70, 70, 100, 0));

      //Finally we draw the ellipse at the x/y coordinates which Facemesh provides to us 

      ellipse(x, y, 10);

    }

  }

}