//Reference(face-tracking) ML5 PoseNet: https://learn.ml5js.org/#/reference/posenet

//If there's an error when playing, try to use the Present mode under File, Share.

​

let webcam;

let poseNet;

let faceX;

let faceY;

let faceWidth;

let faceHeight;

let skinColor = true;

let col = 255;

let filter1;

let angle = 0;

let yloc = 100;

let val = 14;

​

let scene = 0;

let eximg1;

let eximg2;

let eximg3;

let sbutton;

let cbutton;

let bbutton;

let bbutton2;

let bbutton3;

let ebutton;

let ebutton2;

let lbutton;

​

function preload() {

  eximg1 = loadImage('ex1.png');

  eximg2 = loadImage('ex2.png');

  eximg3 = loadImage('ex3.png');

}

​

function setup() {

  createCanvas(640, 480);

​

  //create webcam

  webcam = createCapture(VIDEO);

  webcam.size(640, 480);

  pixelDensity(1);

  webcam.hide();

​

  //console.log(ml5);

​

  poseNet = ml5.poseNet(webcam, modelReady);

  poseNet.on('pose', gotPoses);

​

  //Start button

  sbutton = createButton('START');

  sbutton.position(270, 390);

  sbutton.mousePressed(proceed);

  sbutton.size(100, 40);

  sbutton.style('background-color', '#ff8c00');

  sbutton.style('color', '#fff');

  sbutton.hide();

  //Try Camera button

  cbutton = createButton('TRY CAMERA');

  cbutton.position(240, 390);

  cbutton.mousePressed(proceed);

  cbutton.size(150, 40);

  cbutton.style('background-color', '#e6574e');

  cbutton.style('color', '#fff')

  cbutton.hide();

  //Back button 1

  bbutton = createButton('GO BACK');

  bbutton.position(50, 390);

  bbutton.mousePressed(goBack);

  bbutton.size(100, 40);

  bbutton.style('background-color', '#ff938f')

  bbutton.style('color', '#fff');

  bbutton.hide();

  //Back button 2

  bbutton2 = createButton('GO BACK');

  bbutton2.position(50, 390);

  bbutton2.mousePressed(goBack);

  bbutton2.size(100, 40);

  bbutton2.style('background-color', '#ff938f')

  bbutton2.style('color', '#fff');

  bbutton2.hide();

  //Back button 3

  bbutton3 = createButton('GO BACK');

  bbutton3.position(50, 390);

  bbutton3.mousePressed(acknow);

  bbutton3.size(100, 40);

  bbutton3.style('background-color', '#ff938f')

  bbutton3.style('color', '#fff');

  bbutton3.hide();

  //Example button

  ebutton = createButton('SEE EXAMPLES');

  ebutton.position(460, 390);

  ebutton.mousePressed(example);

  ebutton.size(150, 40);

  ebutton.style('background-color', '#ff938f')

  ebutton.style('color', '#fff');

  ebutton.hide();

  //Example button 2

  ebutton2 = createButton('SEE EXAMPLES');

  ebutton2.position(460, 390);

  ebutton2.mousePressed(example);

  ebutton2.size(150, 40);

  ebutton2.style('background-color', '#ff938f')

  ebutton2.style('color', '#fff');

  ebutton2.hide();

  //Leave button

  lbutton = createButton('LEAVE');

  lbutton.position(460, 390);

  lbutton.mousePressed(bye);

  lbutton.size(150, 40);

  lbutton.style('background-color', '#e6574e')

  lbutton.style('color', '#fff');

  lbutton.hide();

​

}

​

function modelReady() { //to check if poseNet is ready and loaded

  console.log('model ready');

}

​

function gotPoses(poses) { //check the location of each point in console log 

  console.log(poses);

​

  faceX = poses[0].pose.keypoints[0].position.x;

  faceY = poses[0].pose.keypoints[0].position.y-60;

  faceWidth = poses[0].pose.keypoints[4].position.x - poses[0].pose.keypoints[3].position.x;

  faceHeight = (poses[0].pose.keypoints[2].position.x - poses[0].pose.keypoints[1].position.x) * 3;

​

}

