let sproutImg, konkerImg, worldImg, libImg, grafImg, scriptImg;

let capture;

let tracker;

let textImg;

​

let currentState = 1;

//item buttons

let button1x = 20;

let button1y = 120;

let button1w = 40;

let button1h = 40;

​

let button2x = 20;

let button2y = 170;

let button2w = 40;

let button2h = 40;

​

let button3x = 20;

let button3y = 220;

let button3w = 40;

let button3h = 40;

​

let button4x = 340;

let button4y = 80;

let button4w = 40;

let button4h = 40;

​

let button5x = 340;

let button5y = 120;

let button5w = 40;

let button5h = 40;

​

let button6x = 340;

let button6y = 160;

let button6w = 40;

let button6h = 40;

​

let button7x = 340;

let button7y = 200;

let button7w = 40;

let button7h = 40;

​

let button8x = 340;

let button8y = 240;

let button8w = 40;

let button8h = 40;

​

let button9x = 340;

let button9y = 280;

let button9w = 40;

let button9h = 40;

​

function preload() {

  teeImg = loadImage("assets/PVAoutlineTshirt.png");

  hoodieImg = loadImage("assets/PVAoutlineHoodie.png");

  crewImg = loadImage("assets/PVAoutlineCrew.png");

  sproutImg = loadImage("assets/GoonSproutBlack.png");

  konkerImg = loadImage("assets/KonkerBlack.png");

  worldImg = loadImage("assets/WorldLogoBlack.png");

  libImg = loadImage("assets/liberty.png");

  scriptImg = loadImage("assets/scriptgoonvec.png");

  grafImg = loadImage("assets/graf.png");

  textImg = loadImage("assets/PVAtext.png");

}

​

function setup() {

  createCanvas(400, 400);

  textSize(20);

  capture = createCapture(VIDEO);

  capture.size(640, 480);

  capture.hide();

​

  //setup the face tracker

  tracker = new clm.tracker();

  tracker.init();

  tracker.start(capture.elt);

}

​

function draw() {

  //white

  if (currentState == 1) {

    background(255);

    //blue

  } else if (currentState == 2) {

    background(72, 211, 250);

    //purple

  } else if (currentState == 3) {

    background(178, 96, 230);

    //red

  } else if (currentState == 4) {

    background(214, 19, 19);

    //yellow

  } else if (currentState == 5) {

    background(250, 246, 120);

    //green

  } else if (currentState == 6) {

    image(teeImg, 0, 0, 400, 400);

  } else if (currentState == 7) {

    image(hoodieImg, 0, 0, 400, 400);

  } else if (currentState == 8) {

    image(crewImg, 0, 0, 400, 400);

  } else if (currentState == 9) {

    image(konkerImg, 125, 115, 150, 150);

  } else if (currentState == 10) {

    image(sproutImg, 157, 142, 85, 60);

  } else if (currentState == 11) {

    image(grafImg, 167, 140, 60, 60);

  } else if (currentState == 12) {

    image(worldImg, 125, 110, 150, 150);

  } else if (currentState == 13) {

    image(scriptImg, 162, 145, 75, 75);

  } else if (currentState == 14) {

    image(libImg, 150, 160, 100, 120);

  } else if (currentState == 15) {

    background(186, 242, 145);

  }

​

  //buttons

  fill(255);

  rect(button1x, button1y, button1w, button1h);

  rect(button2x, button2y, button2w, button2h);

  rect(button3x, button3y, button3w, button3h);

  rect(button4x, button4y, button4w, button4h);

  rect(button5x, button5y, button5w, button5h);

  rect(button6x, button6y, button6w, button6h);

  rect(button7x, button7y, button7w, button7h);

  rect(button8x, button8y, button8w, button8h);

  rect(button9x, button9y, button9w, button9h);

  image(teeImg, button1x, button1y, 40, 40);

  image(crewImg, button3x, button3y, 40, 40);

  image(hoodieImg, button2x, button2y, 40, 40);

  image(konkerImg, button4x - 10, button4y - 10, 60, 60);

  image(sproutImg, button5x - 5, button5y, 50, 40);

  image(grafImg, button6x, button6y, 40, 40);

  image(worldImg, button7x - 15, button7y - 15, 70, 70);

  image(scriptImg, button8x, button8y, 40, 40);

  image(libImg, button9x, button9y, 40, 40);

​

  //color buttons *not pressable

  textAlign(LEFT, TOP);

  fill(255);

  rect(80, 340, 40, 40);

  fill(0);

  text("1", 95, 350);

  fill(72, 211, 250);

  rect(120, 340, 40, 40);

  fill(0);

  text("2", 135, 350);

  fill(178, 96, 230);

  rect(160, 340, 40, 40);

  fill(0);

  text("3", 175, 350);

  fill(214, 19, 19);

  rect(200, 340, 40, 40);

  fill(0);

  text("4", 215, 350);

  fill(250, 246, 120);

  rect(240, 340, 40, 40);

  fill(0);

  text("5", 255, 350);

  fill(186, 242, 145);

  rect(280, 340, 40, 40);

  fill(0);

  text("6", 295, 350);

  //instruction text image

  image(textImg, -5, -5, 230, 70);

​

  //webcam

  imageMode(CORNER);

  //get list of positions of dots around face

  let positions = tracker.getCurrentPosition();

  if (positions) {

    let topx = positions[1][0] - 20;

    let topy = positions[20][1] - 125;

    let faceWidth = positions[13][0] - positions[1][0] + 40;

    let faceHeight = positions[7][1] - positions[21][1] + 135;

    let face = capture.get(topx, topy, faceWidth, faceHeight);

    imageMode(CENTER);

    image(face, width / 2, 90, 60, 75);

    imageMode(CORNER);

  }

}

