Screenshot of Earth/Sun app

Figure 1: A screenshot of the Earth/Sun Relationship app running inside a web browser.

Launch app in new tab...

This aim of this app is to model the orbital relationship between the Earth and the Sun that results in what we see as relative solar motion. You can use the buttons located in the top-left to switch between geo-centric (where the Earth is the view focus) and helio-centric (where the Sun is the view focus), as well as selecting various useful dates and times. The button group in the bottom-left corner allow you to toggle the overlay of information useful for understanding the various characteristics of the relationship.

For example, turn on the Twilight and Circles overlays and then select Summer Soltice in the Useful Dates menu (calendar icon). Click the Play button to animate the time and then look at the North and South poles to clearly see why the Arctic and Antarctic Circles are located where they are. You can do something similar with the Sub-Solar and Tropics options. There are several more that are worth exploring for yourself, such as looking at the Sun-path as you adjust the site latitude and seeing how Declination angle changes with date.


This is another HTML5 version of one of my Java applets in Processing. Having recently done some low-level optimisation of my solar calculations, I needed a better way to actually see the code in action and to interactively put it through its paces. Even the most extensive test suite is never a substitute for a good hands-on visualisation.

Just doing this app I found really useful and even insightful. Working out different ways to show the various characteristics and how best to handle the two planetary projections actually changed how I thought about the calculations and led to some useful improvements. Hopefully some others might find it similarly useful as a way of better understanding solar motion.

Interesting Features

The following are some of the more interesting features of this app that I had quite a bit of fun implementing:

  • The simulated atmosphere in the geocentric view whose glow tracks solar position and fades away when in shadow,

  • Getting the star-field and Sun position to approximate infinite distance when panning and moving the view without compromising on too big a near/far depth buffer,

  • The texture blend between day-lit and shadowed regions of the Earth that show night lights as it rotates,

  • The enhanced twilight banding when the Solar Horizon option is overlaid, and

  • Visualising the distinction between geometric and actual sunrise/sunset due to the size of the solar disk and atmospheric refraction.

Change Log

0.0.3 2016-10-13


  • New coloured orbit ranges for each season within the helio-centric view.

  • Much improved JSON settings editor with ability to load/save/share settings.


  • Updated it to the latest core framework in line with other apps.

  • Improved animation with better control over animation speeds.

  • Ironed out a few iOS quirks, but it still occasionally shows a double-size canvas on the iPad. If this happens, don’t tap the refresh button but click in the address bar and press the Enter key on the virtual keyboard to reload the page.

0.0.2 2015-02-14


  • Made SLIDER: item in bottom-right button group a toggle for the visibility of the right-hand slider.

  • Added ‘Settings Data’ () menu with options to import, view and edit application settings.

  • Added ability to store and reset current settings as the default startup configuration.

0.0.1 2014-11-08

  • Initial release.

Click here to comment on this page.