​

let capture;

let tracker;

let moveX = [100, 200];  

let moveY;

let eyeX; 

let eyeY;

let irisX;

let irisY;

let myVars = [0, 250, 150];

let myYars = [150, 100]

​

let sceneNum = 0;

let button;

let checkbox;

let next;

let s = "Have you ever smiled in order to avoid uncomfortable situations? Elusive Smile is an experimental camera that is designed to illustrate how people may appear different on the outside and inside. Often times we are forced to present ourselves in a certain way in public and have to conceal how we really feel. This camera attempts to address the instances where we might present ourselves falsely, as well as where others might misinterpret us.";

​

let ss = "In order to function properly, Elusive Camera needs permission to access your device's camera.";

let sss = "With access to the camera, when a face is not recognized, there is a red, rectangular boundary. If it recognizes a face inside the boundary without a smile, graphic eyes will appear around the face. This is to show how we concern ourselves with how we are seen and how we might purposely act differently. When the camera recognizes a face with a smile, it abrupty converts to an inverse filter. This changes the way the smile is interpreted and almost feels like an alter ego. If you'd like to try, please consent to give access to the device's camera and press continue.";

​

function setup() {

  angleMode(DEGREES);

  // load p5 functions:

  createCanvas(400, 400);

  capture = createCapture(VIDEO);

  capture.elt.setAttribute('playsinline', ''); //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

  //scene0 opening

  button = createButton('read more');

  button.position(width/2 -38, height/2 +10);

  button.mousePressed(nextScene);

  button.hide();

  //scene1 description

  next = createButton('continue');

  next.position(width/2 +10, height/2 +60);

  next.mousePressed(nextScene);

  next.hide();

  back = createButton('go back');

  back.position(width/2 -80, height/2 +60);

  back.mousePressed(backScene);

  back.hide();

  //scene2 disclosure

  checkbox = createCheckbox('I consent to give access to the camera', false);

  checkbox.changed(myCheckedEvent);

  checkbox.size(140)

  checkbox.position(135, 315);

  checkbox.hide();

  backk = createButton('go back');

  backk.position(40, 320);

  backk.mousePressed(backScene);

  backk.hide();

  tryit = createButton("continue");

  tryit.position(290, 320);

  tryit.mousePressed(consent);

  tryit.hide();

  //scene3 camera 

  backkk = createButton('go back');

  backkk.position(40, 320);

  backkk.mousePressed(backScene);

  backkk.hide();

​

}

​

function draw() {

  background(220);

  if (sceneNum == 0) {

    button.show();

  } else {

    button.hide();

  }

  if (sceneNum == 1 ) {

    next.show();

    back.show();

  } else {

    next.hide();

    back.hide();

  }

  if (sceneNum == 2 ) {

    checkbox.show();

    backk.show();

    tryit.show();

  } else {

    checkbox.hide();

    backk.hide();

    tryit.hide();

  }

  if (sceneNum ==3) {

    backkk.show();

  } else {

    backkk.hide();

  }

 //change scenes 

   switch (sceneNum) {

    case 0:

      scene0(); //intro read more

      break;

​

    case 1:

      scene1(); //description

      break;

​

    case 2:

      scene2(); //disclosure

      break;

    case 3:

      scene3();

        translate(width, 0); //reflect like mirror

        scale(-1.0, 1.0);

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

        let positions = tracker.getCurrentPosition(); // updates with current positions

        //draw graphic eyes

        drawEyes (100, -10, 50, 25, 19, 20);//moveX, moveY, eyeX, eyeY, irisX, irisY

        drawEyes (-100, 10, 50, 25, 19, 20);

        drawEyes (-100, 50, 70, 25, 19, 20);

        drawEyes (100, -50, 70, 25, 19, 20);

        drawEyes (-150, 30, 40, 15, 15, 17);

        drawEyes (150, -25, 50, 25, 15, 17);

        drawEyes (-150, 90, 70, 25, 19, 20);

        drawEyes (150, -90, 70, 25, 19, 20);

        drawEyes (0, 120, 70, 25, 19, 20);

        drawEyes (40, -160, 70, 25, 20, 20);

        drawEyes (-80, -130, 70, 25, 15, 20);

        drawEyes (80, 130, 70, 30, 20, 20);

        drawEyes (180, 150, 70, 30, 20, 20);

        drawEyes (150, 180, 70, 30, 20, 25);

        drawEyes (-150, -180, 70, 30, 20, 25);

        drawEyes (-170, -130, 70, 30, 25, 26);

        drawEyes (170, 80, 70, 30, 25, 26);

​

        noStroke(); //slight red 

        fill(255, 0, 72, 20);

        rect(myVars[0], 0, myYars[0], 400);

        rect(myVars[1], 0, myYars[0], 400);

        rect(myVars[2], 0, myYars[1], 100);

        rect(myVars[2], 300, myYars[1], 100);

​

        if (positions.length > 0) { //measure smile distance (from reference above)

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

          let mouthRight = createVector(positions[50][0], positions[50][1]);

          let smile = mouthLeft.dist(mouthRight);

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

​

          if (smile > 40) { 

          filter(INVERT);

          }   

        }

      break;

   }

​

}

function drawEyes(moveX, moveY, eyeX, eyeY, irisX, irisY){

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

  let positions = tracker.getCurrentPosition(); // updates with current positions

  if (positions.length > 0) {

  noStroke();

  fill(255);

  ellipseMode(CENTER);

  push();

  translate(moveX, moveY);

  ellipse(positions[62][0], positions[62][1], eyeX, eyeY);

  fill(0);

  ellipse(positions[62][0], positions[62][1], irisX, irisY);

  pop();

  }

}

​

​

function nextScene(){

  sceneNum++

}

​

function backScene(){

  sceneNum--;

}

​

function myCheckedEvent() {

  if (this.checked()) {

    console.log('Checking!');

  } else {

    console.log('Unchecking!');

  }

}

​

function consent() {

  if (checkbox.checked()) {

    console.log("next scene")

    sceneNum =3;

  } else {

    sceneNum = 2;

    console.log('no consent no move');

​

  }

}

​

function scene0(){

  background(255, 234, 97);

  textAlign(CENTER, CENTER);

  textSize(25);

  fill(0);

  arc(width/2, height/2 +10, 230, 180, 0, 180, CHORD); //arc(x, y, w, h, start, stop

  textAlign(CENTER, CENTER);

  textSize(25);

  text('Elusive Smile', width/2, height/2 -50);

  // console.log('scene0');

}

​

function scene1(){

  background(255, 234, 97);

  textAlign(CENTER, CENTER);

  noStroke();

  fill(252, 252, 179);

  rect(0,20,400,60);

  fill(0);

  textSize(20);

  text('What is Elusive Smile?', width/2, height/2 -150);

  textSize(13);

  text(s, 10,-10,390,390);

  // console.log('scene1');

}

​

function scene2(){

  background(255, 234, 97);

  noStroke();

  fill(252, 252, 179);

  rect(0,20,400,60);

  fill(0);

  textAlign(CENTER, CENTER);

  textSize(20);

  text('Disclosure', width/2, height/2 -150);

  textSize(13);

  text(ss, 25, -80, 350,390);

  text(sss, 25, 30, 350,390);

  // console.log('scene2');

}

​

function scene3(){

  background(0);

  // console.log('scene3');

}