let faceMesh;

let faces = [];

​

// Thank you Jack B. Du for these lists!

// Define the exterior lip landmark indices for drawing the outer lip contour

const lipsExterior = [267, 269, 270, 409, 291, 375, 321, 405, 314, 17, 84, 181, 91, 146, 61, 185, 40, 39, 37, 0];

​

// Define the interior lip landmark indices for drawing the inner lip contour

const lipsInterior = [13, 312, 311, 310, 415, 308, 324, 318, 402, 317, 14, 87, 178, 88, 95, 78, 191, 80, 81, 82];

​

​

function preload() {

  // Load the face mesh model with specified options

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

  faceMesh = ml5.faceMesh(options);

}

​

function mousePressed() {

  // Log detected face data to the console for debugging

  console.log(faces);

}

​

function gotFace(results) {

  // Update the global faces array with detected faces

  faces = results;

}

​

function setup() {

  createCanvas(640, 480);

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

  video.hide();

​

  // Start face mesh detection on the video and handle results with gotFace function

  faceMesh.detectStart(video, gotFace);

​

  // Reverse the lipsInterior array to ensure correct drawing order for the inner contour

  lipsInterior.reverse();

}

​

function draw() {

  image(video, 0, 0);

​

  // Check if any face has been detected

  if (faces.length > 0) {

    // Get the first detected face data

    let face = faces[0];

    stroke(0, 255, 255);

    fill(255, 0, 255);

​

    // Begin drawing the outer lip contour

    beginShape();

    for (let i of lipsExterior) {

      let p = face.keypoints[i];

      vertex(p.x, p.y);

    }

​

    // Begin drawing the inner lip contour to create a hole in the shape

    beginContour();

    for (let i of lipsInterior) {

      let p = face.keypoints[i];

      vertex(p.x, p.y);

    }

    endContour();

    endShape(CLOSE);

  }

}

​