let letMeIn, gotIt, yep, notReally, sure, maybeLater, stillWannaTry, okBye;

let capture;

let tracker;

let positions;

​

let isOpen = true;

​

let end;

let username;

let myUsername;

​

​

function preload() {

  batteryCharging = loadImage("BatteryCh.png");

  batteryConsuming = loadImage("BatteryCo.png");

}

​

​

function setup() {

​

  createCanvas(570, 400);

​

  pixelDensity(1);

  textAlign(CENTER, CENTER);

  textFont('Georgia');

​

  //   capture = createCapture(VIDEO);

  //   capture.elt.setAttribute('playsinline', ''); // this line makes your program works on iPhone 11

  //   capture.size(width, height);

  //   capture.hide();

  //   // load clmtrackr functions:

  //   tracker = new clm.tracker(); // create a new clmtrackr object

  //   tracker.init(); // initialize the object

  //   tracker.start(capture.elt); // start tracking the video element capture.elt

​

  //buttons

​

  username = createInput('')

  username.input(myInputEvent);

  username.position(230, 200);

  username.style('width', '100px');

  username.hide();

​

​

​

  //submit

  submit = createButton('submit');

  submit.position(width / 2 - 50, height / 2 + 70);

  // submit.mousePressed(nextScene);

  submit.mousePressed(submitName);

  submit.style("width", "100px");

  submit.style("height", "30px");

  submit.style("font-family", 'Georgia');

  submit.style("background-color", "#FFFFFF");

  submit.style("color", "#4A55BE");

  submit.style("border", "none");

  submit.hide();

​

  //let me in

  letMeIn = createButton('Let me in');

  letMeIn.position(width / 2 - 50, height / 2 + 20);

  letMeIn.mousePressed(nextScene);

  letMeIn.style("width", "100px");

  letMeIn.style("height", "30px");

  letMeIn.style("font-family", 'Georgia');

  letMeIn.style("background-color", "#FFFFFF");

  letMeIn.style("color", "#4A55BE");

  letMeIn.style("border", "none");

​

​

​

  //got it

  gotIt = createButton('Got it !');

  gotIt.position(width / 2 - 50, height / 2 + 80);

  gotIt.style("font-family", 'Georgia');

  gotIt.style("width", "100px");

  gotIt.style("height", "30px");

  gotIt.style("background-color", "#4A55BE");

  gotIt.style("color", "#FFFFFF");

  gotIt.style("border", "none");

  gotIt.mousePressed(nextScene);

  gotIt.hide();

​

​

  //yep i'm introverted

  yep = createButton('Yep');

  yep.position(width / 2 - 120, height / 2 + 50);

  yep.style("font-family", 'Georgia');

  yep.style("width", "100px");

  yep.style("height", "30px");

  yep.style("background-color", "#EC5281");

  yep.style("color", "#FFFFFF");

  yep.style("border", "none");

  yep.mousePressed(goIntro);

  yep.hide();

​

  //not really

  notReally = createButton('Not really');

  notReally.position(width / 2 + 20, height / 2 + 50);

  notReally.style("font-family", 'Georgia');

  notReally.style("width", "100px");

  notReally.style("height", "30px");

  notReally.style("background-color", "#4A55BE");

  notReally.style("color", "#FFFFFF");

  notReally.style("border", "none");

  notReally.mousePressed(goExtro);

  notReally.hide();

​

  //sure

  sure = createButton('Sure!');

  sure.position(width / 2 - 120, height / 2 + 50);

  sure.style("font-family", 'Georgia');

  sure.style("width", "100px");

  sure.style("height", "30px");

  sure.style("background-color", "#EC5281");

  sure.style("color", "#FFFFFF");

  sure.style("border", "none");

  sure.mousePressed(popWin);

  sure.hide();

​

  //maybe later

  maybeLater = createButton('Maybe later');

  maybeLater.position(width / 2 + 20, height / 2 + 50);

  maybeLater.style("font-family", 'Georgia');

  maybeLater.style("width", "100px");

  maybeLater.style("height", "30px");

  maybeLater.style("background-color", "#4A55BE");

  maybeLater.style("color", "#FFFFFF");

  maybeLater.style("border", "none");

  maybeLater.mousePressed(returnHome);

  maybeLater.hide();

​

​

  //still wanna try

  stillWannaTry = createButton('Still try!');

  stillWannaTry.position(width / 2 - 120, height / 2 + 50);

  stillWannaTry.style("font-family", 'Georgia');

  stillWannaTry.style("width", "100px");

  stillWannaTry.style("height", "30px");

  stillWannaTry.style("background-color", "#EC5281");

  stillWannaTry.style("color", "#FFFFFF");

  stillWannaTry.style("border", "none");

  stillWannaTry.mousePressed(popWin);

  stillWannaTry.hide();

​

  //returen to welcome page

  okBye = createButton('Ok, bye');

  okBye.position(width / 2 + 20, height / 2 + 50);

  okBye.style("font-family", 'Georgia');

  okBye.style("width", "100px");

  okBye.style("height", "30px");

  okBye.style("background-color", "#4A55BE");

  okBye.style("color", "#FFFFFF");

  okBye.style("border", "none");

  okBye.mousePressed(returnHome);

  okBye.hide();

​

​

  //end

  end = createButton('end this');

  end.position(width / 2 - 50, 325);

  end.mousePressed(returnHome);

  end.style("width", "100px");

  end.style("height", "30px");

  end.style("font-family", 'Georgia');

  end.style("background-color", "white");

  end.style("color", "#4A55BE");

  end.style("border", "none");

  end.hide();

​

}

