let currentTimer;

let button; //start button

let startTime;

let state = 0;

const focustime = 25; //25min focus

const breaktime = 5; //5min break

​

//webcam

let capture;

let poseNet;

let leftEyeX = 0;

let leftEyeY = 0;

let rightEyeX = 0;

let rightEyeY = 0;

let d; //distance between the eyes

let sg; //sunglasses

let pt; //palmtrees

​

function preload() {

  //image source: https://pngimg.com/uploads/sunglasses/sunglasses_PNG147.png

  sg = loadImage("sunglasses_PNG147.png");

  //image source: <a href='https://pngtree.com/so/palm'>palm png from pngtree.com/</a>

  pt = loadImage("palm_tree_PNG93356.png");

}

​

function setup() {

  createCanvas(500, 500);

  background("#E5EED3");

  textFont("Nunito");

​

  // Start button

  button = createButton("Start Focus!");

  button.style("color", "#FFFFFF");

  button.style("background-color", "#407BFF");

  button.size(400, 100);

  button.position(50, 200);

  button.style("font-family", "Nunito");

  button.style("font-size", "50px");

  button.mousePressed(changeButtonState);

​

  //poseNet setup

  capture = createCapture(VIDEO);

  capture.size(500, 300);

  capture.hide();

  poseNet = ml5.poseNet(capture, modelReady);

  poseNet.on("pose", myPoses);

}

​

//make sure poseNet modelReady is loaded and ready

function modelReady() {

  console.log("model ready!");

}

​

//get positions from the poseNet array

function myPoses(poses) {

  if (poses.length > 0) {

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

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

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

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

  }

}

​

function draw() {

  //show focus timer

  if (state == 1) {

    if (focus) {

      if (show(focustime, color("#213E82"))) {

        focus = false;

        startTime = millis();

      }

      fill("#FBC740");

      textSize(30);

      text("You got this!", 170, 480);

​

      //webcam on

      image(capture, 0, 0, 500, 300);

​

      //set distance between the eyes to make the size of the ellipses correspond to the size of the captured eyes

      d = dist(leftEyeX, leftEyeY, rightEyeX, rightEyeY);

​

      //left eye ball

      push();

      fill(255);

      ellipse(leftEyeX, leftEyeY, d);

      fill(0);

      ellipse(leftEyeX, leftEyeY, d / 2);

      pop();

​

      //right eye ball

      push();

      fill(255);

      ellipse(rightEyeX, rightEyeY, d);

      fill(0);

      ellipse(rightEyeX, rightEyeY, d / 2);

      pop();

    } else {

      //show break timer

      if (show(breaktime, color("#FBC740"))) {

        focus = true;

        startTime = millis();

      }

      fill("#213E82");

      textSize(30);

      text("You did it! Time to stretch and relax", 10, 480);

​

      //webcam on

      image(capture, 0, 0, 500, 300);

​

      //wear sunglasses

      image(sg, rightEyeX - 80, rightEyeY - 30, d * 3, d * 1.5);

​

      //palm trees

      image(pt, 0, 10, 200, 300);

      image(pt, 10, 100, 133, 200);

      image(pt, 350, 10, 200, 300);

      image(pt, 360, 100, 133, 200);

    }

  } else {

    button.show();

  }

}

​

//display focus/break timer

function show(time, col) {

  background(col);

  //convert time

  let currentTimer = int((time * 60 * 1000 - (millis() - startTime)) / 1000);

  let currentMin = int(currentTimer / 60);

  let currentSec = currentTimer - currentMin * 60;

​

  //if minute is less than 10, add 0 to display

  if (currentMin < 10) {

    currentMin = "0" + currentMin;

  }

  //if second is less than 10, add 0 to display

  if (currentSec < 10) {

    currentSec = "0" + currentSec;

  }

​

  //display time as a string

  let displayCurrentTime = currentMin + ":" + currentSec;

​

  //slider timer

  let slider = map(

    (time * 60 * 1000 - (millis() - startTime)) / 1000,

    0,

    time * 60,

    width,

    0

  );

  push();

  noStroke();

  fill(0, 80);

  rect(0, 300, slider, 200);

  pop();

​

  //display timer

  textSize(150);

  text(displayCurrentTime, 50, 430);

  return currentTimer <= 0;

}

​

//hide button and set state to 1 when start button is pressed

function changeButtonState() {

  state = 1;

  button.hide();

  startTime = millis();

}

​