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

Launch app in new tab...

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

Example Views

Select different views and data overlays.
Figure 2a: Select different views and data overlays.
Even set a dynamic Sun's-eye view.
Figure 2b: Even set a dynamic Sun's-eye view
Show exact civil, nautical and astronomical twilight zones.
Figure 2c: Show civil, nautical and astronomical twilight.
Get a helio-centric view of the Earth's orbit.
Figure 2d: Get a helio-centric view of the Earth's orbit.
Interactively illustrate latitude/longitude angles.
Figure 2e: Interactively illustrate latitude/longitude angles.
Use Google Maps to find or select a location.
Figure 2f: Use Google Maps to find or select a location.


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 sunrise/sunset and twilight zone indicators shown when the Twilight 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.4 2018-12-23


  • A new popover for selecting components and setting the size of the Sun-path diagram shown at the current geographic location.

  • A new Explanatory Tools menu to aid with interactive explanations and demonstrations of various aspects of solar position.

  • A new display that highlights the latitude and longitude angles of the current geographic location as well as the planes on which they lie. To toggle this on/off, select the Highlight Latitude/Longitude item in the Explanatory Tools menu.

  • The ability to use a white background instead of the black of space in order to make printable screenshots much simpler. To toggle this on/off, select the Toggle White Background item in the Explanatory Tools menu.

  • The ability to click multiple times on each of the view icons (and keys 1-6) to cycle in 90 or 180 degree increments based on view type, including when the view is linked to the direction of the Sun.


  • Solved an issue with the Earth’s orbit in the helio-centric view which caused the sub-solar angle indicator to not point directly at the Sun at certain times of the year. Now the reverse projection is much more accurate.

  • Changed the North and South Pole indicators from thick lines to extruded shapes as Google Chrome no longer supports line thickness in WebGL.

  • Fixed some issues with draw order when reducing the surface opacity in the Display Settings popover.

  • Changed the speed of movement when using the WASDQZ and arrow keys to interactively fly around the model.

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.