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

    fill(255);

    text("welcome to my island", width / 2, height / 2);

    textSize(18);

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

  }

  else if(state == "choose"){

  textSize(44);

    fill(255);

    text("choose a mas", width / 2, height / 2);

    textSize(18);

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

    text("cheshire", 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

  ) {

    //advanced the state to the second screen

    state = "choose";

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

  mask = "cheshire"

  state = "mask"

  }

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

    mask = "ghost"

    state = "mask"

  }

}

​