Focus! I’m watching you!

The final project for Creative Coding Fall 2021

Source Code

Procrastination is something a lot of people struggle with. Having phones and laptops makes us work more efficiently but also makes it so much easier to put off some tasks for social media and entertainment. I was procrastinating a lot during this finals period and struggling to come up with an idea for the Creative Coding final project… so I decided to turn this struggle into a project.

One thing I find helpful when it’s hard to focus is setting a Pomodoro timer using an App called Focus. I’m sure a lot of people are familiar with the Pomodoro technique but it is a method to break work into intervals — usually 25 minute work time with a 5-minute break in between. It makes it easier to sit down and start working because all you have to do is focus for just 25 minutes doing one task. I decided to create a Pomodoro timer with p5 that would help me find focus during this finals period.

https://luxafor.com/pomodoro-technique-time-management-life-hack/

A simple timer would be a bit boring so I wanted to add a little feature that would help users focus better. During the pandemic, many of my colleagues and I found it hard to focus at home so we often used Zoom to simulate the feeling of working together in the office. During the zoom, we often had our microphones off and just worked on our individual tasks to have the feeling of someone watching us. I found that really helpful so I started thinking about the ways I could add the feeling of being watched to my Pomodoro timer. In my other class, the professor was showing us the system that tracks the webcam input and detects human body movements, and I stumbled upon a machine learning software by ml5 called poseNet. I really wanted to experiment with it as well as a webcam feature that p5.js has, so I created a Pomodoro timer with a webcam and some features that would help users focus and work more efficiently.

The final product (the timer is modified to 5 seconds just for this video):

When the Start button is pressed, the focus timer of 25 minutes starts and when it’s over, 5 minute break time begins

Allow your browser to access your camera and try it when you want to focus:) https://editor.p5js.org/erikanoms/sketches/NwphO_0Bu

Process

1. I started by creating a 25-minute and 5-minute timer with p5. I converted the time from millisecond to minutes and seconds, added “0” when the time is less than 10, and displayed the timer within the show() function.
2. In setup(), I added a start button along with a changeButtonState() function that starts the timer, hides the button, and changes the screen when clicked.
3. In draw(), I added nested if loops to show the 25-minute work timer when the button is pressed and boolean is true, and the 5-minute break timer when the work timer hits zero.
4. I wanted to add something more so I decided to add a sliding timer that visualizes how much time is left. I used map() function for the slider and a rectangle.
5. Then, I used createCapture(VIDEO) to turn the webcam on
6. I started experimenting with poseNet. I read through this documentation and with a help of this tutorial, I linked ml5 in my index file, added a few lines of code in the sketch file, and I was able to have an ellipse follow my eyes
7. I drew two ellipses on each eye to make it look like users are being watched while focusing, and added a distance variable to have those eyes change size as you get closer/farther away from the camera
8. To make the break time more relaxed, I added some palm tree png images and sunglasses on the eyes

Challenges I faced

• Figuring out how to add “0” when the remaining seconds/minutes is less than 10
• Converting milliseconds to minutes and seconds (lots of debugging 😅)
• Slider timer (I had the concept in mind but struggled to figure out how to code it….then I remembered the map function!)
• Making the timers loop
• Having ellipses follow the eyes on the camera

Reflection

This project was a hard one to start because I first wanted to incorporate all the skills I learned through this semester into one project. I had a lot of ideas and started working on one but it did not feel exciting. So I started over and shifted my thought process from “what I should do” to “what I want to” make using the skills I learned. I have always struggled to find focus so it was a really fun project trying to solve my own problem with creative coding (and I was able to focus well while working on it!). This Pomodoro timer I made really works for me and I used it a few times since I made it. And I’m very happy that I learned a new language p5.js, played with Arduino, learned to explore and utilize new tools, and was able to make a product that I find useful throughout this course!