*------------------------------------*

          USE IN CHROME

*------------------------------------*

​

Based off of the work by Danielle Gauthier

https://editor.p5js.org/danielle.gauthier6/sketches/2HvSH9oRx 

​

ml5 Team Facemesh_Webcam

https://editor.p5js.org/ml5/sketches/Facemesh_Webcam

​

Hour of Code with p5.js and PoseNet; The Coding Train

https://www.youtube.com/watch?v=EA3-k9mnLHs

​

Time Help: https://github.com/danweiner/learning-p5-js/blob/master/lesson-5/example-10.04-timer/sketch.js

​

Fading: https://editor.p5js.org/remarkability/sketches/rtM08miUD

​

Get Camera sketch by Ellen Nickles.

*/

​

let video;

let facemesh;

let predictions = [];

​

//Variable to find cameras

const cameras = [];

let num = 0;

​

//Variables for Coordinates

​

//Eyes - Used to calculate centers of each eye

let leftEyeTopX = 0;

let leftEyeTopY = 0;

let leftEyeBtmX = 0;

let leftEyeBtmY = 0;

​

let rightEyeTopX = 0;

let rightEyeTopY = 0;

let rightEyeBtmX = 0;

let rightEyeBtmY = 0;

​

//Eye Img Coordinates

let leftEyeImgX;

let leftEyeImgY;

let rightEyeImgX;

let rightEyeImgY;

let eyeDistance; //Use for mapping of all images scaling

​

//CheekBones Img Coordinates

let leftCheekImgX;

let leftCheekImgY;

let rightCheekImgX;

let rightCheekImgY;

​

//Lips - Used to calculate centers of lips

let topLipX;

let topLipY;

let btmLipX;

let btmLipY;

​

//Img Coordinates

let lipsImgX;

let lipsImgY;

//Top Lip

//Btm Lip

​

//Face Bright Mask

let brightMaskX;

let brightMaskY;

​

//Bounding Box for Brightness Mask Coordinate Variables

let boxTopLeftX;

let boxTopLeftY;

let boxBtmRightX;

let boxBtmRightY;

​

let maskHeight;

let maskWidth;

​

//Variables for Images

let eyeImg;

let leftCheekBoneImg;

let rightCheekBoneImg;

let lipsImg;

//let foreheadImg;

//let chinImg;

let break1;

let break2;

let break3;

let break4;

let break5;

let break6;

let fish;

​

//Variable for Sounds

let doNothing;

let entranceMusic;

let faceChanges;

let fishAppears;

let redlineAppears;

​

//Time Variables

let savedTime;

let totalTime = 1000;

let fadeInRate = 0;

let xTest = 0;

let totalPressed = 0;

let secondsFromStart;

​

let pg;

​

function preload() {

  //load face images

  eyeImg = loadImage("images/eye.png");

  leftCheekBoneImg = loadImage("images/leftCheek.png");

  rightCheekBoneImg = loadImage("images/rightCheek.png");

  lipsImg = loadImage("images/Lips.png");

​

  //load glass images

  break1 = loadImage("images/glass_1.png");

  //break2 = loadImage("images/glass_2.png");

  break3 = loadImage("images/glass_3.png");

  break4 = loadImage("images/glass_4.png");

  break5 = loadImage("images/glass_5.png");

  break6 = loadImage("images/glass_6.png");

  fish = loadImage("images/fish.JPG");

}

​

