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;

let a = 0;

let backG = [];

let artFace1Scale = [];

let artFace1Height = [];

let artFace1CenterX = [];

let artFace1CenterY = [];

let artFace2Scale = [];

let artFace2Height = [];

let artFace2CenterX = [];

let artFace2CenterY = [];

​

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

      }

    }

  };

  backG.push(loadImage("american-gothic-800-450.jpg"));

  artFace1Scale.push(1);

  artFace1Height.push(129);

  artFace1CenterX.push(268);

  artFace1CenterY.push(219);

  artFace2Scale.push(1);

  artFace2Height.push(146);

  artFace2CenterX.push(515);

  artFace2CenterY.push(151);

  backG.push(loadImage("arnolfini-800-450.jpg"));

  artFace1Scale.push(1);

  artFace1Height.push(105);

  artFace1CenterX.push(145);

  artFace1CenterY.push(108);

  artFace2Scale.push(1);

  artFace2Height.push(90);

  artFace2CenterX.push(646);

  artFace2CenterY.push(156);

  backG.push(loadImage("pearl-earring-800-450.jpg"));

  artFace1Scale.push(1);

  artFace1Height.push(224);

  artFace1CenterX.push(350);

  artFace1CenterY.push(243);

  artFace2Scale.push(0);

  artFace2Height.push(0);

  artFace2CenterX.push(0);

  artFace2CenterY.push(0);

  backG.push(loadImage("Pretty-Woman-800-450.jpg"));  

  artFace1Scale.push(1);

  artFace1Height.push(121);

  artFace1CenterX.push(398);

  artFace1CenterY.push(174);

  artFace2Scale.push(1);

  artFace2Height.push(129);

  artFace2CenterX.push(215);

  artFace2CenterY.push(152);

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

  video.hide();

  faceMesh.detectStart(video, gotFaces);

}

​

function mouseClicked() {

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

    a++;

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

  }

}

​

function draw() {

  background(backG[a]);

​

  if (faces.length > 0) {

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

​

    artFace1Scale[a] = face1Height/artFace1Height[a];

    // Put face 1 over face 2    

    push();

    scale (1/artFace1Scale[a], 1/artFace1Scale[a]);

    translate(-face1Center.x+(artFace1CenterX[a]*artFace1Scale[a]), 

              -face1Center.y+(artFace1CenterY[a]*artFace1Scale[a]));

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

  }

​

  if (faces.length > 1 && artFace2Scale[a] > 0) {

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

​

    artFace2Scale[a] = face2Height/artFace2Height[a];

​

    // Put face 2 over face 1    

    push();

    scale (1/artFace2Scale[a], 1/artFace2Scale[a]);

    translate(-face2Center.x+(artFace2CenterX[a]*artFace2Scale[a]), 

              -face2Center.y+(artFace2CenterY[a]*artFace2Scale[a]));

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

}

​