Jaqaur – Clock

Click to re-set with a new color!
jaqaur_clock

I had a lot of ideas when I started working on this project, and as usual, I went with none of them. I considered an analog-style clock but with one hand pointing to the minutes whose length would correspond to the hours. I considered some clock that would make the user do work, either by solving a riddle or a math problem, in order to figure out the time, but I wanted to do something a little more interactive and fun to look at. I considered some complicated Rube-Goldberg-esque setups, but those would have been too complicated to make, I think. Some pictures of my initial sketches are below. My final idea is the closest to the second sketch, which was a screen full of all the numbers in a random order, and hands pointing from the mouse to the correct one, but it’s still not much like that.

Anyway, the idea that I actually went with is definitely my favorite. It’s a pile of marbles, each with a number on it. There is a marble for every second, every minute, and every hour, and they are all the same size except for when they are active. If the time is the number displayed on a marble, then that marble will grow to the appropriate size (hours get really big, minutes get kind of big, and seconds don’t grow much). It will shrink back again when it’s no longer needed.

The hardest part was getting the “physics” to work, and it’s still not perfect (most of the code that works was borrowed from other people; see my code’s comments). There was a sort of inverse relationship between the amount of overlap the circles could have (which is not good, and would lead to a bunch getting squished in the corners) and the amount of vibration throughout the pile (which is also not good because it can make marbles hard to read). Ultimately, I leaned towards the “More Vibration” side, and just put a cap on the marbles’ speed so they can’t shake too much.

I also had to add a function that tells the numbers themselves how big they need to be. I decided to make this a function of their marble’s width, and while it works pretty well, it makes the “display” function that much more complicated. Another problem I faced was turning it into 12-hour time. I knew the “hours” function was in terms of 24 time, so I added an “if” statement that would subtract 12 if hours() returned something greater than 12. However, I forgot that, in 24 hour time, midnight is 0:00! I only recently accounted for this, but now it works fine.

I really like how it looks now. The big marbles tend to slowly rise to the top, like they would in real life, but there is always movement. Personally, I can watch it for a really long time! I wouldn’t really change anything about it, except maybe patching up the physics. I think it’s really pretty and very readable. To make it even more interactive, I added a feature where when the user clicks on the Canvas, all of the balls get re-dropped in a new color. The color is always randomly generated, but I added a formula that prevents the color from being too dark or too ugly (in my opinion). Have fun playing with it!

My initial sketches:

I would like to point out that this clock does not always work as intended when run alongside everyone else’s clock; it’s functions are slowed down such that the seconds can’t reach their full size before it is time for them to shrink again. This makes for less marble movement than intended. I highly recommend viewing this post in its own tab for maximum effect!