Face API ML5

let faceapi;

let video;

let detections;

​

// by default all options are set to true

const detection_options = {

  withLandmarks: true,

  withDescriptors: false,

}

​

​

function setup() {

  createCanvas(360, 270);

​

  // load up your video

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide(); // Hide the video element, and just show the canvas

  faceapi = ml5.faceApi(video, detection_options, modelReady)

​

  textAlign(RIGHT);

}

​

function modelReady() {

  console.log('ready!')

  console.log(faceapi)

  faceapi.detect(gotResults)

​

}

​

function gotResults(err, result) {

  if (err) {

    console.log(err)

    return

  }

  // console.log(result)

  detections = result;

​

  background(255);

  if (detections) {

    if (detections.length > 0) {

      // console.log(detections)

      // You need to draw your mask inside the drawBox function. 

      // After you are done with your mask code. 

      // Paste your mask code inside the drawBox function on line 58

      drawBox(detections)

​

      // Comment out/disable the following line to get rid of ml5 eye and nose shapes on the mask.

      drawLandmarks(detections)

    }

​

  }

  faceapi.detect(gotResults)

}

​

function drawBox(detections) {

  // If you paste your mask function inside the for loop

  // You can detect multiple faces and display your mask on anybody in front of the camera.

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

    const alignedRect = detections[0].alignedRect;

    const x = alignedRect._box._x

    const y = alignedRect._box._y

    const boxWidth = alignedRect._box._width

    const boxHeight = alignedRect._box._height

​

    noFill();

    stroke(161, 95, 251);

    strokeWeight(2);

    rect(x, y, boxWidth, boxHeight);

  }

  // If you paste your mask code outside of the for loop

  // You can only display single mask independent of how many faces in front of the camera.

​

}

​

function drawLandmarks(detections) {

  noFill();

  stroke(161, 95, 251)

  strokeWeight(2)

​

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

    const mouth = detections[i].parts.mouth;

    const nose = detections[i].parts.nose;

    const leftEye = detections[i].parts.leftEye;

    const rightEye = detections[i].parts.rightEye;

    const rightEyeBrow = detections[i].parts.rightEyeBrow;

    const leftEyeBrow = detections[i].parts.leftEyeBrow;

​

    drawPart(mouth, true);

    drawPart(nose, false);

    drawPart(leftEye, true);

    drawPart(leftEyeBrow, false);

    drawPart(rightEye, true);

    drawPart(rightEyeBrow, false);

​

  }

​

}

​

function drawPart(feature, closed) {

​

  beginShape();

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

    const x = feature[i]._x

    const y = feature[i]._y

    vertex(x, y)

  }

​

  if (closed === true) {

    endShape(CLOSE);

  } else {

    endShape();

  }

​

}