let video;

let detections;

let mouthDist;

​

// by default all options are set to true

const detection_options = {

  withLandmarks: true,

  withDescriptors: false,

}

​

​

function setup() {

  createCanvas(1280, 960);

​

  // 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(CENTER);

}

​

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

    // filter(GRAY);

  let mouthText = map(mouthDist, 0, 16, 20, 60);

  textSize(mouthText);

  text("HEADLINE", width/2, height/2);

  if (detections) {

    if (detections.length > 0) {

      // console.log(detections)

      drawBox(detections)

      drawLandmarks(detections)

    }

​

  }

  faceapi.detect(gotResults)

}

​

function drawBox(detections) {

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

    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(255, 255, 251)

    strokeWeight(0.6)

    // rect(x, y, boxWidth, boxHeight);

  }

}

​

​

function drawLandmarks(detections) {

  // noFill();

  // stroke(255, 255, 251)

  fill(0, 255, 0);

  strokeWeight(0.6)

​

​

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

​

​

    const mouthTop = createVector(mouth[14]._x, mouth[14]._y);

    const mouthBottom = createVector(mouth[18]._x, mouth[18]._y);

​

    mouthDist = mouthTop.sub(mouthBottom).mag();

    //number between 0 and 15

    console.log(mouthDist);

    // console.log(mout/hBottom);

    // print(mouth[14]._y);

    // console.log(mouth[18]);

  }

​

}

​

​

function drawPart(feature, closed) {

​

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

  //   const x = feature[i]._x

  //   const y = feature[i]._y

  //   noFill(0);

  //   Stroke(255);

  //   // text(i, x, y);

  //   // circle(x, y, 3);

  // }

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

    }

​

}

function keyTyped() {

  if (key === "s") {

    saveFrames("Mouth Poster", "png", 1, 1);

​

  }

}