let mask = "ghost";

let leftEye;

let rightEye;

​

let faceMesh;

let video;

let faces = [];

let facePoints;

let options = { maxFaces: 1, refineLandmarks: false, flipHorizontal: false };

​

function preload() {

  faceMesh = ml5.faceMesh(options);

  leftEye = loadImage("left.png");

  rightEye = loadImage("right.png");

}

​

function setup() {

  createCanvas(640, 480);

  textAlign(CENTER);

  imageMode(CENTER);

  noStroke();

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  faceMesh.detectStart(video, gotFaces);

}

​

function draw() {

  background(0);

​

  if (state == "intro") {

    textSize(32);

    fill(0, 0, 255);

    text("should I get a tattoo?", width / 2, height / 2);

    textSize(16);

    text("YESSSSSS", width / 2, (height / 3) * 2);

  } else if (state == "choose") {

    textSize(24);

    fill(0, 0, 255);

    text("should I book with boom?", width / 2, height / 2);

    textSize(16);

    text("YESSSS", 150, (height / 3) * 2);

    text("YAAAAS", width - 150, (height / 3) * 2);

  } else if (state == "mask" && mask == "yes"){

    if (faces[0]) {

      //check if there is a face

      //draw shapes on face

      let facePoints = faces[0].keypoints;

      fill (0, 0, 255);

            // NOSE

      beginShape();

      // Add vertices.

      vertex(facePoints[195].x, facePoints[195].y);

      vertex(facePoints[218].x, facePoints[218].y);

      vertex(facePoints[438].x, facePoints[438].y);

      endShape(CLOSE);

​

      //LEFT EYE

      beginShape();

      vertex(facePoints[33].x, facePoints[33].y);

      vertex(facePoints[246].x, facePoints[246].y);

      vertex(facePoints[161].x, facePoints[161].y);

      vertex(facePoints[160].x, facePoints[160].y);

      vertex(facePoints[159].x, facePoints[159].y);

      vertex(facePoints[158].x, facePoints[158].y);

      vertex(facePoints[157].x, facePoints[157].y);

      vertex(facePoints[173].x, facePoints[173].y);

      vertex(facePoints[133].x, facePoints[133].y);

      vertex(facePoints[155].x, facePoints[155].y);

      vertex(facePoints[154].x, facePoints[154].y);

      vertex(facePoints[153].x, facePoints[153].y);

      vertex(facePoints[145].x, facePoints[145].y);

      vertex(facePoints[144].x, facePoints[144].y);

      vertex(facePoints[163].x, facePoints[163].y);

      vertex(facePoints[7].x, facePoints[7].y);

      endShape(CLOSE);

​

      //RIGHT EYE

      beginShape();

      vertex(facePoints[362].x, facePoints[362].y);

      vertex(facePoints[398].x, facePoints[398].y);

      vertex(facePoints[384].x, facePoints[384].y);

      vertex(facePoints[385].x, facePoints[385].y);

      vertex(facePoints[386].x, facePoints[386].y);

      vertex(facePoints[387].x, facePoints[387].y);

      vertex(facePoints[388].x, facePoints[388].y);

      vertex(facePoints[466].x, facePoints[466].y);

      vertex(facePoints[263].x, facePoints[263].y);

      vertex(facePoints[249].x, facePoints[249].y);

      vertex(facePoints[390].x, facePoints[390].y);

      vertex(facePoints[373].x, facePoints[373].y);

      vertex(facePoints[374].x, facePoints[374].y);

      vertex(facePoints[380].x, facePoints[380].y);

      vertex(facePoints[381].x, facePoints[381].y);

      vertex(facePoints[382].x, facePoints[382].y);

      endShape(CLOSE);

​

      //MOUTH

      beginShape();

      vertex(facePoints[62].x, facePoints[62].y);

      vertex(facePoints[78].x, facePoints[78].y);

      vertex(facePoints[191].x, facePoints[191].y);

      vertex(facePoints[80].x, facePoints[80].y);

      vertex(facePoints[81].x, facePoints[81].y);

      vertex(facePoints[82].x, facePoints[82].y);

      vertex(facePoints[13].x, facePoints[13].y);

      vertex(facePoints[312].x, facePoints[312].y);

      vertex(facePoints[311].x, facePoints[311].y);

      vertex(facePoints[310].x, facePoints[310].y);

      vertex(facePoints[415].x, facePoints[415].y);

      vertex(facePoints[308].x, facePoints[308].y);

      vertex(facePoints[324].x, facePoints[324].y);

      vertex(facePoints[318].x, facePoints[318].y);

      vertex(facePoints[402].x, facePoints[402].y);

      vertex(facePoints[317].x, facePoints[317].y);

      vertex(facePoints[14].x, facePoints[14].y);

      vertex(facePoints[87].x, facePoints[87].y);

      vertex(facePoints[178].x, facePoints[178].y);

      vertex(facePoints[88].x, facePoints[88].y);

      vertex(facePoints[95].x, facePoints[95].y);

      vertex(facePoints[78].x, facePoints[78].y);

      endShape(CLOSE);

    }

    fill(255);

    textSize(16);

    text("click to go back", width / 2, (height / 3) * 2.5);

  } else if (state == "mask" && mask == "yas"){

    if (faces[0]){

      //check if there is a face

      //draw shapes on face

      let facePoints = faces[0].keypoints;

      fill (255, 192, 203); //pink

     //EYES

      image(leftEye, facePoints[145].x, facePoints[145].y, 70, 50);

      image(rightEye, facePoints[374].x, facePoints[374].y, 70, 50);

      // NOSE

      beginShape();

      // Add vertices.

      vertex(facePoints[2].x, facePoints[2].y);

      vertex(facePoints[218].x, facePoints[218].y);

      vertex(facePoints[438].x, facePoints[438].y);

      endShape(CLOSE);

​

      fill(255, 255, 0); //yellow

​

      //line between mouth and nose

      stroke(255, 255, 0);

      strokeWeight(1);

      line(

        facePoints[2].x,

        facePoints[2].y,

        facePoints[13].x,

        facePoints[13].y

      );

      noStroke();

​

      //MOUTH

      beginShape();

      vertex(facePoints[62].x, facePoints[62].y);

      vertex(facePoints[78].x, facePoints[78].y);

      vertex(facePoints[191].x, facePoints[191].y);

      vertex(facePoints[80].x, facePoints[80].y);

      vertex(facePoints[81].x, facePoints[81].y);

      vertex(facePoints[82].x, facePoints[82].y);

      vertex(facePoints[13].x, facePoints[13].y);

      vertex(facePoints[312].x, facePoints[312].y);

      vertex(facePoints[311].x, facePoints[311].y);

      vertex(facePoints[310].x, facePoints[310].y);

      vertex(facePoints[415].x, facePoints[415].y);

      vertex(facePoints[308].x, facePoints[308].y);

      vertex(facePoints[324].x, facePoints[324].y);

      vertex(facePoints[318].x, facePoints[318].y);

      vertex(facePoints[402].x, facePoints[402].y);

      vertex(facePoints[317].x, facePoints[317].y);

      vertex(facePoints[14].x, facePoints[14].y);

      vertex(facePoints[87].x, facePoints[87].y);

      vertex(facePoints[178].x, facePoints[178].y);

      vertex(facePoints[88].x, facePoints[88].y);

      vertex(facePoints[95].x, facePoints[95].y);

      vertex(facePoints[78].x, facePoints[78].y);

      endShape(CLOSE);

    }

    textSize(16);

    text("click to go back", width / 2, (height / 3) * 2);

  }

}

​

function gotFaces(results) {

  faces = results;

  if (faces[0]) {

    facePoints = faces[0].keypoints;

  }

}

​

function mousePressed() {

  if (state == "intro" && dist(mouseX, mouseY, width / 2, (height / 3) * 2) < 50

  ) {

    //advance state to second screen

    state = "choose";

  } else if (state == "choose" && dist(mouseX, mouseY, width - 150, (height / 3) * 2) < 50 ){

    // if cheshire clicked

    mask = "yas";

    state = "mask";

    console.log("yas");

​

  } else if (state == "choose" && dist(mouseX, mouseY, 150, (height / 3) * 2) <50){

    // if ghost clicked

    mask = "yes";

    state = "mask";

    console.log("yes");

  } else if (state == "mask" && dist(mouseX, mouseY,  width / 2, (height / 3) * 2 <50)) {

    state = "intro";

  }

}