​

function draw() {

  background(61);

​

  //Interface buttons

  if (scene == 0) {

    sbutton.show();

  } else {

    sbutton.hide();

  }

  if(scene == 1){

    cbutton.show();

    bbutton.show();

    ebutton.show();

  } else {

    cbutton.hide();

    bbutton.hide();

    ebutton.hide();

  }

  if(scene == 2){

    bbutton2.show();

    ebutton2.show();

  } else {

    bbutton2.hide();

    ebutton2.hide();

  }

  if(scene == 3){

    bbutton3.show();

    lbutton.show();

  } else {

    bbutton3.hide();

    lbutton.hide();

  }

​

​

  //Scenes

  switch (scene) {

    case 0:

      fill(255);

      textStyle(BOLD);

      textSize(30);

      textAlign(CENTER, CENTER);

      text('Skin Brightening Camera Filter?', 320, 80);

      textSize(20);

      textStyle(NORMAL);

      text('By: Grace Guo', 320, 120);

​

      textSize(24);

      text('About This Project', 320, 200);

      textSize(16);

      textStyle(NORMAL);

      text('In this project, I designed a camera with a face-tracking filter to address the ', 320, 240);

      text('phenomena that Chinese AI picture editing tools automatically brightens the skin', 320, 270);

      text('of the user unless otherwise manually adjusted. This could mislead the user and set', 320, 300);

      text('biased racial opinions as the majority user of these applications are the younger', 320, 330);

      text('generations in China.', 320, 360);

      break;

​

    case 1:

      textSize(28);

      text('Camera Acknowledgement', 320, 60);

      textSize(16);

      text('By clicking the TRY CAMERA button, you will give permission to this program', 320, 180);

      text('to use your camera for the experience. Please note that we will not store', 320, 210);

      text('nor share your images after you using this program.', 320, 240);

      text('* If you prefer not to open your camera, click on the SEE EXAMPLE button.', 320, 300);

      text('You will be able to try camera after viewing the examples as well.', 320, 330);

      break;

​

    case 2:

      //Filter Camera

      // filter1 = createGraphics(200, 200);

      // filter1.fill(col);

      // filter1.textAlign(CENTER, CENTER);

      // filter1.textSize(48);

      // filter1.text('FILTER', 100, yloc);

​

      image(webcam, 0, 0);

​

      //mirror video

      scale(1, 1);

​

      //webcam video background

      // ambientLight(255);

      // noStroke();

      // texture(webcam);

      // plane(640, 480);

​

      //round filter

      noStroke();

      fill(col, 100);

      ellipse(faceX, faceY, faceWidth, faceHeight);

​

      // changeColor();

​

      // textbox();

//       translate(faceX, faceY);

//       scale(-1, 1);

​

//       rotateX(angle);

//       rotateY(angle);

//       texture(filter1);

//       box(180);

​

//       angle += 0.03;

      break;

​

    case 3:

      fill(255);

      textSize(30);

      textAlign(CENTER, CENTER);

      text('EXAMPLES', 320, 40);

      image(eximg1, 100, 80, 200, 150);

      image(eximg2, 350, 80, 200, 150);

      image(eximg3, 210, 250, 200, 150);

      break;

​

    case 4:

      // webcam.hide();

      textSize(24)

      textAlign(CENTER, CENTER);

      text('Thank you for your time!', 320, 200);

      text('We will not store nor share your images.', 320, 300);

      break;

  }

​

​

}

​

function mouseClicked() {

  col -= val;

  if (col <= 0 || col >= 255) {

    val = -val;

  }

​

}

​

function proceed() {

  scene += 1;

}

​

function goBack() {

  scene -= 1;

}

​

function bye(){

  scene = 4;

}

​

function example(){

  scene = 3;

}

​

function acknow(){

  scene = 1;

}