let tracker;

let sx

let sy

let w

let dx

let dy

let cg

let mic

let i;

let sceneNum = 0;

let font;

let circle1;

let example;

let positions;

let mouthLeft;

let mouthRight;

let smile;

let eyeTop;

let eyeBot;

let eye;

let browLeft;

let browRight;

let brow;

let vol;

let h;

let p;

let instr

let pri

let cons

let micpic

let campic

let micpic1

let campic1

let control = 'OFF'

let micclick = false

let camclick = false

​

​

function preload() {

​

  //font

  font = loadFont('Roboto.ttf');

​

  //pics

  circle1 = loadImage('circles.png');

  example = loadImage('example2.png');

  instr = loadImage('instruction.png');

  pri = loadImage('privacy.png');

  cons = loadImage('consent.png');

  micpic = loadImage('mic.png')

  campic = loadImage('camera.png')

  micpic1 = loadImage('mic dark.png')

  campic1 = loadImage('camera dark.png');

​

}

​

function setup() {

​

  // load p5 functions:

  createCanvas(600, 600);

  capture = createCapture(VIDEO);

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

  capture.size(width, 450);

  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

  cg = createGraphics(width, 450)

  pixelDensity(1)

  //mic

  mic = new p5.AudioIn();

  mic.start();

​

​

}

​

​

function draw() {

​

  //welcome();

  //instruction();

  //privacy();

  //consent();

  //camstart();

  //exit();

​

   switch (sceneNum) {

​

      case 0:

      welcome();  

      break;

​

      case 1:

      instruction();

      break;

​

      case 2:

      privacy();

      break;

​

      case 3:

      consent();

      break;

​

      case 4:

      camstart();

      break;

​

      case 5:

      exit();

      break;

​

    }

​

}

​

function mousePressed() {

  //scene0

  if (mouseX > 0 && mouseX < width/2 && mouseY < 600 && mouseY > 450  && sceneNum == 0) {

    sceneNum = 1

  }

  else if (mouseX < 600 && mouseX > width/2 && mouseY < 600 && mouseY > 450  && sceneNum == 0) {

    sceneNum = 2

  }

  //scene1

  else if (mouseX < width/2 && mouseX > 65 && mouseY < 540 && mouseY > 470  && sceneNum == 1) {

    sceneNum = 0

  }

  else if (mouseX > width/2 && mouseX < 535 && mouseY < 540 && mouseY > 470  && sceneNum == 1) {

    sceneNum = 2

  }

  //scene2

  else if (mouseX < width/2 && mouseX > 65 && mouseY < 540 && mouseY > 470  && sceneNum == 2) {

    sceneNum = 0

  }

  else if (mouseX > width/2 && mouseX < 535 && mouseY < 540 && mouseY > 470  && sceneNum == 2) {

    sceneNum = 3

  }

  //scene3

   else if (mouseX < width/2 && mouseX > 60 && mouseY < 560 && mouseY > 490  && sceneNum == 3) {

    sceneNum = 2

  }

  else if (mouseX > width/2 && mouseX < 535 && mouseY < 560 && mouseY > 490  && sceneNum == 3 && camclick == true) {

    sceneNum = 4

  }

  else if (mouseX > width/2 && mouseX < 535 && mouseY < 560 && mouseY > 490  && sceneNum == 3 && camclick == false) {

    sceneNum = 5

  }

  //cam click

  else if (mouseX < 284 && mouseX > 206 && mouseY < 422 && mouseY > 375  && sceneNum == 3 && camclick == false) {

    camclick = true 

  }

  else if (mouseX < 284 && mouseX > 206 && mouseY < 422 && mouseY > 375  && sceneNum == 3 && camclick == true) {

    camclick = false 

  }

  //mic click

  else if (mouseX < 396 && mouseX > 361 && mouseY < 432 && mouseY > 352  && sceneNum == 3 && micclick == false) {

    micclick = true 

  }

  else if (mouseX < 396 && mouseX > 361 && mouseY < 432 && mouseY > 352  && sceneNum == 3 && micclick == true) {

    micclick = false 

  }

  //scene4

  else if (mouseX > 0 && mouseX < width/3 && mouseY < 600 && mouseY > 450  && sceneNum == 4 && micclick == false) {

    micclick = true

  }

  else if (mouseX > 0 && mouseX < width/3 && mouseY < 600 && mouseY > 450  && sceneNum == 4 && micclick == true) {

    micclick = false

  }

  else if (mouseX > width/3 && mouseX < (width * 2/3) && mouseY < 600 && mouseY > 450  && sceneNum == 4) {

    let c = get(0,0, width, 450);

    save(c,"photo.png");

  }

  else if (mouseX > (width * 2/3) && mouseX < width && mouseY < 600 && mouseY > 450  && sceneNum == 4) {

    sceneNum = 5

  }

  //scene5

  else if (mouseX > 181 && mouseX < 420 && mouseY < 472 && mouseY > 425  && sceneNum == 5) {

    sceneNum = 0

  }

}

