
Concentrichron: A clock and calendar made of concentric rings - mindbrix
https://twitter.com/Vector_GL/status/1239512837325758464
======
nkrisc
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.

~~~
kazinator
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.

~~~
ahmedfromtunis
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.

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

[https://longnow.org/artifacts/equation-of-time-
cam](https://longnow.org/artifacts/equation-of-time-cam)

------
wcarss
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](https://wcarss.ca)

~~~
oftenwrong
I appreciate that you just have a "log".

------
delvinj
Direct link [http://www.concentrichron.com/](http://www.concentrichron.com/)

~~~
adventured
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.

~~~
thebiss
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)

~~~
gnabgib
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]

------
tjbay
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/](https://www.flickr.com/photos/rocor/3546093103/)

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

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

[https://developer.mozilla.org/en-
US/docs/Web/SVG/Element/ani...](https://developer.mozilla.org/en-
US/docs/Web/SVG/Element/animateTransform)

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

~~~
adrianmonk
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.

------
aftbit
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"

~~~
severine
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!

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

~~~
DougBTX
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)");

------
steeve
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.

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

~~~
steeve
haha indeed! the iOS HN app

------
spectramax
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.

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

~~~
spectramax
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.

~~~
timbit42
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.

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

~~~
LeoPanthera
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.

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

~~~
validuser
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/](https://jsfiddle.net/4e6kw8Ls/) (click to
toggle zoom)

~~~
ckluis
Sweet work!

------
Brajeshwar
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...](https://apps.apple.com/us/app/circa-time-zone-
converter/id968698352)

Circa³ shows timezones, the overlaps, and your selected calendar events.

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

~~~
zokier
Not open center but
[https://www.klokers.com/en/3-watches](https://www.klokers.com/en/3-watches)

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

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

------
downshun
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

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

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

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

~~~
chin7an
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.

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

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

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

~~~
kurthr
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.

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

Android widget please!

------
amelius
And every ten years you replace the year ring?

------
taherchhabra
3d prints anybody ?

------
jfk13
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.

~~~
mindbrix
Many thanks! Fixed.

------
Vervious
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.

~~~
spectramax
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.

~~~
gmiller123456
"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.

~~~
spectramax
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.

~~~
zentiggr
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.

