let mask = "ghost";

​

let faceMesh;

let video;

let faces = [];

let facePoints;

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

​

function preload() {

  faceMesh = ml5.faceMesh(options);

}

​

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

    text("Choose a mask", width / 2, height / 2);

    textSize(16);

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

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

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

    fill(255);

    textSize(16);

    text("return to intro", width/2, height/3 * 2);

    if(mask == "ghost"){

      fill(0, 255, 0);

    } else if(mask == "cheshire"){

      fill(0, 0, 255);

    }

  }

}

​

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 = "chesire";

    state = "mask";

    console.log("cheshire");

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

​

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

    // if ghost clicked

    mask = "ghost";

    state = "mask";

    console.log("ghost");

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

    state = "intro";

  }

}