let faceMesh;

let faces = [];

let canvas;

let vertexArray = [10, 338, 297, 332, 284, 251, 389, 356, 454, 323, 361, 288, 397, 365, 379, 378, 400, 377, 152, 148, 176, 149, 150, 136, 172, 58, 132, 93, 234, 127, 162, 21, 54, 103, 67, 109, 10];

let rot = 0;

​

function preload() {

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

}

​

function gotFaces(results) {

  faces = results;

}

​

function setup() {

  canvas = 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(0);

  image(video, 0, 0) 

​

  if (faces.length > 1) {

    fill(255);

    ellipse(10, 10, 10, 10);

    let face1 = faces[0];

    let keypoints1 = face1.keypoints;

    let face1Top = keypoints1[10];

    let face1Bottom = keypoints1[152];

    let face1Left = keypoints1[234];

    let face1Right = keypoints1[454];

    let face1Height = dist(face1Top.x, face1Top.y, face1Bottom.x, face1Bottom.y);

    let face1Width = dist(face1Left.x, face1Left.y, face1Right.x, face1Right.y);

    let face1Center = lineIntersection(face1Top.x, face1Top.y, face1Bottom.x, face1Bottom.y, face1Left.x, face1Left.y, face1Right.x, face1Right.y);

    let face2 = faces[1];

    let keypoints2 = face2.keypoints;

    let face2Top = keypoints2[10];

    let face2Bottom = keypoints2[152];

    let face2Left = keypoints2[234];

    let face2Right = keypoints2[454];

​

    let face2Height = dist(face2Top.x, face2Top.y, face2Bottom.x, face2Bottom.y);

    let face2Width = dist(face2Left.x, face2Left.y, face2Right.x, face2Right.y);

    let face2Center = lineIntersection(face2Top.x, face2Top.y, face2Bottom.x, face2Bottom.y, face2Left.x, face2Left.y, face2Right.x, face2Right.y);    

    let angle = createVector(face1Bottom.x-face1Top.x, face1Bottom.y-face1Top.y).angleBetween(createVector(face2Bottom.x-face2Top.x, face2Bottom.y-face2Top.y))*PI*2;

    let faceScale = face1Height/face2Height;

    // Put face 1 over face 2    

    push();

    scale (1/faceScale, 1/faceScale);

​

    //translate(-face1Center*faceScale.x,-face1Center.y*faceScale);  

​

    //rot = rot + 5;

    //if (rot > 359) { rot = 0; }

    //rotate(rot);

    translate(-face1Center.x+(face2Center.x*faceScale), -face1Center.y+(face2Center.y*faceScale));

​

    beginClip();

    beginShape();

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

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

    }

    endShape(CLOSE);

    endClip(); 

    image(video, 0, 0)

    pop();

​

    // Put face 2 over face 1    

    push();

    scale (faceScale, faceScale);

    translate(-face2Center.x+(face1Center.x/faceScale), -face2Center.y+(face1Center.y/faceScale));

    beginClip();

    beginShape();

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

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

    }

    endShape(CLOSE);

    endClip(); 

    image(video, 0, 0)

    pop();    

    // mesh dots

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

    //  fill(255);

    //  noStroke();

    //  ellipse(keypoints[i].x, keypoints[i].y, 2, 2);

    // }    

​

  }

}

​

function lineIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {

  // Denominator for calculating intersection point

  let denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);

​

  // Check for parallel lines

  if (denominator === 0) return null;

​

  let t = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator;

  let u = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator;

​

  // Intersection point coordinates

  let intersectionX = x1 + t * (x2 - x1);

  let intersectionY = y1 + t * (y2 - y1);

​

  return { x: intersectionX, y: intersectionY };

}

​