​

function welcome() {

  clear();

  background(255, 211, 0);

​

  push();

  fill(0);

  textSize(18);

  textFont(font);

  rectMode(CENTER);

  textAlign(CENTER);

  text('Welcome! Deconstructed portrait is an experimental camera designed by Jasmin Liang. It deconstructs and interprets different elements from the user’s facial expression and volume, and translates them into abstract shapes in a minimalist, grid layout.', width / 2, 220, 420, 200);

  image(circle1, width / 2 - 100, 300, circle1.width / 4, circle1.height / 4);

  strokeWeight(2);

  stroke(250, 0, 0);

  line(0, 450, 600, 450);

  line(width / 2, 450, width / 2, 600);

  noStroke();

  text('See example', 150, 560, 200, 100);

  text('Start', 450, 560, 100, 100);

​

​

  pop();

​

}

​

function instruction() {

  clear();

  background(0);

​

​

  //upload image

​

  image(instr, 0, 0, instr.width, instr.height)

  //example diagram

  //   push();

  //   textAlign(CENTER);

  //   rectMode(CENTER);

  //   image(example,20,60,example.width/1.4,example.height/1.4);

​

​

​

  //   //return button

  //   strokeWeight(2);

  //   stroke(250);

  //   noFill();

  //   rect(width/2,545,200,50,20);

​

  //   //text

  //   fill(250);

  //   noStroke();

  //   textSize(18);

  //   textFont(font);

  //   text('Return to main page', width/2, 585, 200, 100)

​

  //   //line 

​

  //   //title

  //   fill(250,0,0)

  //   textSize(25)

  //   text('Camera Example', width/2, 30, 300, 25)

​

  //   pop();

}

​

function privacy() {

  clear();

  background(0);

​

  image(pri, 0, 0, pri.width, pri.height);

}

​

function consent() {

  clear();

  background(0);

​

  image(cons, -10, 0, cons.width / 4, cons.height / 4);

  image(campic1, width / 2 - 100, 370, campic1.width / 18, campic1.height / 18);

  image(micpic1, width / 2 + 60, 350, micpic1.width / 20, micpic1.height / 20);

  //cam click flagger

  if (camclick == true) {

    image(campic, width / 2 - 108, 353, campic.width/4.3, campic.height/4.3);

  }

  else {image(campic1, width / 2 - 100, 370, campic1.width / 18, campic1.height / 18);}

  //cam click flagger

  if (micclick == true) {

    image(micpic, width / 2 + 50, 338, micpic.width/4.6,  micpic.height/4.6);

  }

  else {image(micpic1, width / 2 + 60, 350, micpic1.width / 20, micpic1.height / 20)}

}

​

​

