Nonlinear clock - ankycheng

In this sketch, I am trying to make the nonlinear clock in a p5.js sketch. Here are some steps to achieve this:

• List out the time length of each hour in my mind
• Calculate the total seconds based on the hourly time length. Apparent this will not be 24hrs * 60 min * 60 sec, but we will use this data for later calculate for time lapse proportion.
• Draw the hour text by calculating the time proportion, push, pop, translate and rotate are useful in this step.
• Calculate and draw the hour hand. I first calculate the rotate angle using the same method as previous step, then added the minutes passed in current hour. The only thing needs to keep in mind is we have to multiply the minutes by the relative time length of this hour.
• I also added a simple gui for user to play around with different hours and mins.

I cerated another sketch which wants to show case the idea that for me most of the time, I only aware of time when I look at the clock. And I am always surprised by how much (or how little) time passed since I last time looked at the clock.

In this sketch, the time drops every second and stack on the floor. When ever the clock notice there is a face (someone is looking at it). the accumulated time stacks go away. Even though this is not related to my previous proposal, I think it’s fun to code this sketch!

p5.js Web Editor

Screen Recording 2023-10-10 at 4.35.49 AM.mov