Description

Experimental Clock: A Day of Work
Code: https://editor.p5js.org/mlinhle617/sketches/rnM9fAB3n
For this project, I want to show how my day is tracked with tasks, emails, and messages from work and how each day passes by so fast without me being able to get much off my never-ending to-do list. I put the eyes in the middle of the sketch and let them be surrounded by things to attend to. As new things pop up around the eyes, the pupils move to show how new tasks and notifications steal attention from the task at hand.

Design Process

I started by sketching three options on paper. One option is to track time with daily tasks, one option is tracking time with emotion expression, and the last option is tracking time by meals in the day. I decided to choose the first one since I think it’s more relatable, and design-wise, its layout looks more interesting than the other two.

The next step is creating the mockup in Illustrator to decide on the overall look and feel and get measurements. I decided to go with a black and off-white look since colors feel too cheerful. I want the clock to look monotone and boring like how some days at work are. I tried white at first but too much white looks a bit harsh on the eyes, so I decided to choose an off-white color instead. Once I’ve got the design done, I started coding in p5.js.

Reflection

Originally I wanted to use map() as well, but couldn’t find a place to use it. It was an oversight as I didn’t really think about map() while I was creating the preliminary sketches and mockup. When I started coding, I tried to think about ways to incorporate that but couldn’t find a good solution without having to change the mockup, which would have taken up too much time so I decided to leave map() out. If there’s anything I learned from the project is to be more thorough with the prelim steps to avoid last-minute incidents like this.