​

function draw() {

​

  switch (sceneNum) {

    case 0:

​

      letMeIn.show();

      gotIt.hide();

      yep.hide();

      notReally.hide();

      sure.hide();

      maybeLater.hide();

      stillWannaTry.hide();

      okBye.hide();

      end.hide();

      // capture.remove();

​

​

      loadPixels();

      background('#4A55BE');

​

​

      // for (let y = 0; y < height; y++) {

      //   for (let x = 0; x < width; x++) {

      //     let index = (x + y * width) * 4;

      //     pixels[index] = x / 3 * 2.5;

      //     pixels[index + 1] = 180;

      //     pixels[index + 2] = y;

      //     pixels[index + 3] = 255;

      //   }

      // }

      // updatePixels();

​

      push();

      fill(255);

      textAlign(CENTER);

      // textStyle(ITALIC);

      textSize(20);

      text('Welcome to the Introverted Dashboard', width / 2, height / 2 - 20);

      fill(74, 85, 190, 100);

      // text('Welcome to the Introverted Dashboard', width / 2 + 2, height / 2 - 18);

      pop();

​

      break;

​

    case 1:

      background(255);

      letMeIn.hide();

​

      fill('#4A55BE');

      textSize(20);

      textStyle(ITALIC);

      text('There’s a cognitive misunderstanding about \n the definition of introverts: while we tend to think \n that those people who lack social skills are introverted, \n the real introverted group is supposed to be \n those who “lose energy” during social activities \n and “recharge” themselves when being alone.', width / 2, height / 2 - 20);

      gotIt.show();

​

      break;

​

    case 2:

      background(255);

      letMeIn.hide();

      gotIt.hide();

​

      textStyle(NORMAL);

      text('So, here comes the question:  ', width / 2, height / 2 - 100);

      push();

      fill('#EC5281');

      textSize(40);

      text('Are you introverted?', width / 2, height / 2 - 15);

      pop();

      yep.show();

      notReally.show();

​

      break;

​

    case 3:

      background(255);

      letMeIn.hide();

      gotIt.hide();

      yep.hide();

      notReally.hide();

      text('Would you like to try the Introverted Dashboard? \n Note that it requires access to your webcam! ', width / 2, height / 2);

      sure.show();

      maybeLater.show();

​

      break;

​

​

    case 4:

​

      background(255);

      letMeIn.hide();

      gotIt.hide();

      yep.hide();

      notReally.hide();

      sure.hide();

      maybeLater.hide();

​

      text('This dashboard might not suit you :/', width / 2, height / 2);

​

      stillWannaTry.show();

      okBye.show();

​

      break;

​

​

    case 5:

​

      background('#EC5281');

      submit.show();

      letMeIn.hide();

      gotIt.hide();

      yep.hide();

      notReally.hide();

      sure.hide();

      maybeLater.hide();

      stillWannaTry.hide();

      okBye.hide();

​

      push();

      fill(255);

      text("type your name below:", width / 2, 150);

      pop();

      username.show();

​

​

      break;

​

​

    case 6:

      // background(255);

​

      end.show();

      username.hide();

​

​

      letMeIn.hide();

      gotIt.hide();

      yep.hide();

      notReally.hide();

      sure.hide();

      maybeLater.hide();

      stillWannaTry.hide();

      okBye.hide();

      submit.hide();

​

      if (isOpen == true) {

        webcam();

        isOpen = false;

      }

​

​

      // text('camera on this page', width / 2, height / 2);

      push();

      image(capture, 0, 0, width, height);

      noFill();

      stroke(250);

      strokeWeight(1.5);

      rect(20, 20, 530, 360);

      line(40, 40, 130, 40);

      line(40, 40, 40, 130);

      line(430, 40, 530, 40);

      line(530, 40, 530, 130);

      line(40, 280, 40, 360);

      line(40, 360, 130, 360);

      line(530, 280, 530, 360);

      line(440, 360, 530, 360);

      pop();

​

      //date and time

​

      push();

      textAlign(LEFT);

      let ye = year();

      let mon = month();

      let d = day();

      let s = second()

      let m = minute();

      let h = hour();

      let date = ye + '.' + mon + '.' + d

      let time = h + ':' + m + ':' + s;

      textFont('Courier New');

      fill(255);

      textSize(15);

      text(date, 60, 340);

      text(time, 445, 340);

      text('username: ', 60, 60);

      text(myUsername, 60, 80);

      text('level:', 60, 100);

      text('sloth introvert', 60, 120);

      pop();

​

​

      //points

      ellipse();

​

​

      // //deco at bottom

      // push();

      // rectMode(CENTER);

      // fill(255);

      // noStroke();

      // rect(width / 2, 340, 10, 10);

      // rect(width / 2 + 50, 340, 10, 10);

      // rect(width / 2 - 50, 340, 10, 10);

      // ellipse(width / 2 + 25, 340, 5);

      // ellipse(width / 2 - 25, 340, 5);

      // ellipse(width / 2 + 75, 340, 5);

      // ellipse(width / 2 - 75, 340, 5);

      // pop();

​

      positions = tracker.getCurrentPosition();

​

      if (positions.length > 0) {

        //draw circle around eye area 

        noFill();

        stroke(255, 200);

        let eyeX = positions[27][0];

        let eyeY = positions[27][1];

        ellipse(eyeX, eyeY, 30);

        strokeWeight(2);

        ellipse(eyeX, eyeY, 35);

        strokeWeight(1);

        line(eyeX - 15, eyeY, eyeX - 10, eyeY);

        line(eyeX + 15, eyeY, eyeX + 10, eyeY);

        line(eyeX, eyeY + 15, eyeX, eyeY + 10);

        line(eyeX, eyeY - 15, eyeX, eyeY - 10);

​

​

        let mouthCon = createVector(positions[44][0], positions[44][1]);

        let jaw = createVector(positions[7][0], positions[7][1]);

        let smile = mouthCon.dist(jaw);

        print(smile); // shows the distance between mouthLeft and jaw

​

        push();

        noStroke();

        fill(255);

        textFont('Courier New');

​

        textAlign(RIGHT);

        if (smile > 55) {

          //text around cheek

          push();

          // noStroke();

          textSize(15);

          textAlign(RIGHT);

          // text('wehre is my text', width/2, height/2);

          text('facial expression detected', positions[2][0], positions[2][1]);

          pop();

​

          //battery Consuming

          text('battery status', 505, 60);

          image(batteryConsuming, 480, 65, 30, 30);

        } else {

          //battery Charging

          text('battery status', 505, 60);

          image(batteryCharging, 480, 65, 30, 30);

        }

      }

      pop();

​

​

      break;

​

  }

​

}

​

​

function nextScene() {

  sceneNum++;

}

​

function goIntro() {

  sceneNum = 3;

  yep.hide();

  notReally.hide();

}

​

function goExtro() {

  sceneNum = 4

  yep.hide();

  notReally.hide();

}

​

function popWin() {

  sceneNum = 5;

​

}

​

function returnHome() {

  sceneNum = 0;

  // capture.remove();

  console.log('webcam should be turned off here');

}

​

function myInputEvent(){

  console.log("you are typing: ", this.value());

  myUsername = this.value();

}

​

function submitName(){

  console.log(myUsername);

  nextScene();

}

​

function webcam() {

  capture = createCapture(VIDEO);

  capture.elt.setAttribute('playsinline', ''); // this line makes your program works on iPhone 11

  capture.size(width, height);

  capture.hide();

  // load clmtrackr functions:

  tracker = new clm.tracker(); // create a new clmtrackr object

  tracker.init(); // initialize the object

  tracker.start(capture.elt); // start tracking the video element capture.elt

​

}