function setup() {

  //pixelDensity(1);

  //createCanvas(640, 480);

  createCanvas(windowWidth, windowHeight);

  getConnectedCameras(getVideo);

   const constraints = {

    video: {

      width: 1280,

      height: 720,

    },

  };

​

  video = createCapture(constraints, captureLoaded);

  // Hide the video element, and just show the canvas

  video.hide();

  //video = createCapture(VIDEO);

  video.size(windowWidth, windowHeight);

​

/*

  //Test to see that ml5 has been attached to sketch

  //console.log(ml5);

  // facemesh = ml5.facemesh(video, modelReady);

​

  // This sets up an event that fills the global variable "predictions" with an array every time new predictions are made

  facemesh.on("predict", (results) => {

    predictions = results;

    //console.log(predictions);

​

    if (predictions.length == 0) {

      return;

    }

    //Right Eye Coordinates

    rightEyeTopX = predictions[0].annotations.rightEyeUpper0[3][0];

    rightEyeTopY = predictions[0].annotations.rightEyeUpper0[3][1];

    rightEyeBtmX = predictions[0].annotations.rightEyeLower0[4][0];

    rightEyeBtmY = predictions[0].annotations.rightEyeLower0[4][1];

​

    //Left Eye Coordinates

    leftEyeTopX = predictions[0].annotations.leftEyeUpper0[3][0];

    leftEyeTopY = predictions[0].annotations.leftEyeUpper0[3][1];

    leftEyeBtmX = predictions[0].annotations.leftEyeLower0[4][0];

    leftEyeBtmY = predictions[0].annotations.leftEyeLower0[4][1];

​

    //Right Cheek Coordinates

    rightCheekImgX = predictions[0].annotations.rightCheek[0][0];

    rightCheekImgY = predictions[0].annotations.rightCheek[0][1];

​

    //Left Cheek Coordinates

    leftCheekImgX = predictions[0].annotations.leftCheek[0][0];

    leftCheekImgY = predictions[0].annotations.leftCheek[0][1];

​

    //Lip Coordinates

    topLipX = predictions[0].annotations.lipsUpperOuter[5][0];

    topLipY = predictions[0].annotations.lipsUpperOuter[5][1];

    btmLipX = predictions[0].annotations.lipsLowerOuter[4][0];

    btmLipY = predictions[0].annotations.lipsLowerOuter[4][1];

​

    //Bounding Box Coordinates

    boxTopLeftX = predictions[0].boundingBox.topLeft[0][0];

    boxTopLeftY = predictions[0].boundingBox.topLeft[0][1];

    boxBtmRightX = predictions[0].boundingBox.bottomRight[0][0];

    boxBtmRightY = predictions[0].boundingBox.bottomRight[0][1];

  });

  */

​

  //Set features sizes to 0 until the model starts

  let eyeDiameter = 0;

  let cheekSize = 0;

  let lipSize = 0;

​

  //Time tracking

  savedTime = millis();

  pg = createGraphics(1280, 720);

}

​

function captureLoaded() {

  console.log("i see you!");

  facemesh = ml5.facemesh(video, modelReady); 

}

​

function modelReady() {

  console.log("Model Ready!");

   facemesh.on("predict", (results) => {

    predictions = results;

    //console.log(predictions);

​

    if (predictions.length == 0) {

      return;

    }

    //Right Eye Coordinates

    rightEyeTopX = predictions[0].annotations.rightEyeUpper0[3][0];

    rightEyeTopY = predictions[0].annotations.rightEyeUpper0[3][1];

    rightEyeBtmX = predictions[0].annotations.rightEyeLower0[4][0];

    rightEyeBtmY = predictions[0].annotations.rightEyeLower0[4][1];

​

    //Left Eye Coordinates

    leftEyeTopX = predictions[0].annotations.leftEyeUpper0[3][0];

    leftEyeTopY = predictions[0].annotations.leftEyeUpper0[3][1];

    leftEyeBtmX = predictions[0].annotations.leftEyeLower0[4][0];

    leftEyeBtmY = predictions[0].annotations.leftEyeLower0[4][1];

​

    //Right Cheek Coordinates

    rightCheekImgX = predictions[0].annotations.rightCheek[0][0];

    rightCheekImgY = predictions[0].annotations.rightCheek[0][1];

​

    //Left Cheek Coordinates

    leftCheekImgX = predictions[0].annotations.leftCheek[0][0];

    leftCheekImgY = predictions[0].annotations.leftCheek[0][1];

​

    //Lip Coordinates

    topLipX = predictions[0].annotations.lipsUpperOuter[5][0];

    topLipY = predictions[0].annotations.lipsUpperOuter[5][1];

    btmLipX = predictions[0].annotations.lipsLowerOuter[4][0];

    btmLipY = predictions[0].annotations.lipsLowerOuter[4][1];

​

    //Bounding Box Coordinates

    boxTopLeftX = predictions[0].boundingBox.topLeft[0][0];

    boxTopLeftY = predictions[0].boundingBox.topLeft[0][1];

    boxBtmRightX = predictions[0].boundingBox.bottomRight[0][0];

    boxBtmRightY = predictions[0].boundingBox.bottomRight[0][1];

  });

​

}

