Simulating the 2017 Solar Eclipse From Anywhere in the U.S.

June 4, 2019 |

This is one of my all-time favorite projects at TIME: A precisely accurate simulation of the total solar eclipse that traversed the entire continental United States on August 21, 2017, tracing a path in the umbra zone that totaled 174,250 square miles by our calculation. It was the event of the summer, and we wanted to reproduce what it would look like from anywhere.

The following interactive is a demo of an interactive simulation I created for TIME.com in August 2017. You can view the complete original version here.

What was so much fun about the project was that it came together through the most literal means possible: Calculating the precise coordinates of the Earth, Moon and Sun on August 21, 2017, feeding those coordinates into a live 3D simulation powered by THREE.js, and then placing the camera at any given point in the country and pointing it upward. While this demo is in a fixed spot, the live version allows one to search for any location or ZIP code.

Getting the precise coordinates of the three celestial bodies didn't require any orbital mechanics (on my end). NASA publishes and incredibly sophisticated toolkit called SPICE that allows one to pull extremely precise celestial coordinates of planets, moons, spacecraft, and a whole host of other objects relative to other objects. (Remember: There is no absolute coordinate system in outer space!)

Fortunately, there is also a mature, well-documented Python library called SpiceyPy that vastly facilitates retrieving this data. If you're interested, I recommend their great tutorial on downloading and visualizing the Cassini spacecraft's position relative to Saturn.

Here's the position of the Moon, relative to Earth, in the month of August 2017, including the day of the eclipse in orange:

Calculating the coordinates accurately did involve some knowledge of astrophysics, since the Sun is so distant that the 3D engine has to account for the 8.3 minutes required for its light to reach the Earth. I'm eternally grateful to the good citizens on the StackExchange astronomy channel.

This was my first significant foray into 3D simulation, which is a fairly different style of visualization since one is simultaneously the architect, director and engineer of the animation. If you're interested in programmatic animation, I don't recommend starting in outer space, where a marginal shift in camera angle can make everything on the screen vanish.

What I found so stunning was that the THREE.js engine was so sophisticated that it could scale the Sun, which had a unitless radius of 695,700, to almost exactly the size of the Moon (radius 1,737) because it was positioned at a distance of 149597870.7 from Earth. In other words, there was no need to artificially scale the objects.

Probably the most difficult part of the project was learning just enough OpenGL to write a ShaderMaterial to emulate the Sun's halo, which permeates the Moon's complete occlusion. That was a steep learning curve since it uses a different language.

It was all worth it: On the day of the eclipse, TIME paid for a colleague and I to rent a four-seater to fly to Greensville, S.C., the closest general aviation airport inside the umbra zone, where we saw the complete eclipse (and hence the reason I chose Greenville for the demo). I took the following photo at 2:17 p.m. EDT. You can be the judge, but I believe it matches the simulation at that time perfectly.