Author of suncalc (the JS library behind the sun calculations) here — happy to see such a nice application of it! Heads up if the author's reading this — I recently released a major overhaul of the library that makes it a lot more precise: https://github.com/mourner/suncalc
Initially (about 15 years ago - it was my first ever open source library!) it was based on Astronomy Answers articles that are thankfully still live at https://www.aa.quae.nl/en/reken/zonpositie.html, but v2.0 specifically was rewritten to use the approach described in Jean Meeus' Astronomical Algorithms book.
I did a similar one recently but have not been able to validate it's calculations against any other source. Thanks for posting the link to yours when I get time I'll compare and see if they match up. https://git.mikedilger.com/mikedilger/sunangle
It looks like the "golden hour" may be hardcoded as the hour before sunset. May I suggest updating it to be based on the sun's position in the sky?
In high-northern and low-southern latitudes, the sun can stay close to the horizon for long stretches of the day depending on the season. For example, in Iceland in parts of the spring and fall, the golden hour lasts for most of the day - amazing for photography and just enjoying the scenery.
I love it. It'd be nice if I could click points on a map and see the difference to my local one as well. Or in the calendar view if it'd show a copy of the clock (i.e. coloring not current hand positions) for the time I'm hovered over.
That’s actually pretty close to what I ended up building.
For the first one, I skipped the map and went with search + saved cities instead. All your saved places sit on the same 24-hour dial, so you can see the difference from your local time at a glance without doing the timezone math. The upside is that it works completely offline and fits nicely on Apple Watch too.
Your second suggestion is the part I only got halfway right. You can move the dial in 15-minute increments and the daylight/twilight colouring changes with it. There’s also a calendar where you can jump to any date and time and see what the solar state is in every saved city, but right now that’s shown in rows rather than by recolouring the clock itself.
I like your version better though, hovering/scrubbing a time and having the whole clock recolour for that moment would make a lot more sense. I’m going to add that to the list.
Neat. One of my favourite sites, which also shows daylight, is WeatherSpark[0], obviously focused on weather and it allows you to compare locations based on yearly rainfall, cloud cover, muggy conditions, all sorts of stuff. Always check it when going on vacation or relocating.
Clocks like this are fun. I coded one but couldn’t decide how to handle the corner cases where the sun rises but does not set (and vice versa). You also have to decide if you’re showing the time that the sun rose today or if it should be tomorrow once you’ve already passed that time. Either way, at a certain point you’ll see the UI shift. At moderate latitudes it makes little difference but the effect can be quite extreme depending on the latitude and time of year.
> how to handle the corner cases where the sun rises but does not set (and vice versa)
In practice it doesn't matter: you get a thin sliver of twilight between solar midnight and sunrise or sunset, and a 'Sunset: Does not occur' message in the text info. In such cases the sunrise/sunset arc (sector?) is pretty broad anyway.
> or if it should be tomorrow once you’ve already passed that time
Yes. I chose to recalculate the times midnight.
> Either way, at a certain point you’ll see the UI shift
Yes, but it's usually not dramatic. A few minutes time and fractions of a degree each day. The biggest shift occurs when Daylight Saving time changes — you get a big 15° rotation in the display. Most people are asleep when that happens, but it's cool to watch it jump.
I've been wanting to build this exact clock for awhile now. My feature request would be to include a timeline at the bottom of the page that I can scroll back and forth through days of the year to see everything shift.
It must be clock-making time... I built a 24-hour clock a few days ago but in base-12 and with 72 seconds per minute (to reuse the outer 24-hour dial, with 3 subdivisions to make it closer to the normal second)
I have this hard-coded to south dakota, but it looks like this and I made it a while ago. Same idea, except I turn it such that "solar noon" is at the top.
Think 12 noon is really "high noon" or solar noon? Nope, not unless you are in the center of a timezone!
The objective time of "local noon" also varies due to the Earth's orbit not being a perfect circle, and the Earth's axis being tilted with respect to the plane of its orbit. The variance is described by the equation of time:
Or one of those places that ignores its assigned time zone.
There are places in the western U.S. where entire towns operate on their own time, and the only place you'll find a "correct" clock is in the Post Office. Not even in City Hall.
Very nifty little app. It is such a standard thing nowadays, but the dynamic UI rescaling (to a point anyway) makes it nice to stick on the side and watch as the sun goes down. Kudos to the dev.
Nice. I made my solar clock here: svennidal.is/solarclock
I'm currently in Iceland and I've been using my clock as my main clock since the Icelandic clock is set to be almost one and half hour to early. I've never really shared it so that is why it's just hardcoded to my location haha.
One weird thing: the author of this clock/calendar portrays the year rotating clockwise (click on the calendar icon in top left to see the "annual" calendar): January in 12 to 1 o'clock, February in 1 to 2 o'clock, etc. and December in 11 to 12 o'clock.
In a poll of some close friends recently, we found out that most of us (>80% including myself) had always mentalized the year rotating counter-clockwise (starting from January at 12 to 11 o'clock, Februay at 10 to 11 o'clock etc. and finally December in 1 to 12 o'clock.)
Bizarely none of us could explain why we had such weird anti-clockwise mental image of the annual cycle, but all who viusalized the year running counter-clockwise said they had done so for as long as they could remember.
I wonder if that's a common thing generally or not. Definitely I should add it as an option though. Also whether the year starts at the top or bottom of the dial.
The planets do go around the Sun anticlockwise when viewed looking down from above the North pole [0], and most diagrams show it that way, so maybe that's where the idea comes from?
Interesting, I don’t have a circular mental image of the year at all. It’s more like a continuous line — the summers are light and the winters are dark(er) — where the previous year doesn’t coincide with the next year. Same for the week (and the month, but the months have different lengths anyway). Also not for the day, which takes two revolutions of the clock. Does anyone visualize the day as two circles? Probably not.
Agree. This is the first time I had thought about it this way and the clock representation seems fine.
Oddly the year is the only thing where I think I have a good 3D mental model without really thinking about it. Not sure if this makes sense to others but right now we are about 11/12ths of the way to the autumnal equinox and you can imagine the Earth’s tilted axis almost perpendicular to the arriving sunlight. I think of this as if I were observing from the sun so the axis is pointing up (north) to the left.
I picture day cycle in a single 24 hr counterclockwise loop. I’m always interested to learn about other people’s internal mental image frameworks! So fascinating.
I picture annual calendar the almost the same way (counterclockwise), although its an asymmetrical oval, and months have associated colors (i.e. December navy blue, January maroon/brown, February ice blue, March true maroon…August golden or wheat yellow). I don’t know why, but that’s been my mental image since childhood.
I visualize the year clockwise, but with summer at the top, and the new year at the 6 o'clock position. I'm not sure why, but I think it just makes more sense to me to think of spring as rising, and "fall" as descending. I guess that convention would work better in the southern hemisphere.
Right. If viewed with the north pole up, Earth indeed rotates counterclockwise around the Sun. Not sure if it would be any different for someone living on the southern hemisphere though, as all the maps used globally have the North up and the South down.
I actually have exactly a clock as a mental model of the year and the seasons. December is 12 o' clock.
But weirdly, I dont have a mind's clock to represent the day. Precisely because it feels to me that the clock shape is unfit to show time. Because 03:00am feels wildly different from 03:00pm. My mental representation is a 3d spiral slightly offset and looping back on itself. So imagine two clockfaces when looking from up top, seethrough. The bottom one is a bit to the left so you can see both well. Each consecutive number goes a bit higher. After 12 midnight the numbers quickly decend down back to 06:00am. I have this image for as long as.I remember.
Nice. I've been making a version of this that I submitted to ycombinator, testing the thesis "If we schedule our life around the sun including afternoon naps" we perform better.
Check it out and give me feedback. It has a long ways to go.
Author of suncalc (the JS library behind the sun calculations) here — happy to see such a nice application of it! Heads up if the author's reading this — I recently released a major overhaul of the library that makes it a lot more precise: https://github.com/mourner/suncalc
Author of Sun Clock here — thanks for the library! I'll check out the new release soon and update.
what sorts of background texts/sources of info did you use?
edit: i think i have the dover book your readme mentions :)
Initially (about 15 years ago - it was my first ever open source library!) it was based on Astronomy Answers articles that are thankfully still live at https://www.aa.quae.nl/en/reken/zonpositie.html, but v2.0 specifically was rewritten to use the approach described in Jean Meeus' Astronomical Algorithms book.
I did a similar one recently but have not been able to validate it's calculations against any other source. Thanks for posting the link to yours when I get time I'll compare and see if they match up. https://git.mikedilger.com/mikedilger/sunangle
It looks like the "golden hour" may be hardcoded as the hour before sunset. May I suggest updating it to be based on the sun's position in the sky?
In high-northern and low-southern latitudes, the sun can stay close to the horizon for long stretches of the day depending on the season. For example, in Iceland in parts of the spring and fall, the golden hour lasts for most of the day - amazing for photography and just enjoying the scenery.
In northern Alaska it can last most of the day in the winter, and most of the night in the summer.
I love it. It'd be nice if I could click points on a map and see the difference to my local one as well. Or in the calendar view if it'd show a copy of the clock (i.e. coloring not current hand positions) for the time I'm hovered over.
That’s actually pretty close to what I ended up building.
For the first one, I skipped the map and went with search + saved cities instead. All your saved places sit on the same 24-hour dial, so you can see the difference from your local time at a glance without doing the timezone math. The upside is that it works completely offline and fits nicely on Apple Watch too.
Your second suggestion is the part I only got halfway right. You can move the dial in 15-minute increments and the daylight/twilight colouring changes with it. There’s also a calendar where you can jump to any date and time and see what the solar state is in every saved city, but right now that’s shown in rows rather than by recolouring the clock itself.
I like your version better though, hovering/scrubbing a time and having the whole clock recolour for that moment would make a lot more sense. I’m going to add that to the list.
I’m the developer, btw: https://apps.apple.com/app/id6797192832
A watch face would be fun.
Yeah I want this on my Pebble time 2 sq!
Also made something like this called Sun Path which tracks where the sun is through centuries and how the path deviates ever so slowly.
Plus there are all the equinoxes and solstices.
https://pilgrimapp.org/sunpath/
Dragging the globe around isn't working on touch; it feels like it's missing touch-action: none
Thanks for the note. I just fixed it.
Neat. One of my favourite sites, which also shows daylight, is WeatherSpark[0], obviously focused on weather and it allows you to compare locations based on yearly rainfall, cloud cover, muggy conditions, all sorts of stuff. Always check it when going on vacation or relocating.
[0] https://weatherspark.com/
Clocks like this are fun. I coded one but couldn’t decide how to handle the corner cases where the sun rises but does not set (and vice versa). You also have to decide if you’re showing the time that the sun rose today or if it should be tomorrow once you’ve already passed that time. Either way, at a certain point you’ll see the UI shift. At moderate latitudes it makes little difference but the effect can be quite extreme depending on the latitude and time of year.
> how to handle the corner cases where the sun rises but does not set (and vice versa)
In practice it doesn't matter: you get a thin sliver of twilight between solar midnight and sunrise or sunset, and a 'Sunset: Does not occur' message in the text info. In such cases the sunrise/sunset arc (sector?) is pretty broad anyway.
> or if it should be tomorrow once you’ve already passed that time
Yes. I chose to recalculate the times midnight.
> Either way, at a certain point you’ll see the UI shift
Yes, but it's usually not dramatic. A few minutes time and fractions of a degree each day. The biggest shift occurs when Daylight Saving time changes — you get a big 15° rotation in the display. Most people are asleep when that happens, but it's cool to watch it jump.
I've been wanting to build this exact clock for awhile now. My feature request would be to include a timeline at the bottom of the page that I can scroll back and forth through days of the year to see everything shift.
Author here — I'm thinking of adding something like that to the calendar page, or adding a separate 'carpet plot' of times over the year.
It must be clock-making time... I built a 24-hour clock a few days ago but in base-12 and with 72 seconds per minute (to reuse the outer 24-hour dial, with 3 subdivisions to make it closer to the normal second)
https://jasonincanada.github.io/24-hour-base-12-clock.html#w...
interesting
This is the author's account: https://news.ycombinator.com/user?id=perilunar
hi :)
Unrelated but a little related (semi-shameless plug?)- I made a small weather web-app that also plotted daylight hours as a secondary feature.
Its really weather over the next 12 hours on the primary ring, and day/night transition on the inner.
https://donohoe.dev/weather/
At last, someone thought of giving the ambient temperature in kelvin
Let me choose location manually.
I wish my browser let me do this by default. Rather than "let this site know your location?" it should be "select a location to give to this site".
(I'm sure there are extensions and/or developer options that do this, but it's the default I want)
You can set latitude and longitude after opening settings with the gear icon.
you can use my version sunsignal.app and enter a zip code.
https://editor.p5js.org/rhemalinder/full/im3tyPBDW - I made this one for myself and it's pretty similar.
I have this hard-coded to south dakota, but it looks like this and I made it a while ago. Same idea, except I turn it such that "solar noon" is at the top.
Think 12 noon is really "high noon" or solar noon? Nope, not unless you are in the center of a timezone!
The objective time of "local noon" also varies due to the Earth's orbit not being a perfect circle, and the Earth's axis being tilted with respect to the plane of its orbit. The variance is described by the equation of time:
https://en.wikipedia.org/wiki/Equation_of_time
> Nope, not unless you are in the center of a timezone!
… and you do not live with daylight saving time.
Or one of those places that ignores its assigned time zone.
There are places in the western U.S. where entire towns operate on their own time, and the only place you'll find a "correct" clock is in the Post Office. Not even in City Hall.
Been using https://sundial.page recently for weather
Why are some days blue and others are gray? Doesn't seem to correlate to cloudiness or precipitation
idk. Not the dev, but for me it's seemed pretty correlated to cloudiness.
Very nifty little app. It is such a standard thing nowadays, but the dynamic UI rescaling (to a point anyway) makes it nice to stick on the side and watch as the sun goes down. Kudos to the dev.
Very well done, I made a similar tool a few months back. https://ethanwillingham.com/daylight-globe.html
This is neat! Would love the ability to make "true noon" be at the top of the clock, instead of 12.
This is great. Reminds me of the Solar Dial watch face on my Apple Watch.
It would be great to have other visible planets like Jupiter and Venus in the dial
https://play.google.com/store/apps/details?id=com.tdr.sunris...
Nice. I made my solar clock here: svennidal.is/solarclock
I'm currently in Iceland and I've been using my clock as my main clock since the Icelandic clock is set to be almost one and half hour to early. I've never really shared it so that is why it's just hardcoded to my location haha.
I would prefer if it showed a regular 12 hours clock face and show the upcoming sunrise or sunset, or two faces one for each.
Neat! I made something similar to better visualize timezones based off the day/night cycle:
https://apps.apple.com/in/app/sun-timezone/id6760567372
It'd be neat if you could pan a slider through the year to see the sunrise sunset times change
Love it!
One weird thing: the author of this clock/calendar portrays the year rotating clockwise (click on the calendar icon in top left to see the "annual" calendar): January in 12 to 1 o'clock, February in 1 to 2 o'clock, etc. and December in 11 to 12 o'clock.
In a poll of some close friends recently, we found out that most of us (>80% including myself) had always mentalized the year rotating counter-clockwise (starting from January at 12 to 11 o'clock, Februay at 10 to 11 o'clock etc. and finally December in 1 to 12 o'clock.)
Bizarely none of us could explain why we had such weird anti-clockwise mental image of the annual cycle, but all who viusalized the year running counter-clockwise said they had done so for as long as they could remember.
I wonder if that's a common thing generally or not. Definitely I should add it as an option though. Also whether the year starts at the top or bottom of the dial.
The planets do go around the Sun anticlockwise when viewed looking down from above the North pole [0], and most diagrams show it that way, so maybe that's where the idea comes from?
0. e.g. https://en.wikipedia.org/wiki/Year
Interesting, I don’t have a circular mental image of the year at all. It’s more like a continuous line — the summers are light and the winters are dark(er) — where the previous year doesn’t coincide with the next year. Same for the week (and the month, but the months have different lengths anyway). Also not for the day, which takes two revolutions of the clock. Does anyone visualize the day as two circles? Probably not.
Agree. This is the first time I had thought about it this way and the clock representation seems fine.
Oddly the year is the only thing where I think I have a good 3D mental model without really thinking about it. Not sure if this makes sense to others but right now we are about 11/12ths of the way to the autumnal equinox and you can imagine the Earth’s tilted axis almost perpendicular to the arriving sunlight. I think of this as if I were observing from the sun so the axis is pointing up (north) to the left.
I picture day cycle in a single 24 hr counterclockwise loop. I’m always interested to learn about other people’s internal mental image frameworks! So fascinating.
I picture annual calendar the almost the same way (counterclockwise), although its an asymmetrical oval, and months have associated colors (i.e. December navy blue, January maroon/brown, February ice blue, March true maroon…August golden or wheat yellow). I don’t know why, but that’s been my mental image since childhood.
I visualize the year clockwise, but with summer at the top, and the new year at the 6 o'clock position. I'm not sure why, but I think it just makes more sense to me to think of spring as rising, and "fall" as descending. I guess that convention would work better in the southern hemisphere.
Same here, but i'm in the southern hemisphere, so summer is at the top already.
Right. If viewed with the north pole up, Earth indeed rotates counterclockwise around the Sun. Not sure if it would be any different for someone living on the southern hemisphere though, as all the maps used globally have the North up and the South down.
Did you go to the same elementary school?
No but possibly used same schoolbooks. An image or such in an old schoolbook could indeed seed such a visual idea.
I actually have exactly a clock as a mental model of the year and the seasons. December is 12 o' clock.
But weirdly, I dont have a mind's clock to represent the day. Precisely because it feels to me that the clock shape is unfit to show time. Because 03:00am feels wildly different from 03:00pm. My mental representation is a 3d spiral slightly offset and looping back on itself. So imagine two clockfaces when looking from up top, seethrough. The bottom one is a bit to the left so you can see both well. Each consecutive number goes a bit higher. After 12 midnight the numbers quickly decend down back to 06:00am. I have this image for as long as.I remember.
Nice. I've been making a version of this that I submitted to ycombinator, testing the thesis "If we schedule our life around the sun including afternoon naps" we perform better.
Check it out and give me feedback. It has a long ways to go.
https://sunsignal.app
nice one
Man fuck Apple for not allowing custom Apple Watch faces >:(
Always the crippled operating system limiting the potential of their amazing hardware
The “Solar Dial” face does pretty much what the site does.
This is already my default watch face on Apple Watch