​

function draw() {

  console.log(secondsFromStart, totalPressed);

  //Reset Image Mode to Corner

  imageMode(CORNER);

   secondsFromStart = millis(); //set seconds from start to millis.

  //change to start counting from when draw starts and person has pressed button

   //console.log(secondsFromStart);

​

  image(video, 0, 0, 1280, 720);

   //image(video, 0, 0, windowWidth, windowHeight);

   // We can call both functions to draw all keypoints

  //drawKeypoints();

​

  /****************************************/

​

  //Right Eye Img Coordinates

  rightEyeImgX = rightEyeTopX - (rightEyeTopX - rightEyeBtmX) / 2;

  rightEyeImgY = rightEyeTopY - (rightEyeTopY - rightEyeBtmY) / 2;

​

  //Left Eye Img Coordinates

  leftEyeImgX = leftEyeTopX - (leftEyeTopX - leftEyeBtmX) / 2;

  leftEyeImgY = leftEyeTopY - (leftEyeTopY - leftEyeBtmY) / 2;

​

  //Mapping of Iris size to distance from screen

  eyeDistance = leftEyeTopX - rightEyeTopX;

  eyeDiameter = map(eyeDistance, 30, 200, 5, 45);

​

  /****************************************/

​

  //Map eyeDistance to cheekSizes

  cheekSize = map(eyeDistance, 30, 200, 20, 450);

  //console.log(cheekSize, eyeDiameter);

​

  //Lips Img Coordinates

  lipsImgX = topLipX - (rightEyeTopX - rightEyeBtmX) / 2;

  lipsImgY = topLipY - (topLipY - btmLipY) / 2;

​

  /****************************************/

​

  //Map eyeDistance to lipSizes

  lipSize = map(eyeDistance, 30, 200, 20, 450);

​

  /****************************************/

​

  //Caluclate Center Coordinates for Brightness Mask

  brightMaskX = boxTopLeftX - (boxTopLeftX - boxBtmRightX) / 2;

  brightMaskY = boxTopLeftY - (boxTopLeftY - boxBtmRightY) / 2;

​

  //Calculate Height and Width of Brightness Mask

  maskHeight = boxTopLeftY - boxBtmRightY;

  maskWidth = boxTopLeftX - boxBtmRightX;

​

  /****************************************/

​

  // calculate how much time has passed

  let passedTime = millis() - savedTime;

  //console.log(passedTime, savedTime, xTest);

​

  if (passedTime > totalTime) {

    //console.log("1 seconds have passed!");

    xTest++; 

    savedTime = millis(); // Save the current time to restart timer

​

    /*

    fadeInRate++; //slower if taking forever and faster if constant interation

    //if (fadeInRate = 255){something}

    */

  }

​

  // console.log(xTest, totalPressed);

​

  /****************************************/

​

  //Fade Testing

  /* 

  if (xTest >= 4) {

    imageMode(CENTER);

    //Right Cheek Img Placement

  tint(255, fadeInRate);

  image(

    rightCheekBoneImg,

    rightCheekImgX,

    rightCheekImgY,

    cheekSize,

    cheekSize

  );

  } 

  */

​

  /****************************************/

​

  imageMode(CENTER);

​

  //Appear after 16 seconds

  if (xTest >= 16) {

    //Right Eye Img Placement

    image(eyeImg, rightEyeImgX, rightEyeImgY, eyeDiameter, eyeDiameter);

​

    //Left Eye Img Placement

    image(eyeImg, leftEyeImgX, leftEyeImgY, eyeDiameter, eyeDiameter);

  }

​

  /**********/

​

  //Appear after 60 seconds

  if (xTest >= 60) {

    //Right Cheek Img Placement

    image(

      rightCheekBoneImg,

      rightCheekImgX,

      rightCheekImgY,

      cheekSize,

      cheekSize

    );

​

    //Left Cheek Img Placement

    image(leftCheekBoneImg, leftCheekImgX, leftCheekImgY, cheekSize, cheekSize);

  }

​

  /**********/

​

  //Appear after 20 seconds

  if (xTest >= 20) {

    //Lips Img Placement

    image(lipsImg, lipsImgX, lipsImgY, lipSize, lipSize);

  }

​

  /**********/

​

  //Appear after 40 seconds

  if (xTest >= 40) {

    //Brightness facemask

    noStroke();

    fill(255, 255, 255, 70);

    ellipse(brightMaskX, brightMaskY, maskWidth, maskHeight);

  }

​

   //End Experience 

   // Need to make sure that the counting starts after person preses start which will unhide drawing of canvas

   // does this need to be in setup?

  if ((secondsFromStart >= 90000) && (totalPressed < 22)) {

    let s = 'Let those who are free be free indeed';

    let t = 'The End';

// fill(50);

// text(s, 0, 0, width, height); // Text wraps within text box

    pg.background(0);

  pg.textSize(32);

  pg.fill(255);

  pg.text(s, pg.width / 4, pg.height / 4, width, height);

    pg.text(t, pg.width / 2, pg.height / 2, width, height);

  imageMode(CORNER);

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

  }

​

    /****************************************/

    //Sounds Placement and Times Events  

imageMode(CORNER);

  if (totalPressed >= 3) {

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

​

    stroke("red");

    strokeWeight(1); // Default

    line(0, 200, width, 200);

  }

​

  if (totalPressed >= 6) {

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

​

    stroke("red");

    strokeWeight(4); // Thicker

    line(0, 400, width, 400);

  }

​

  if (totalPressed >= 9) {

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

​

    stroke("red");

    strokeWeight(10); // Beastly

    line(0, 50, width, 50);

  }

​

  if (totalPressed >= 12) {

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

​

    stroke("red");

    strokeWeight(10); // Beastly

    line(0, 300, width, 300);

  }

​

  if (totalPressed >= 16) {

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

​

    stroke("red");

    strokeWeight(10); // Beastly

    line(0, 250, width, 250);

  }

​

  if (totalPressed >= 20) {

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

​

    stroke("red");

    strokeWeight(10); // Beastly

    line(0, 600, width, 600);

  }

  if (totalPressed >= 22) {

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

   textSize(32);

text('The End', 10, 30);

​

  }

}

