​

//this will hold onto all info about webcam 

let video, poseNet;

​

let noseX = 0;

let noseY = 0;

​

let rightEyeX = 0;

let rightEyeY = 0;

let leftEyeX = 0;

let leftEyeY = 0;

​

let fly, flyX, flyY;

​

let leftHandX = 0;

let leftHandY = 0;

​

let rightHandX = 0;

let rightHandY = 0;

​

let yes, no, imgExample;

let sceneNum = 0;

​

​

​

​

function setup() {

  createCanvas(600, 400);

​

  //connects to webcam 

  //console.log(ml5);

​

  fly = loadImage('fly.png');

  imgExample = loadImage('imgexample.png');

​

  //use model ready so we can have a function that tells me when it's finished loading the model

  poseNet = ml5.poseNet(video);

​

  // this is an event for the pose. When a pose is detected (meaning someone is in frame), GotPoses will be called back from the function and pose will be an array of pose info. The array consists of facial features organized into points.

  poseNet.on('pose', gotPoses);

  startFly = new StartFly();

  theExample = new Example();

  yes = createButton("Yes");

  no = createButton("No");

  yes.mousePressed(addOne);

  no.mousePressed(subtractOne);

}

​

​

​

​

​

function draw() {

  if (sceneNum == 0) {

    theExample.text();

    theExample.img();

    theExample.theButton();

  } else { 

    startFly.theFly();

  }

}

​

​

​

​

​

​

function gotPoses(pose) {

  //console.log(pose); use to check 

​

  // if statement makes sure that when there isn't a pose in sight (face, body, etc), then the code won't keep running until a pose is on the canvas

​

  if (pose.length > 0) {

​

    //nose

    let nX = pose[0].pose.keypoints[0].position.x;

    let nY = pose[0].pose.keypoints[0].position.y;

    noseX = lerp(noseX, nX, 0.3);

    noseY = lerp(noseY, nY, 0.3);

​

    //eyes

    let eyeX = pose[0].pose.keypoints[1].position.x;

    let eyeY = pose[0].pose.keypoints[1].position.y;

    rightEyeX = lerp(rightEyeX, eyeX, 0.6);

    rightEyeY = lerp(rightEyeY, eyeY, 0.6);

​

    //leftHand or rightHand is used for grabbing the array positions for x and y. These will be used to house points to compare to where the fly is

​

    leftHandX = pose[0].pose.keypoints[9].position.x;

    leftHandY = pose[0].pose.keypoints[9].position.y;

    //console.log(leftHandX);

    //console.log(leftHandY);

​

    rightHandX = pose[0].pose.keypoints[10].position.x;

    rightHandY = pose[0].pose.keypoints[10].position.y;

    //console.log(rightHandX);

    //console.log(rightHandX);

  }

}

​

​

​

​

​

​

​

​

class StartFly {

  constructor(x, y) { // a special method that creates the car object   

    this.x = x;

    this.y = y;

  }

​

  theFly() {

    video = createCapture(VIDEO);

    video.hide();

    image(video, 0, 0);

    let d = dist(noseX, noseY, rightEyeX, rightEyeY);

​

    flyX = noseX - 200;

    flyY = noseY - 200;

    image(fly, noseX - 200, noseY - 200, 75, 50);

​

​

    //this if() compares the left hand to the fly's area. Since the fly is above the nose by 200 x and 200 y, this if checks if the hand is within a 50 px range over the fly. If it's in that area, the fly's location must redirect. This involves changing the position of the nose in the array so the fly will move elsewhere toward that new position. It must go back to the original nose position after. 

​

    //console.log(leftHandX, flyX, leftHandY, flyY);

​

    if ((leftHandX >= flyX && leftHandX <= flyX + 75) && (leftHandY >= flyY && leftHandY <= flyY + 75)) {

​

      // console.log(leftHandX, flyX, leftHandY, flyY);

​

      //examples of ways to change where the fly will go based on array positions 

      nX = 300;

      nY = 50;

    }

  }

}

​

​

​

​

​

​

function saysNo () {

  background(255);

  text("No problem! Feel free to come back when you feel comfortable.");

}

​

​

​

​

function addOne() { 

  sceneNum = 1;

  background(255);

}

​

​

function subtractOne() { 

  sceneNum = 0;

}

​

​

​

class Example {

  constructor(x, y) { // a special method that creates the car object   

    this.x = x;

    this.y = y;

  }

​

  text() {

    fill(0);

    textSize(32);

    text("The Fly Filter", 190, 75);

​

    fill(100);

    textSize(13);

    text("Your webcam is needed to use the filter.", 180, 310);

    textSize(16);

    text("Are you comfortable showing your face and surroundings?", 100, 335);

  }

​

  img() {

    image(imgExample, 150, 100, 300, 200);

  }

​

  theButton() {

    //creates button

    yes.position(250, 350, 500);

    no.position(300, 350, 500);

  }

}