function camstart() {

​

  clear();

  background(0);

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

  positions = tracker.getCurrentPosition();

  background(0);

  // updates the tracker with current positions

  if (positions.length > 0) {

​

    var array2D = [

      [positions[23][0] - 10, positions[24][1] - 20, 50, 75], //lefteye

      [positions[14][0] - 10, positions[14][1] - 20, 450, 75], //right face

      [positions[0][0] - 30, positions[0][1] - 20, 50, 175], //leftface 

      [positions[30][0] - 10, positions[29][1] - 20, 450, 175], //righteye

      [positions[35][0] - 10, positions[39][1] - 30, 50, 275], //nose

      [positions[44][0], positions[46][1], 450, 275] //mouth

    ];

    //console.log(array2D.length)

​

​

    for (let i = 0; i < array2D.length; i++) {

​

      //console.log(i)

​

      sx = int(array2D[i][0]);

      sy = int(array2D[i][1]);

      w = 60;

      dx = int(array2D[i][2]);

      dy = int(array2D[i][3]);

      cg.copy(capture, sx, sy, w, w, dx, dy, w, w);

      image(cg, 0, 0, width, 450);

​

    }

​

    // draw face outline

​

    noFill();

    stroke(255);

​

    beginShape();

    for (let i = 0; i < positions.length; i++) {

      vertex(positions[i][0], positions[i][1])

    }

    endShape();

​

    //pixelgraph 

    //     loadPixels()

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

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

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

    //            fill(pixels[index], 0, 0)

    //            circle(100, 75, 30)

    //            fill(0,pixels[index + 1],0)

    //            circle(200, 75, 30)

    //            fill(0, 0, pixels[index + 2])

    //            circle(300, 75, 30)

    //          }

    //        }

​

    //smile

    push();

    strokeWeight(3)

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

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

​

    smile = mouthLeft.dist(mouthRight);

    stroke(250);

    circle(100, 75, smile / 2);

​

    //left eye

    eyeTop = createVector(positions[24][0], positions[24][1]);

    eyeBot = createVector(positions[26][0], positions[26][1]);

    eye = eyeTop.dist(eyeBot);

​

    stroke(250, 250, 0);

    circle(200, 75, eye * 2);

​

    //right brow 

    browLeft = createVector(positions[18][0], positions[18][1]);

    browRight = createVector(positions[15][0], positions[15][1]);

    brow = browLeft.dist(browRight);

​

    stroke(0, 0, 250)

    circle(300, 75, brow / 2)

​

    pop();

​

​

    //mic input

    if (micclick == true){

    control = 'ON'  

    vol = mic.getLevel();

    //console.log(vol);

    h = map(vol, 0, 1, 50, 500);

    p = map(vol, 0, 1, 0, 250);

    fill(250, 0, 0);

    stroke(250, 0, 0);

    ellipse(positions[3][0] - 50, positions[3][1], h);

    }

    else {

      control = 'OFF'

    }

   //draw buttons

    push();

    fill(250);

    rectMode(CENTER);

    textAlign(CENTER);

    textSize(18);

    textFont(font);

    strokeWeight(3);

    stroke(250,211,0);

    line(0, 500, 600, 500);

    line(width / 3, 500, width / 3, 600);

    line(width/3 * 2,500, width/3 * 2, 600)

    noStroke();

    text('Mic:'+ control, 100, 580, 200, 100);

    text('Take a pic', 300, 580, 100, 100);

    text('Exit',500, 580, 100, 100)

    pop();

  }

​

}

​

function exit(){

  clear();

  background(255, 211, 0);

​

  push();

  fill(0);

  textSize(20);

  textFont(font);

  rectMode(CENTER);

  textAlign(CENTER);

  noStroke();

  text('The camera will be here whenever you are ready. See you next time!', width / 2, 320, 420, 200);

  image(circle1, width / 2 - 100, 300, circle1.width / 4, circle1.height / 4);

  push();

  strokeWeight(2);

  stroke(250, 0, 0);

  noFill();

  // line(0, 450, 600, 450);

  // line(width / 2, 450, width / 2, 600);

  // noStroke();

  rect (width/2, 450,240,50)

  pop();

  fill(250,0,0)

  text('return to home page', width / 2, 485, 200, 100);

​

  pop();

  //if (mouseIsPressed) {console.log(mouseX, mouseY)}

}