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

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

    fill(255)

    text("Welcome to my halloween experience", width/2, height/2);

    textSize(18)

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

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

    textSize(24)

    fill(255)

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

    textSize(18)

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

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

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

    fill(255)

    textSize(18)

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

    if(mask == "ghost"){

         fill(0,255,0);

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

​

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

         fill(255,0,0);

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

    }

  }

}

​

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 the state to the second screen

    state = "choose"

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

    // if they clicked on cheshire

    mask = "cheshire"

    state = "mask"

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

    // if they clicked on ghost

    mask = "ghost"

    state = "mask"

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

    state = "intro"

  }

}

​

​