// https://github.com/kylemcdonald/AppropriatingNewTechnologies/wiki/Week-2

​

let sceneNum = 0;

let img1, img2;

let button;

let vid;

let canvas;

let w = 640;

let h = 480;

let tracker;

let pos1;

let mark = ['😡', '🤬', '🥵', '😈', '👿', '👹', '😱', '😨', '🥶', '😔', '😒', '😩', '😖', '😤', '😴', '😑', '😏', '😌'];

let word = ['!', '?', '#', '$', '%', '&', '@', '~', '*', '!', '?', '#', '$', '%', '&', '@', '~', '*'];

let checkbox;

​

function preload() {

  font = loadFont('GOTHICBI.TTF');

  fontregular = loadFont('GOTHICB.TTF');

  myFont = loadFont('assets/Neue-Regular.otf');

  myFontb = loadFont('assets/Neue-Bold.otf');

  img1 = loadImage('assets/frontpage.png');

  img2 = loadImage('assets/grey.png');

}

​

​

​

function setup() {

  canvas = createCanvas(w, h);

  // vid = createCapture(VIDEO);

  // vid.size(width, height);

  // vid.hide();

  // tracker = new clm.tracker();

  // tracker.init();

  // tracker.start(vid.elt);

  angleMode(DEGREES);

​

  //create slider

  tint_slider = createSlider(0, 255, 0);

  tint_slider.hide();

  tint_slider.position(234, height - 40);

​

  //create button

  button = createButton('Take photo');

  button.hide();

  button.position(10, height - 40);

  button.mousePressed(takephoto);

​

​

​

  //agree button

  agree = createButton('AGREE');

  agree.mousePressed(pressed);

  agree.style('padding', '6px');

  agree.size(80);

  agree.position(180, 350);

  agree.hide();

​

  //checkbox option

  checkbox = createCheckbox('I agree to open the webcam.', false);

  checkbox.position(180, 305);

  checkbox.style("font-family", "system-ui");

  checkbox.style("font-size", "10px");

  checkbox.style("color", color(210));

  checkbox.changed(openVideo);

  checkbox.hide();

​

​

  //sorry button

  sorry = createButton('SORRY');

  sorry.mousePressed(pressed1);

  sorry.style('padding', '6px');

  sorry.size(80);

  sorry.position(370, 350);

  sorry.hide();

​

  //back button

  back = createButton('BACK');

  back.mousePressed(pressed2);

  back.style('padding', '6px');

  back.size(80);

  back.position(280, 350);

  back.hide();

​

  // back2

​

  back2 = createButton('BACK TO FRONT PAGE');

  back2.mousePressed(pressed2);

  //back2.style('padding', '6px');

  back2.size(150);

  back2.position(460, height - 40);

  back2.hide();

​

​

​

​

​

}

​

