Tik Tok on the Clock

For our last coding project of the semester, I was to create a clock using p5.js.


When I first started this project, I had a bunch of ideas in my head. I had looked at numerous examples of other clocks that had been coded using p5.js. When I finally had landed on an idea that I wanted to work with, it turned out to be way too difficult. I decided to go a more simple route. I was just going to code a clock that would be a digital clock that would display the date in the format ‘mm – dd – yyyy’ and the time in the format ‘hh:mm:ss AM/PM.’ There was quite a lot of trial and error when it came to this project. The function ‘hour()’ in p5.js uses a 24-hour clock instead of a 12-hour clock. Military time is great, but I’m so used to the 12-hour clock that that’s what I wanted to use for my project.

I had created a square that I then colored navy blue. I then made all of the text the same font, size, and color. It has a very uniform look. Maybe a little too uniform? One of the original ideas I had had was to create a cube that would rotate and display the hours, minutes, and seconds on each side of the cube. I had made it to the point where I had a cube that rotated and changed colors, but I was then stuck with trying to put the clock face on it.

I coded for the time in p5.js as it would recognize the time on my computer and use that as the reference time. I had the hours, minutes, and seconds ready, but instead of the minutes showing as :01 or :05, they would show as :1 or :5. I had to then add to the function a “0” that would be added on if the minute or second digit was less than 10. That error was fixed. Now it was time to work with the 12 hour clock. Quickly, I was able to create a clock that displayed the time in 12 hours rather than 24 hours. I only had to write a function that subtracted 12 from the hour itself if the hour, itself, was greater than 12 when set in military time. Finally it was working! I then added the function to print AM or PM for when appropriate.

I drew on many different examples that helped me change the look of my clock. I then decided that the date and time, alone, were too boring, so I had first decided to use an inspiring quote. I originally had written the lines “Time is priceless. Be here now.” It felt a little too cheesy so I went with something even more cheesy. I chose to use lyrics from the infamous song, “Tik Tok,” by Kesha. Why not? A clock can be funny!

After messing with the placement of everything, the colors, and fonts, I was very happy with the end result, and I hope you are too!

p5.js Code

The Clock

GitHub

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.