ml5-faceMesh-2024

// Requires: https://unpkg.com/ml5@1/dist/ml5.js

​

let facemesh;

let video;

let faces = [];

let options = { maxFaces: 1, refineLandmarks: false, flipHorizontal: true };

const MAIN_FACE_POINTS = [33,133,362,263,4,78,308];

​

function preload() {

  // Load the faceMesh model

  facemesh = ml5.faceMesh(options);

}

​

function setup() {

  createCanvas(640, 480);

  // Create the webcam video and hide it

  video = createCapture(VIDEO);

  //video.size(width, height);

  video.hide();

  // Start detecting faces from the webcam video

  facemesh.detectStart(video, gotFaces);

}

​

function draw() {

  // Draw the webcam video

  push();

  if (options.flipHorizontal){

    translate(width,0); 

    scale(-1,1);

  }

  let transparency = 255; // reduce this to make video transparent

  tint(255,255,255,transparency); 

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

  pop();

​

  // Draw all the tracked face points

  noStroke();

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

    let face = faces[i];

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

      let keypoint = face.keypoints[j];

      fill('lime');

      circle(keypoint.x, keypoint.y, 5);

    }

    // Highlight some special ones

    for (let i=0; i<7; i++){

      let j = MAIN_FACE_POINTS[i];

      let keypoint = face.keypoints[j];

      fill('red');

      circle(keypoint.x, keypoint.y,10);

    }

  }

}

​

// Callback function for when facemesh outputs data

function gotFaces(results) {

  // Save the output to the faces variable

  faces = results;

  //console.log(faces);

}

​