let zoomFrameBottom;

let capture;

let poseNet;

let eyelX = 0;

let eyelY = 0;

let eyerX = 0;

let eyerY = 0;

let colorLeft;

let colorRight;

​

function preload(){

  zoomFrameTop = loadImage("/assets/zoom_top.png");

  zoomFrameBottom = loadImage("/assets/zoom_bottom.png");

}

​

function setup() {

    createCanvas(640, 480);

    rectMode(CENTER);

    colorLeft = color(255, 0, 0, 100);

    colorRight = color(0,255,0,100);

    capture = createCapture(VIDEO);

    capture.hide();

    zoomFrameTop.loadPixels();

    zoomFrameBottom.loadPixels();

    zoomFrameTop.updatePixels();

    zoomFrameBottom.updatePixels();

    noSmooth();

    poseNet = ml5.poseNet(capture, modelReady);

    poseNet.on('pose', gotPoses);

}

​

//this funtion was adopted and modified, check out Daniel Shiffman's orignial code on: https://www.youtube.com/watch?v=OIo-DIOkNVg

function gotPoses(poses) {

  if (poses.length > 0) {

    let erx = poses[0].pose.keypoints[2].position.x;

    let ery = poses[0].pose.keypoints[2].position.y;

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

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

    eyelX = lerp(eyelX, elx, 0.9);

    eyelY = lerp(eyelY, ely, 0.9);

    eyerX = lerp(eyerX, erx, 0.9);

    eyerY = lerp(eyerY, ery, 0.9);

  }

}

​

function modelReady() {

  console.log('model ready');

}

​

function draw() {

    //invert the video

    push();

    translate(width,0);

    scale(-1, 1);

    image(capture, 0, 0);

    fill(colorLeft);

    strokeWeight(5);

    line(eyelX-24, eyelY, eyerX+24, eyerY);

  noStroke()

    rect(eyerX, eyerY, 60, 40);

    fill(colorRight);

    rect(eyelX, eyelY, 60, 40);

    pop();

    image(zoomFrameTop, 0, 0, width, 30);

    image(zoomFrameBottom, 0, height-35, width, 35);

}

// if mouse is clicked, toggle between normal and colorblind. 

function mousePressed(){

  colorLeft = color(144, 129, 54,200);

  colorRight = color(149, 113, 50,200);

​

  let bottom_zoom_green;

  let bottom_zoom_red;

  let bottom_zoom_blue;

  let top_zoom_green;

  let top_zoom_red;

  let top_zoom_blue;

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

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

        top_zoom_green = green(zoomFrameTop.get(x,y));

        top_zoom_red = red(zoomFrameTop.get(x,y));

        top_zoom_blue = blue(zoomFrameTop.get(x,y));

        if(top_zoom_red >= 22 && top_zoom_red <=40 && top_zoom_green >= 50 && top_zoom_blue >= 50 ){

          zoomFrameTop.set(x, y, color(149, 113, 50));

          zoomFrameTop.updatePixels();

        }  

      }

    }

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

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

      bottom_zoom_green = green(zoomFrameBottom.get(x,y));

      bottom_zoom_red = red(zoomFrameBottom.get(x,y));

      bottom_zoom_blue = blue(zoomFrameBottom.get(x,y));

      if(bottom_zoom_red >= 22 && bottom_zoom_red <=40 && bottom_zoom_green >= 50 && bottom_zoom_blue >= 50 ){

          zoomFrameBottom.set(x, y, color(149, 113, 50));

          zoomFrameBottom.updatePixels();

      }

      if(bottom_zoom_red >= 120 && bottom_zoom_red <= 255 && bottom_zoom_green <=120 && bottom_zoom_blue <=120){

          zoomFrameBottom.set(x, y, color(144, 129, 54));

          zoomFrameBottom.updatePixels();

      }

    }

  }

}