function draw() {

  if (sceneNum == 0) {

    agree.show();

    sorry.show();

    back.hide();

    checkbox.show();

  } else {

    agree.hide();

    sorry.hide();

    back.hide();

    checkbox.hide();

  }

​

  if (sceneNum == 2) {

    back2.show();

    button.show();

    tint_slider.show();

​

  } else {

    back2.hide();

    button.hide();

    tint_slider.hide();

  }

​

  switch (sceneNum) {

    case 0:

      background(50);

      push();

      scale(0.24);

      image(img2, 0, 0);

      pop();

      push();

      textFont(myFont);

      textSize(18);

      textAlign(CENTER);

      fill(210);

      text('This is a camera that illustrates your internal reactions', 320, 200);

      text('to annoying words commented on you.', 320, 230);

      textFont(myFontb);

      text('It requires the access of your webcam!', 320, 270);

      textSize(36);

      text('CAMERA INFO', 320, 110);

      pop();

      break;

​

​

​

​

    case 1:

      background(220);

      fill(50);

      push();

      scale(0.24);

      image(img1, 0, 0);

      pop();

      push();

      textFont(myFont);

      textSize(18);

      textAlign(CENTER);

      fill(190);

      text('Now click on the GO button.', 320, 250);

​

      pop();

      let d = dist(mouseX, mouseY, 320, 342);

      if (d < 32.3 && mouseIsPressed) {

        sceneNum = 2;

      }

​

      break;

​

​

    case 2:

​

      background(255);

​

​

      let t1 = tint_slider.value();

      push();

      tint(t1, 204, 200, 200);

      image(vid, 0, 0, w, h);

​

      textFont(myFont);

      textSize(12);

      fill(255)

      text("Change color filter:", 170, 454);

      pop();

​

​

​

      let positions = tracker.getCurrentPosition();

      if (positions.length > 0) {

        //if face is detected, you can do follow things:

        // create array for icons and marks

        pos1 = [

          [positions[0][0] - 10, positions[0][1]],

          [positions[0][0] - 40, positions[0][1] - 20],

          [positions[0][0] - 40, positions[0][1] + 20],

          [positions[0][0] - 75, positions[0][1] - 30],

          [positions[0][0] - 75, positions[0][1]],

          [positions[0][0] - 75, positions[0][1] + 30],

          [positions[0][0] - 110, positions[0][1] - 40],

          [positions[0][0] - 110, positions[0][1] - 10],

          [positions[0][0] - 110, positions[0][1] + 20],

          [positions[0][0] - 145, positions[0][1] - 50],

          [positions[0][0] - 145, positions[0][1] - 20],

          [positions[0][0] - 145, positions[0][1] + 10],

          [positions[0][0] - 180, positions[0][1] - 75],

          [positions[0][0] - 180, positions[0][1] - 45],

          [positions[0][0] - 180, positions[0][1] - 15],

          [positions[0][0] - 215, positions[0][1] - 100],

          [positions[0][0] - 215, positions[0][1] - 70],

          [positions[0][0] - 215, positions[0][1] - 40]

        ];

​

        pos2 = [

          [positions[14][0] + 10, positions[14][1]],

          [positions[14][0] + 40, positions[14][1] - 20],

          [positions[14][0] + 40, positions[14][1] + 20],

          [positions[14][0] + 75, positions[14][1] - 30],

          [positions[14][0] + 75, positions[14][1]],

          [positions[14][0] + 75, positions[14][1] + 30],

          [positions[14][0] + 110, positions[14][1] - 40],

          [positions[14][0] + 110, positions[14][1] - 10],

          [positions[14][0] + 110, positions[14][1] + 20],

          [positions[14][0] + 145, positions[14][1] - 50],

          [positions[14][0] + 145, positions[14][1] - 20],

          [positions[14][0] + 145, positions[14][1] + 10],

          [positions[14][0] + 180, positions[14][1] - 75],

          [positions[14][0] + 180, positions[14][1] - 45],

          [positions[14][0] + 180, positions[14][1] - 15],

          [positions[14][0] + 215, positions[14][1] - 100],

          [positions[14][0] + 215, positions[14][1] - 70],

          [positions[14][0] + 215, positions[14][1] - 40]

        ];

​

        //blendMode(DIFFERENCE);

        //ear effect

        strokeWeight(2);

        noFill();

        for (e = 0; e < 18; e++) {

          // add gradient for the color

          b = map(e, 0, width, 40, 150);

          //r = map(e,0,width,50,180);

          fill(60, 160, b);

          textAlign(CENTER);

          textSize(28);

          //textFont();

          text(mark[e], pos1[e][0], pos1[e][1]);

        }

        for (o = 0; o < 18; o++) {

          push();

          //b = map(o,0,width,40,150);

          noStroke();

          textFont(fontregular);

          fill(255, 102, 153);

          text(word[o], pos2[o][0], pos2[o][1]);

          pop();

        }

​

        if (dist(positions[47][0], positions[47][1], positions[53][0], positions[53][1]) > 30) {

          blendMode(DIFFERENCE);

          // mouth effect

          for (i = 0; i < width; i += 8) {

            r = map(i, 0, width, 0, 150);

            noFill();

            stroke(r, 140, 255);

            arc(positions[57][0], positions[57][1], i, i, 45, 135);

          }

          // Tear drops

          for (x = 0; x < width; x += 4) {

            noStroke();

            r = map(x, 0, width, 0, 255);

            fill(r, 100, 255);

            ellipse(positions[27][0], positions[27][1] + x, 14);

            ellipse(positions[32][0], positions[32][1] + x, 14);

          }

          push();

          noStroke();

          textFont(font);

          textSize(24);

          textAlign(CENTER);

          fill(255, 204, 204)

          text('SHUT UP', positions[57][0], positions[57][1] + 70);

          pop();

        } else {

          blendMode(BLEND);

​

​

​

        }

      }

      break;

​

    case 3:

      agree.hide();

      sorry.hide();

      back.show();

      background(220);

      fill(50);

      push();

      scale(0.24);

      image(img2, 0, 0);

      pop();

      push();

      textFont(myFont);

      textSize(18);

      textAlign(CENTER);

      fill(190);

      text('Welcome to try if you change mind.', 320, 250);

​

      pop();

​

      break;

  }

}

​

​

function takephoto() {

  saveCanvas('photo', 'png');

}

​

function pressed() {

  sceneNum++;

}

​

function pressed1() {

  sceneNum = 3;

}

​

function pressed2() {

  sceneNum = 0;

}

​

function openVideo() {

  vid = createCapture(VIDEO);

  vid.size(width, height);

  vid.hide();

  tracker = new clm.tracker();

  tracker.init();

  tracker.start(vid.elt);

}