Kyle Silver

This has been an odd, if enjoyable exercise. Follow these links for full-screen versions

• Timescale — a faithful recreation of times now passed
• Concentric Rings — wheels within wheels; biblical accuracy not guaranteed

Timescale

Back when I was in high school I had a Cadence Timescale watch, which, despite my parent’s skepticism at the prospect of purchasing a timepiece from a no-name company with a sketchy website, they let me buy using their credit card. It was by any measure a great watch for what it cost—which wasn’t much—and teenage high school me felt cool every time someone did a double take trying to read it. The concentric circles made it confusing enough, but the design wasn’t unheard of: jump-hour watches, as I would later learn they were called, have been around for decades. No, what really made this watch strange was that unlike every other jump-hour watch I could find, all of the wheels rotated in what appeared to be the wrong direction. They spun clockwise, which seems logical enough—but this has the effect of making the stationary hand look like it was rotating counterclockwise, falling backwards through the hours instead of pushing forwards, and this in my friends elicited every emotion from bemusement to outright hostility.

I lost the watch while I was in college. I had bought myself a nicer and more normal watch, driven in no small part by the garish and definitely-unlicensed Snoo that was plastered haphazardly onto the face—but some time not long after the new watch arrived, the old one disappeared. The Cadence Watch Company itself is out of business, now, too, and years of scouring eBay for a replacement have come up short.

All this is to say that I no longer have the watch and no way to obtain another. As I started to learn Typescript (for the first time) and React (for, like, the fifth time) this year, I thought that recreating the timescale watch would be a rewarding challenge. For me there’s a certain appeal to using CSS, which is rectangular to its very core, to draw spinning circles with text in odd orientations; pushing a system intended for managing static text layouts to do much more exotic and bizarre things is something I love about art projects on the web. Using ReactJS for this project is definitely overkill as the actual clock animations are done with native keyframes, but having a JavaScript framework made it effortless to procedurally generate all of the clock elements and animations such that everything is accurate to within about a second of reality—which, with an analog clock, is about as good as you can hope for.

Concentric Rings

This design came to me not long after completing the Timescale clock. It has a lot more moving parts but thankfully was a bit easier for me to put together since it was not my first, but second rodeo. To explain what’s going on here: the single hand will make a complete revolution once every twelve hours; the “minute wheel” and “second wheel“ rotate once per hour and once per minute, respectively. However, because the hour hand is moving along the circumference of the circle, the inner wheels also need to “roll along” in order to keep up.

To be precise with the math, the wheels meet back up with the hour hand once every hour and minute, respectively. The time it takes the minute wheel, for example, to go from 0° to 360° in absolute terms is actually twelve elevenths of an hour. For example, if the minute hand starts at 12:00, the “00” on the minute wheel will be perfectly vertical. At 1:00, the “00” will not be vertical again, but will have rotated 330° and be aligned with the 1 on the hour ring. The speed of rotation is therefore 5.5 degrees per minute rather than the 6 it would need to be if it were to complete one full revolution per hour.