I made this, which should be fairly easy to tweak to your desired look (the svg is generated by the script): https://jsfiddle.net/4e6kw8Ls/ (click to toggle zoom)
Usually, (on smoothly geared watches) they jump past the intervening day(s) and start smoothly incrementing again. The counter example would be a year's leap second, which would need to delay.
It's quite impressive, beautiful and smooth in motion.
I have to second what someone else said, it could be made into an amazing wall clock (and even a small desk unit). There is a lot that could be optionally (settings) done to manipulate its aesthetic qualities in various directions to match personal preferences, times of day, events, and so on.
I have the complete OPPOSITE experience: the motion is jerky and inconsistent, like the seconds are struggling then catch up. (Firefox 74 on Windows 10 18363)
Concur. Since someone described it as 'beautiful and smooth' I opened it in Chrome.. beautiful and smooth (80% of the time). Since it's "just" SVG transforms perhaps this is a firefox:chrome difference (that said, I've built SVG transforms that run fine on both). It does invent the universe 31.25 times/second.. perhaps there's some JS optimizations we can do. [Update: basically smooth in IE11 too]
Would love to see the Clickspring channel on YouTube do a series on this. If you aren't familiar with Chris's work, he's got a series on a wonderful clock he made, mostly brass. Fun to watch. Apparently his machining techniques aren't great but I'm no machinist so doesn't matter to me.
This would make a pretty awesome large format wall clock. Anyone know if anything like that exists? If so, I imagine it would be pretty expensive since it's value would mostly be aesthetic.
That wall clock would need to handle different month lengths somehow because the month ring can be 28, 29, 30 or 31 days, and provide for a way to add years to the outer ring.
Probably regarding months, it would likely do what a lot of mechanical watches do: go to 31, and require manual intervention to set the day of month.
That's kind of ugly because you have to rotate that wheel exactly to retain the fractional part of the day, which is hard to accurately other than at midnight.
With some 'smart' circuitry this can be handled automatically: the month ring should have 31 days. But if the month is shorter, the clock would jump automatically to the next month.
It's slightly marred by a typo: "Tueday" is missing an "s". Unfortunately I don't see contact info except a twitter handle, and I don't speak tweetish.
Very cool! I hesitate to self-link, but this is too related -- I have long had a similar but way smaller, less featureful (just a time-clock), and shoddily written design on my homepage: https://wcarss.ca
The Javascript just recomputes a new absolute rotational position for the rings on every update. So in effect it is always skipping, so it would skip in that case like all others.
The cognitive load to be able to read the calendar is quite high. It took me a few seconds to tell what the date/time is. It's very cool, but I am not sure if this is good design.
Vote and rank systems are fairly crude. Delight often takes precedence over depth, it's why you don't see academic papers or open access books on the front page often...
I'm open to more nuanced and sophisticated rules, I've even built a few systems and tried to gain traction. However the crude single vote implements seem to be the only ones with staying power.
I dunno, every day is a new context we could simply try again. Things can fail a dozen times and then something changes and makes it work. (For instance, on demand video, or YouTube, only took off when people had broadband and speedy enough computers to watch the video, it was probably the 20th company that tried this idea and the first to not eat shit)
Not sure why this is being downvoted. It’s a fact - it’s objectively harder to read.
This criticism is valid and although the clock is super cool, it’s bad design. Does that mean we shouldn’t do projects like this? No. Is it important to highlight the problems with design like this? Yes.
"Bad design" is just your opinion, not objective fact. If every clock were designed specifically for its ability to be read easily, there would only be one type of clock, with high contrast colors, perhaps in different sizes.
Good design involves trade offs. Many of those trade offs are opposing factors like form, function, cost, versatility, etc. And not all of those trade offs are worth it for everyone. E.g. adding a diamond to a watch will increase it's cost many times over and distract from reading the time. But that trade off is worth it for some people. Just because you don't like it doesn't make it bad design.
Design is rooted in reality in the sense that it must be functional. My argument is that this particular design is wholly un-functional, and that the diamonds that HN is optimizing for - fancy animations, pretty concentric circles - don't seem to have much value when you think about it. At least diamonds hold their value.
But I suppose, if one finds value in this not-quite-novel-application-of-javascript-animated SVGs, to each their own.
Good design is about how a thing works, not what it looks like. This calendar and clock does not work well - I am willing to bet my entire life's savings in a psychology study that determines the reaction time to read the date + time of this calendar/clock vs. reading high contrast numbers.
Functional trade-offs for "coolness" - I didn't read that memo in Design school, sorry.
I'll counterpoint you and say my eye scanned the rings out to in and since the sequence is ISO-8601, like I prefer everywhere, it was immediately intuitive and VERY satisfying.
As opposed to mentally shuffling other date formats into largest-smallest order, or (however well trained and immediate the translation may be) looking at a standard analog clock, this fits my thought process so very very well.
I've seen in another subthread mention of klokers.com... if they adapted their concentric design to this layout I would consider wearing a watch again.
It is animated with Javascript by updating transform:rotation every ~30ms. Couldn't the current time be set with Javascript and the animation be handled with CSS animations? Maybe CSS animations are not accurate enough time-wise so that the clock would diverge from the actual time (or other bad stuff happens like animations being suspended while a tab has no focus. I'm out of web development for too long to know off-hand how that behaves)?
76 comments
[ 3.7 ms ] story [ 158 ms ] threadI have to second what someone else said, it could be made into an amazing wall clock (and even a small desk unit). There is a lot that could be optionally (settings) done to manipulate its aesthetic qualities in various directions to match personal preferences, times of day, events, and so on.
Current implementation of year definitely doesn't make sense because it doesn't cycle.
Very graceful in how it shows the interaction between the different lengths and frequencies of cycles (eg, days of week, months)
I wonder how they handle the changing number of days per month.. always keep 31, and just skip the extras every other month?
Probably regarding months, it would likely do what a lot of mechanical watches do: go to 31, and require manual intervention to set the day of month.
That's kind of ugly because you have to rotate that wheel exactly to retain the fractional part of the day, which is hard to accurately other than at midnight.
https://longnow.org/artifacts/equation-of-time-cam
It's slightly marred by a typo: "Tueday" is missing an "s". Unfortunately I don't see contact info except a twitter handle, and I don't speak tweetish.
What would be cool if the new thing worked really well and it was different/interesting.
This design is only the latter, hence the slight disdain. But, I applaud the work that went into it.
"2020 March 16th, Monday 10:50:48"
and also provides no useful extra information, unlike a traditional clock face.
I'm open to more nuanced and sophisticated rules, I've even built a few systems and tried to gain traction. However the crude single vote implements seem to be the only ones with staying power.
I dunno, every day is a new context we could simply try again. Things can fail a dozen times and then something changes and makes it work. (For instance, on demand video, or YouTube, only took off when people had broadband and speedy enough computers to watch the video, it was probably the 20th company that tried this idea and the first to not eat shit)
This criticism is valid and although the clock is super cool, it’s bad design. Does that mean we shouldn’t do projects like this? No. Is it important to highlight the problems with design like this? Yes.
Good design involves trade offs. Many of those trade offs are opposing factors like form, function, cost, versatility, etc. And not all of those trade offs are worth it for everyone. E.g. adding a diamond to a watch will increase it's cost many times over and distract from reading the time. But that trade off is worth it for some people. Just because you don't like it doesn't make it bad design.
But I suppose, if one finds value in this not-quite-novel-application-of-javascript-animated SVGs, to each their own.
Functional trade-offs for "coolness" - I didn't read that memo in Design school, sorry.
It clicked like no other clock design I've ever seen.
I may be in a .001% of people who see this and truly grok it, but that's fine. I'd wear a watch again for this.
As opposed to mentally shuffling other date formats into largest-smallest order, or (however well trained and immediate the translation may be) looking at a standard analog clock, this fits my thought process so very very well.
I've seen in another subthread mention of klokers.com... if they adapted their concentric design to this layout I would consider wearing a watch again.
Add few zeroes to the price and you probably could get a skeletonized one too
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ani...
For those looking for something similar on your devices, there is an app called "Circa" - https://apps.apple.com/us/app/circa-time-zone-converter/id96...
Circa³ shows timezones, the overlaps, and your selected calendar events.