let faceMesh;

let faces = [];

let bodies = [];

let backG = [];

let backGindex = 0;

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

let faceTicks = 0;

let numFaces = 0;

​

function mouseClicked() {

  if (mouseX > width - 50 && mouseY < 50) {

    backGindex++;

    if (backGindex > backG.length - 1) { backGindex = 0; }

  }

}

​

function preload() {

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

  bodies.push(loadImage("body1.png"));

  bodies.push(loadImage("body2.png"));

  backG.push(loadImage("background2.jpg"));

  backG.push(loadImage("background3.jpg"));

  backG.push(loadImage("background1.jpg"));

}

​

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[backGindex]);

​

  if (faces.length == 2) { faceTicks++; }

  else { faceTicks = 0; numFaces = faces.length;}

  if (faces.length == 2 && faceTicks > 50) { numFaces = 2; faceTicks = 51;}

  for (let f = 0; f < numFaces; f++) {

    let face = faces[f];

    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(bodies[f], -(bodies[f].width*bodyScale)/2, -(130*bodyScale), bodies[f].width*bodyScale, bodies[f].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();   

  } //for loop

 }

​

​