For this programming exercise I was tasked with designing and making a clock for display at the university’s main hall’s screen. It had to have an interactive element and be made with p5.js.
The inspiration for the design was the origin of the traditional round clock - the sun dials, where the shadows cast by the sun form the hands of the clock. Due to time constraints I had to simplify my concept and ended up with a look that is reminiscent of the themes of sun and moon.
The colors change based on the time of day. The circles arranged around the clock light up to indicate the current second, and remind of the movement of celestial bodies.
The challenges I faced while coding this challenge were push and pop functions in p5.js, positioning the hands of the clock exactly right, and finding a way to make the circles falling look natural. After some trial and error where I tried randomizing the speed at which they fall, I figured the most convincing way is to give each circle a random speed to begin with, and keep that consistent.
I liked this challenge because it challenged me both as a designer and a programmer. I’ve gained a new appreciation and understanding for how design and development interrelate and
You can check out the clock here