​

​

/****************************************/

​

​

//Touchscreen Function

function touchStarted() {

  xTest = 0;

  totalPressed++;

  console.log(totalPressed);

}

​

​

/****************************************/

​

function mousePressed() {

  xTest = 0;

  totalPressed++;

  console.log(totalPressed);

}

​

function getConnectedCameras(callback) {

  navigator.mediaDevices.enumerateDevices().then((devices) => {

    const filtered = devices.filter((device) => device.kind === "videoinput");

    callback(filtered);

  });

}

​

function getVideo(webcams) {

  for (let webcam of webcams) {

    const index = webcams.indexOf(webcam);

    const capabilities = webcam.getCapabilities();

    const constraints = {

      video: {

        deviceId: `${webcam.deviceId}`,

        width: `${capabilities.width.max}`,

        height: `${capabilities.height.max}`,

      },

    };

    cameras[index] = createCapture(constraints);

    cameras[index].hide();

​

    console.log(

      `cameras[${index}]\n${webcam.label}\nMax width:\t${capabilities.width.max}\nMax height:\t${capabilities.height.max}\n`

    );

  }

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const keypoints = predictions[i].scaledMesh;

​

    // Draw facial keypoints.

    for (let j = 0; j < keypoints.length; j += 1) {

      const [x, y] = keypoints[j];

​

      fill(0, 255, 0);

      ellipse(x, y, 5, 5);

    }

  }

}