Project #3: Energy Level Clock

Description

In this project, I explored the concept of an experiential clock which functions the way ordinary clocks cannot. With the use of conditional statements and time functions from the P5.JS library, we will make clocks that represent time in an unconventional way.

- If(), else() and else if()

- second(), minute(), hour() and millis()

Design Process

Looking back at my experience of being an international student, I realized that due to years of constantly travelling between the US and China, my biological clock became adjusted to my activities and has become quite irregular. Instead of having a set schedule for my daily routine, my body seems to function on an energy-based system which my sleep and wake up time can vary drastically from day to day depending on my daily activities. I then came up with the idea of an interactive energy level clock, where people can interact with the program and decide what my daily activities are going to be, thus influencing my energy level and my sleeping time. Theoretically, if no activities have happened during the day, I will sleep at 10 p.m. as the energy bar drops to zero. However, if people click on different activities, my energy level will change and the time I sleep will change according to my energy bar.

Here’s what my initial design looked like:

Reflection

I found this project really interesting and I really enjoyed the coding process. I challenged myself to create a slightly more interactive project comparing my previous projects, and by successfully making it, I feel a little bit more confident about coding. I really think having a clear mind when coding is really important as it can become confusing when the program becomes more complicated. A lesson I learned from this project is to keep track every time I translate the origin, because when using functions(such as mousePressed()) outside the draw() function, I will need the actual coordinates. I’m lucky that this time I’m only working on a small canvas, but it still took me some time to figure out the mouseOver() and mousePressed() areas after translating 3 times.

If I had more time, I want to add more interesting conditions to this program such as, if I drink more than 5 cups of coffee, a new canvas will show saying “Grace has been sent to the hospital”. I think I will be able to achieve it with variables and I might come back to this project or explore this idea in a future project if suited.