top of page

energy clock


JavaScript  |  Creative Coding  |  Game

* Please help Grace select her daily activities.


In this project, I explored the concept of an experiential clock that 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. I experimented with different functions in P5.JS, including:

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

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



Looking back at my experience of being an international student, I realized that due to years of constantly traveling 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 and my sleep and wake-up times 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 will 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:



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.

bottom of page