Concentrichron: A clock and calendar made of concentric rings | Hacker News Reader

Concentrichron: A clock and calendar made of concentric rings

twitter.com

184 pointsmindbrix73 comments

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.

Though I love the idea of doing it mechanically like the Long Now clock:

https://longnow.org/artifacts/equation-of-time-cam

This is because our calendar sucks. The Enoch calendar would be easier to implement.

Not the whole calendar, but just the clock part: https://www.amazon.com/Kikkerland-Wheel-Revolving-Wall-Clock...

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

I appreciate that you just have a "log".

That is awesome!

Direct link http://www.concentrichron.com/

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.

Would be cool to replace the years with "Year in Decade", "Decade in Century", "Century in Millennium".....

Or maybe just have year go from 00-99 and repeat as people commonly do anyway.

Current implementation of year definitely doesn't make sense because it doesn't cycle.

I admit I was probably influenced by thinking of Anathem

One of my favorite Stephensons.

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]

Fixed. In Firefox, verify the GPU is enabled in `about:support`. In this case, I had to reset `layers.acceleration.force-enabled=true`.

I'm good with the same browser and OS, machine's an i3 7100 with 8GB RAM using the CPU's graphics, so nothing special at all.

Reminds me of sculpture I used to walk by almost daily in grad school, Maya Lin's timetable. https://www.flickr.com/photos/rocor/3546093103/

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)?

Or similarly, let SVG animation transforms do it for us:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ani...

On months with less than 31 days, when the third ring in hits the last day of the month, it just skips to the first?

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.

My thoughts exactly, and what about leap years?

Super lazy night mode, paste this in your console:

    var strokeTable = {
      "#000000": "#AEAEAE",
      "#F5F5F5": "#252525",
      "#FAFAFA": "#2A2A2A",
    }
    Object.entries(strokeTable).forEach(([o, n])=>Array.from(document.querySelectorAll(`[stroke="${o}"]`)).forEach((e)=>e.style.stroke = n))
    Object.entries(strokeTable).forEach(([o, n])=>Array.from(document.querySelectorAll(`[fill="${o}"]`)).forEach((e)=>e.style.fill = n))
    document.body.style.backgroundColor = "#050505"
    document.getElementById("test").style.backgroundColor = "#050505"

Not only is it very beautiful, but you made me use the browser console for the first time in my life and it feels great! Thank you.

Off to read some of my bookmarklets, quarantine-style rabbit-hole time!

Looks reminiscent of a slide rule!

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?

They always keep 31, but skip past it:

        var fdate = (d.getDate() - 1.0) + fhours / 24.0;
        document.getElementById('date').setAttribute("transform", "rotate(" + fdate / 31.0 * -360.0 + ", 400,300)");

Every UI toolkit on Windows is/was based on Win32 (except XAML). There are so many places where it leaks it's not even funny anymore.

UI consistency isn't Windows strongest point. I'm glad they're trying to fix it.

what UI failure is letting you comment on a wrong thread? Is there a mobile app where nav is more obtuse or something?

haha indeed! the iOS HN app

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.

Good point but think of it like this how many years have you looked at the other type of analog clock, in comparison.

I prefer boring that works vs. new that doesn't work.

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.

It's not that it doesn't work. It actually works better than the old way. You think it doesn't work because you're not used it.

I love this. But part of me wants the rings to rotate the other direction. I don't know why. It's kind of like scrolling I guess, is the content moving one way, or is the view window moving the other way.

By rotating counter clock wise, the information (the current time) advances clockwise. I don't know if I'd like it better the other way, but a certain part of me is so used to seeing the actual mechanical movement be clockwise, that I want the rings to move clockwise.

Am I alone in this?

That would feel wrong to me. If it rotated that way, when looking at the rings, the future would be on the left, and the past on the right.

It would be neat to add highlighting for each of the current parts.

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)

Sweet work!

This is cool. My friend and I once visualized our timeslot with our product roadmap on a circular timescale.

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.

Someone make me this watch, with an open center and gears. You can drop the year dial and maybe the seconds...

Not open center but https://www.klokers.com/en/3-watches

Add few zeroes to the price and you probably could get a skeletonized one too

Just one more ring (2020s, 2030s...2110s) to drive home the vulnerable sense of mortality

Neat. Natural. Suggestions:

Add timer and stopwatch features. Maybe calendar sync.

Time zones.

Try also making option to break the red line instead of rotating disks.

Possibly also color customization. An added gradient may be more intuitive than only numbers.

Edit: and existential angst checkbox

Agree to all - also, showing (continuous) progress within the year is eye opening.

And the best thing is, if you read it from the top down, it’s in ISO-8601!

It would be dope if someone could make this in brass.

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.

Seems to be down from the load. Cool, though.

Looks great, please add black theme and step/diamater size for seconds 5,10,15 seconds to reduce motion

Interesting. I wonder how it handles the number of days in a month being variable?

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.

And leap years.

Very nice, and even better if you just show the top 15°

Android widget please!

And every ten years you replace the year ring?

3d prints anybody ?

Very cool!

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.

Many thanks! Fixed.

From a design point of view, reading this clock is strictly harder than reading:

"2020 March 16th, Monday 10:50:48"

and also provides no useful extra information, unlike a traditional clock face.

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 saw this and immediately and intuitively read the face.

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.

It's a hobbyist project, for delight and aesthetics

But it doesn't mean we should upvote every hobbyist project to the top of hacker news - only the useful, interesting, good ones.

Use the search, 90% of them don't get voted up. I've worked for years on things in the dustbin of popularity

Exactly, and my point it that this particular clock belongs in the 90%, not the 10%.

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)

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.

The red line should be toward the left/west so you can read it as 2020 March 20th Monday 10:50:48.

Reply on news.ycombinator.com