let faceMesh;

let faces = [];

let vertexArray = [323, 288, 365, 378, 377, 148, 149, 136, 58, 93, 2, 323];

​

function preload() {

  faceMesh = ml5.faceMesh({ maxFaces: 1, flipped: true });

  body = loadImage("body-hair.png");

  backG = loadImage("background.png");

}

​

function gotFaces(results) {

  faces = results;

}

​

function setup() {

  createCanvas(800, 450);

  angleMode(DEGREES);

  var constraints = {

    audio: false,

    video: {

      mandatory: {

        minWidth: 800,

        minHeight: 450

      }

    }

  };

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

  video.hide();

  faceMesh.detectStart(video, gotFaces);

}

​

​

function draw() {

  background(backG);

​

  if (faces.length > 0) {

    let face = faces[0];

    let keypoints = face.keypoints;

​

    let chinBottom = keypoints[152];

    let noseBottom = keypoints[94];

    let faceLeft = keypoints[93];

    let faceRight = keypoints[323];

    let faceWidth = faceRight.x-faceLeft.x;

    let leftChinEye = keypoints[176];

    let rightChinEye = keypoints[400];

    let faceMinX = width;

    let faceMaxX = 0;

    let faceMinY = height;

    let faceMaxY = 0;

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

      if (keypoints[vertexArray[i]].x > faceMaxX) { faceMaxX = keypoints[vertexArray[i]].x; }

      if (keypoints[vertexArray[i]].x < faceMinX) { faceMinX = keypoints[vertexArray[i]].x; }

      if (keypoints[vertexArray[i]].y > faceMaxY) { faceMaxY = keypoints[vertexArray[i]].y; }

      if (keypoints[vertexArray[i]].y < faceMinY) { faceMinY = keypoints[vertexArray[i]].y; }

    }

    let rotateXpos = (faceMinX+faceMaxX)/2;

    let rotateYpos = height -  (faceMinY+faceMaxY)/2;  

​

    //Draw Body

    push();

    let bodyScale = Math.sqrt(Math.pow(faceRight.x-faceLeft.x,2)+Math.pow(faceRight.y-faceLeft.y,2))/132;

    let angle = 0 - Math.atan((faceRight.y-faceLeft.y)/(faceRight.x-faceLeft.x))*360/(PI*2);

​

    translate(rotateXpos, rotateYpos);

    rotate(angle);

    image(body, -(body.width*bodyScale)/2, -(130*bodyScale), body.width*bodyScale, body.height*bodyScale);

    pop();

    push();

    scale(1,-1);

    translate(0, -height);

    beginClip();

    beginShape();

    // Add vertices.

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

      vertex(keypoints[vertexArray[i]].x, keypoints[vertexArray[i]].y);

    }

    // Stop drawing the shape.

    endShape(CLOSE);

    endClip(); 

    //image(video,width, 0, -width);

    image(video, 0, 0, 0)

    pop();

​

    //Draw Cartoon Eyes

    push();

    scale(1,-1);

    translate(0, -height);

    fill(255);

    ellipse(leftChinEye.x, leftChinEye.y, faceWidth*.20, faceWidth*.20);

    ellipse(rightChinEye.x, rightChinEye.y, faceWidth*.20, faceWidth*.20);

    fill(0);

    ellipse(leftChinEye.x, leftChinEye.y, faceWidth*.12, faceWidth*.12);

    ellipse(rightChinEye.x, rightChinEye.y, faceWidth*.12, faceWidth*.12);

    pop();   

  }

 }

​

​