​

function keyPressed() {

  //check if i pressed the number 1 on the keyboard

  if (key == 1) {

    currentState = 1;

  }

  if (key == 2) {

    currentState = 2;

  }

  if (key == 3) {

    currentState = 3;

  }

  if (key == 4) {

    currentState = 4;

  }

  if (key == 5) {

    currentState = 5;

  }

  if (key == 6) {

    currentState = 15;

  }

  //check if i pressed the letter a

  if (key == "a") {

    console.log("pressed a");

  }

}

function mousePressed() {

  //check if mouseX is inside the button

  if (

    mouseX > button1x &&

    mouseX < button1x + button1w &&

    mouseY > button1y &&

    mouseY < button1y + button1h

  ) {

    currentState = 6;

  }

  if (

    mouseX > button2x &&

    mouseX < button2x + button2w &&

    mouseY > button2y &&

    mouseY < button2y + button2h

  ) {

    currentState = 7;

  }

  if (

    mouseX > button3x &&

    mouseX < button3x + button3w &&

    mouseY > button3y &&

    mouseY < button3y + button3h

  ) {

    currentState = 8;

  }

  if (

    mouseX > button4x &&

    mouseX < button4x + button4w &&

    mouseY > button4y &&

    mouseY < button4y + button4h

  ) {

    currentState = 9;

  }

  if (

    mouseX > button5x &&

    mouseX < button5x + button5w &&

    mouseY > button5y &&

    mouseY < button5y + button5h

  ) {

    currentState = 10;

  }

  if (

    mouseX > button6x &&

    mouseX < button6x + button6w &&

    mouseY > button6y &&

    mouseY < button6y + button6h

  ) {

    currentState = 11;

  }

  if (

    mouseX > button7x &&

    mouseX < button7x + button7w &&

    mouseY > button7y &&

    mouseY < button7y + button7h

  ) {

    currentState = 12;

  }

  if (

    mouseX > button8x &&

    mouseX < button8x + button8w &&

    mouseY > button8y &&

    mouseY < button8y + button8h

  ) {

    currentState = 13;

  }

  if (

    mouseX > button9x &&

    mouseX < button9x + button9w &&

    mouseY > button9y &&

    mouseY < button9y + button9h

  ) {

    currentState = 14;

  }

}

​