// context: https://rtp.media.mit.edu/

​

// Click on the pic to toggle between the original and processed picture

let show_original = true;

​

let faceapi;

let img;

let detections;

​

let leftEyePt;

let rightEyePt;

let eyesCenter;

let mouthCenter;

​

// by default all options are set to true

const detection_options = {

  withLandmarks: true,

  withDescriptors: false,

}

​

function preload() {

​

  let trump = 1;

​

  switch(trump) {

    case 1:

      img = loadImage('https://cdn1.i-scmp.com/sites/default/files/styles/768x768/public/images/methode/2018/05/05/a6622596-4fbb-11e8-9150-83bd875cc143_1280x720_114255.jpg');    

      break;

    case 2:

      img = loadImage('https://cdn1.i-scmp.com/sites/default/files/styles/768x768/public/images/methode/2018/07/22/d740d05c-8d5c-11e8-8608-b7163509a377_1280x720_112141.JPG');    

      break;

    default:

      img = loadImage('https://cdn.i-scmp.com/sites/default/files/styles/768x768/public/d8/images/methode/2020/02/09/6392b082-4b04-11ea-befc-ef9687daaa85_image_hires_142454.JPG');    

  }

}

​

function mouseClicked() {

  show_original = !show_original;

}

​

////////////////////////////////////////////////////////////////////////

​

function setup() {

  createCanvas(300, 300);

  img.resize(width, height);

​

  faceapi = ml5.faceApi(detection_options, modelReady);

  console.log('Detection in progress...');

​

  leftEyePt = createVector(0, 0);

  rightEyePt = createVector(0, 0);

  eyesCenter = createVector(0, 0);

  mouthCenter = createVector(0, 0);

}

​

​

////////////////////////////////////////////////////////////////////////

// called when faces are found:

​

function gotResults(err, result) {

  if (err) {

    console.log(err);

    return;

  }

  // console.log(result)

  detections = result;

  if (detections) {

    // console.log(detections)

    findEyes(detections); // initialize eyes coordinates

  }

}

​

function draw() {

​

  if (show_original) {

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

  } else {

    if (detections) {

​

      // find how much the face is tilted

      let diff = p5.Vector.sub(rightEyePt, leftEyePt);

      let angle = -diff.heading();

​

      // find zoom factor to focus on the face (30% of the canvas)

      let mouth_to_eyes = p5.Vector.sub(eyesCenter, mouthCenter);

      let zoom_factor = 0.30 * width / mouth_to_eyes.mag();

​

      // find center for after the rotation

      let canvasCenter = createVector(width / 2, height / 2);

      let rotatedCenter = p5.Vector.fromAngle(canvasCenter.heading() - angle,

                                              canvasCenter.mag());

      rotatedCenter.div(zoom_factor);

​

      // Start a transformation (rotation+translation to get the face straight+centered)

      push();

​

        // make eyes horizontal

        rotate(angle);

​

        // zoom a bit

        scale(zoom_factor);

​

        // translate face to center

        translate(p5.Vector.sub(rotatedCenter, eyesCenter));

​

        // display the face

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

​

        // optional: trace a line between the eyes

        stroke(255);

        strokeWeight(3/zoom_factor);

        line(leftEyePt.x, leftEyePt.y,   rightEyePt.x, rightEyePt.y);

        ellipse(mouthCenter.x, mouthCenter.y, 6/zoom_factor);

​

      pop();

    } else {

      background(255);

      textSize(21);

      stroke(0);

      text('DETECTION IN PROGRESS', 12, height / 2);

      text('(it might take a few seconds)', 12, 25 + height / 2);

    }

​

  }

  textSize(20);

  stroke(255);

  rect(0,0, width, 30);

  text('Click to toggle focus on the face.', 6, 20);

}

​

​

////////////////////////////////////////////////////////////////////////

​

function findEyes(detections) {

​

  // find mouth center:

  let counter = 0;

  detections.parts.mouth.forEach(item => {

    mouthCenter.x += item._x;

    mouthCenter.y += item._y;

    counter++;

  });

  mouthCenter.div(counter);

​

  // find left eye center:

  counter = 0;

  detections.parts.leftEye.forEach(item => {

    leftEyePt.x += item._x;

    leftEyePt.y += item._y;

    counter++;

  })

  leftEyePt.div(counter);

​

  // find left eye center:

  counter = 0;

  detections.parts.rightEye.forEach(item => {

    rightEyePt.x += item._x;

    rightEyePt.y += item._y;

    counter++;

  })

  rightEyePt.div(counter);

​

  // find center eyes of both eyes:

  eyesCenter = p5.Vector.add(rightEyePt, leftEyePt);

  eyesCenter.div(2); // get average

}

​

​

////////////////////////////////////////////////////////////////////////

​

function modelReady() {

  console.log('ready! => click on the pic to see the result!')

  faceapi.detectSingle(img, gotResults)

}

​

​

////////////////////////////////////////////////////////////////////////

​

// starting point:

// https://editor.p5js.org/ml5/sketches/FaceApi_Image_Landmarks