Simple Clock on P5.js

I wanted to make sure that I completed the requirements of the assignment, which was to make a composition of simple shapes, so I also made a very simple clock that makes use of the arc and ellipse functions.

The inspiration came from the idea that analog clocks are more effective at displaying the time than a digital clock. The spatial location of each hand offers both how much time has passed and how much time is remaining. In the case of the minute hand, it shows how many minutes are remaining in this hour while simultaneously showing how many have passed since the previous hour.

I’ve replaced the hands in this clock with circular progress bars and while leaving the remaining time denoted in white. There’s also a digital readout at the bottom just for the purpose of discussion and testing.

I ran into a few challenges in this when I tried to display the time at the bottom. I was hoping to execute the readout with a single print function but found that concatenating in p5.js behaves slightly differently. Instead, I simply ran the print command three times and offset the output with each so the text isn’t running into each other.

Leave a Reply

Your email address will not be published. Required fields are marked *