p5js Visual Clock

This project was a task in creating a visual representation of time. My initial concepts were more abstract, however I settled on the doughnut style as I felt it was visually easier to digest and to sense a pattern. The code itself was an attempt at using more of the mathematical functions, particularly sine and cosine, that are built into p5.js to create something more rhythmic. The frosting and doughnut ‘flavors’ are both circles that follow a path to create a seemingly static image until the time changes.

The sprinkles are added every second, while the frosting changes color every minute, and the doughnut ‘flavor’ alternates from vanilla to chocolate every hour. Both the frosting and flavor were coded using p5’s inbuilt time functions, and the sprinkles are added and timed based on the frame rate.

Live link to visual clock
Link to code on GitHub