FaceApi_Mask_Trackingrk

let faceapi;

let video;

let detections;

​

let color_black;

let color_brown;

let color_yellow;

let color_red;

let color_white;

​

// by default all options are set to true

const detectionOptions = {

  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, detectionOptions, modelReady);

  textAlign(RIGHT);

  color_black = color(0, 0, 0);

  color_brown = color(109, 84, 64);

  color_yellow = color(255, 239, 0);

  color_red = color(113, 47, 37);

  color_white = color(255, 255, 255);

  video.hide();

}

​

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

  background(255);

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

  if (detections) {

    if (detections.length > 0) {

      // console.log(detections)

      drawBox(detections);

      //drawLandmarks(detections);

    }

  }

  faceapi.detect(gotResults);

}

​

function myExtraOrdinaryMask() {

  noStroke();

  fill(color_red);

  rect(0, 167, 425, 275); // bigger rect on bottom

​

  let xMove = 425 - 333;

  xMove = xMove / 2;

  rect(xMove, 0, 333, 167); // smaller rect on top

​

​

  // Eyes

  fill(color_black);

  stroke(color_yellow);

  strokeWeight(10);

  let eyeRad = 80;

  let eyeX = 120;

  let eyeY = 80;

  circle(eyeX, eyeY, eyeRad); // Left eye

  let eye2X = 305;

  circle(eye2X, eyeY, eyeRad); // Right eye

​

  // Nose

  fill(color_red);

  stroke(color_yellow);

  strokeWeight(10);

  let noseX = 213;

  let noseY = eyeY + 50;

  let noseRad = eyeRad;

  circle(noseX, noseY, eyeRad); // draw circle

​

  // First tooth pair

  fill(color_white);

  noStroke();

  let toothDistance = 67;

  let toothW = 60;

  let xTooth = xMove + 30;

​

  // All teeth

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

    push();

    translate(toothDistance*i, 0);

    ellipse(xTooth, 250, toothW, 95);

    rect(xMove, 250, toothW, 60);

​

    // Vertical Symmetry of the tooth

    ellipse(xTooth, 370, toothW, 95);

    rect(xMove, 314, toothW, 60);

    pop();

  }

}

​

function drawBox(detections) {

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

    const alignedRect = detections[i].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);

    push();

    translate(x - 20, y - 20);

    scale(0.2, 0.2);

    myExtraOrdinaryMask();

    pop();

  }

}

​

function drawLandmarks(detections) {

  noFill();

  stroke(161, 95, 251);

  strokeWeight(2);

​

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

    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 += 1) {

    const x = feature[i]._x;

    const y = feature[i]._y;

    vertex(x, y);

  }

​

  if (closed === true) {

    endShape(CLOSE);

  } else {

    endShape();

  }

}