Is the Moon big?
Posted on
No, it stays more or less the same size, grows or shrinks a bit throughout it's orbit. What about the phases though? Are they shrinking or growing? How full is the moon right now?
In the top right corner of this website, there is now a moon. That moon is relatively accurately displaying the percentage of the moon that is full to the second1.
The math
Initially I went to Wikipedia which had a bit of math without reference2, so I had to keep looking for a proper reference algorithm to implement. Following on from there I went to NASA, and with some digging only found some fun interactive bits and an unintended for public use API behind another of their pages. No fun mathy details to be found. As much I as trust NASA to be accurate, and could probably get away with using the API, the moon has a fairly consistent orbit and phases, so an mathematically deduced approximation seemed like it should be possible.
I continued my search and stumbled onto celestialprogramming.com which is a wonderful website by Greg Miller, with JS implementations of a variety of algorithms around celestial orbits and other such details. The one I needed comes from the "Illuminated Fraction of the Moon" page.
This is an implementation from the book "Astronomical Algorithms" by Jean Meeus (1991). This book is wonderful, and is the exact kind of mathematical reference I was looking for at the start.
Miller's JS example has been accurate to the the NASA API so far, and is delightfully public domain, perfect for this little moon project. The only modifications needed were to trim down the calculations to the moon percentage of right now, and to also check for yesterday's percentage so that we could determine whether the moon was waxing or waning. We were off to the races.
The display
On page load we calculate the percentage of the moon that should be filled. That JS adjusts the CSS attributes of 2 div's which overlap, giving some amount of a crescent shape and updates the title.
The CSS adjustments shift, how far part they are as well as their angle since everything is flipped 180 when decreasing vs increasing, meaning we start from only the silhouette in the background visible and slowly a crescent moon fills it out as the covering div slides to reveal the lit up portion. That covering div is 90% opaque, so that the full outline of the circular moon behind it.
As the phases progress we go from reasonably accurate crescent to exceptionally inaccurate gibbous visualization. I prefer how the chubby crescent looks more than not-quite-circle representation3 I was coming up with, so I went with this. It's conveys where we are in the cycle well enough.
The angle the moon is tilted probably doesn't resemble the angle for where you live. Apparently that varies by latitude, and I don't want the site asking for your location, so that is stuck at roughly what it looks like in my sky. Going with the middle ground of no angle set also looked wrong.
The title attribute
Lastly, I wanted the exact number and direction and such to be available. To that end, the info is added to the title attribute on the moon. Now in addition to explaining that it cycles the theme, you also get a bit of info about the moon.4
The second that the page was loaded, not continuously updating in real time.
I'm not entirely sure that I was trying to achieve the same thing as what their section on phase size was going for, so I have opted not to update the Wikipedia page. Also because I still don't have a fantastic grasp of all of the constants going into the algorithm to properly explain it at a Wikipedia article's high level.
The difficulty was the also in the desire for this to be one continuous animation. Had I been alright with a series cycling stills it would've made more sense in my mind to have them be accurate visually.
This doesn't work well on mobile, so I'll be adjusting that (and some other hover-only features of the site) in the near-ish future.