https://drajmarsh.bitbucket.io/earthsun.html

# Loading - please wait...

This page requires a reasonably modern HTML5 browser
with both Javascript and WebGL enabled.

[browsers]

If this message is not soon replaced by an interactive 3D model,
then it is likely that your browser does not support this web app.
Check your JavaScript Console for specific error messages.

EARTH/SUN:

  * Settings Data
  * Load Settings...
  * Save Settings...
  * 
  * Edit Settings as JSON...
  * 
  * Store Settings as Default...
  * Clear Default Settings...

  * Useful DatesY
  * Summer Solstice7
  * Autumn/Fall Equinox8
  * Winter Solstice9
  * Spring/Vernal Equinox0

  * Useful TimesT
  * Astronomical Twilight at Dawn1
  * Nautical Twilight at Dawn2
  * Civil Twilight at Dawn3
  * 
  * Sunrise   4
  * Local Noon  12:00 5
  * Solar Noon   6
  * Sunset   7
  * 
  * Civil Twilight at Dusk8
  * Nautical Twilight at Dusk9
  * Astronomical Twilight at Dusk0

  * Normal Increments
  * Finer Increments
  * 
  * Enable Wrapping

SHOW: SP Sun-Path SB Sun-Beam SS Sub-Solar TW Twilight EQ Equator TR 
Tropics CI Circles

SITE LOCATION
Latitude:     
Longitude:    
Timezone:     
DATE AND TIME
Date:         
Time:         
SOLAR INFORMATION
Azi / Alt:    /
Rise / Set:   /
Daylight:     Hrs
TWILIGHT TIMES
Civil:        
Nautical:     
Astronom.:    

ANIMATIONx

[ ]Animate Time
[ ]Animate Date
---------------------------------------------------------------------
[ ]Animate Latitude
[ ]Animate Longitude
---------------------------------------------------------------------

Speed

[                    ]

3D VIEW SETTINGSx

Projection (Shortcut keys: 1 to 6)


 Fit to Canvas                    

DISPLAY SETTINGSx

---------------------------------------------------------------------
[ ]Use White Background

Show a white background without stars to make screen captures better
for printed mediums.

EXPLANATORY TOOLSx

  * Overlays
  * Animations
  * Views

[ ]Show Latitude/Longitude Angles

Highlights the latitude and longitude angles of the current site to
clearly show how positions on the Earth's surface are specified.

---------------------------------------------------------------------
[ ]Show Illuminating Sun Beam

Displays an illustrative beam of light illuminating the Earth
directly from the Sun. This can be useful for more clearly indicating
the direction of the Sun.

Highlight Polar Circles

A short animation that shows how the Arctic and Antarctic circles
mark the extremes of night and day at each season.

---------------------------------------------------------------------
Highlight Tropic Lines

Another short animation that shows the tropics of Cancer and
Capricorn as the extremes of solar declination angle at each of the
solstices.

View from Direction of Sun Toggle Dropdown

  * Directly from the Sun
  * At 90deg to the Sun View
  * At 180deg to the Sun View
  * At -90deg to the Sun View
  * 
  * Toggle Static Sun View
  * Unlock Sun View

An orthographic view where the azimuth and altitude of the camera is
locked relative to the current Sun direction and changes dynamically
whenever solar position changes. Click again to increment the angle,
or select a different view in VIEW SETTINGS to unlock it.

---------------------------------------------------------------------
Latitudinal Elevation View Toggle Dropdown

  * At -90deg to Longitude
  * At 90deg to Longitude
  * 
  * Unlock Side View

An orthographic side view at right angles to the site longitude,
which is useful when explaining the effect of latitude as well as
seasonal changes in solar altitude. Click again to swap sides or
select a different view in VIEW SETTINGS to unlock it.

SUN-PATH DIAGRAMx

[ ]Show Sun-Path at Location
---------------------------------------------------------------------

Indicators

[ ]Sun Position
[ ]Sun Direction
[ ]Sun Angles

Path Lines

[ ]Current Day
[ ]Annual Lines
[ ]Annual Area
[ ]Base Axis
---------------------------------------------------------------------

DATE AND TIMEx

                                   Useful Times

                                     * Astronomical Twilight at Dawn
                                     * Nautical Twilight at Dawn
Useful Dates                         * Civil Twilight at Dawn
                                     * 
  * Summer Solstice                  * Sunrise  
  * Autumn/Fall Equinox              * Local Noon  12:00
  * Winter Solstice                  * Solar Noon  
  * Spring/Vernal Equinox            * Sunset  
                                     * 
                                     * Civil Twilight at Dusk
                                     * Nautical Twilight at Dusk
                                     * Astronomical Twilight at Dusk

---------------------------------------------------------------------

Ordinal day of the year:

Sunrise: , Sunset:

GEOGRAPHIC LOCATIONx

[Use Your Location]  [Map...]

---------------------------------------------------------------------

Time Zone

[(GMT-12:00) International Date Line West                           ]

INFORMATIONx

  * About
  * 3D View
  * Data Entry
  * Credits

Overview

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. As well as displaying a full 3D Sun-path diagram at the
selected site location, you can easily switch between geo-centric and
helio-centric views as well as overlaying some information useful for
understanding various characteristics of the relationship.

For example, turn on the 'Twilight' and 'Circles' overlays and then
select 'Summer Soltice' in the 'Useful Dates' menu (). 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. Worth it if you can spend a bit of time playing around and
experimenting with the model.

Background

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 starfield 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 texture blend between day-lit and shadowed regions of the
    Earth that show night lights as it rotates,
  * The 'View from Sun Position' camera view option in the 3D VIEW
    SETTINGS popover that shows an orthographic view of the Earth
    that synchronises with solar position,
  * The enhanced twilight banding when the 'Twilight' toggle is
    selected in the bottom-left button list, which required some
    interesting GLSL code, and
  * Visualising the distinction between geometric and actual sunrise/
    sunset due to the size of the solar disk and atmospheric
    refraction.

---------------------------------------------------------------------

(c) Dr. Andrew J. Marsh, 2014.

View Manipulation

You can interactively adjust the 3D view of the model using a mouse,
pen or stylus, or by touch on a tablet or phone. You can also use the
items in the 3D View Settings popup.

Rotation:
    Drag with the left/right button or a single finger,
    or use the arrow keys.
Panning:
    Drag with the middle button or two/three fingers,
    or use the A and D keys.
Zooming:
    Use the scroll wheel or pinch with two fingers,
    or use the W and S keys.

---------------------------------------------------------------------

NOTE: You can use the Shift and Ctrl/Meta keys to adjust the
increment of each scroll event or key press.

Keyboard Modifiers

The Shift and Ctrl/Meta keys are used pretty extensively to modify
interactive data entry. This applies to all increment buttons, scroll
wheel motion, slider controls and input elements.

Shift Key:
    Increases input to larger values, usually by ten times or
    significantly larger increments such as 1 month for dates and 1
    hour for times.
Ctrl or Meta Key:
    Decreases input to smaller values, usually by one tenth or the
    smallest reasonable increment such as 1 day for dates or 1 minute
    for times.

---------------------------------------------------------------------

NOTE: You can use the scroll wheel to edit a data value when hovering
over any slider, numeric input or even table rows that indicate their
editibility.

Credits

This page uses the following frameworks/components:

Bootstrap  v3.3.2
Copyright (c) 2011-2015 Twitter, Inc. - github.com/twbs,
http://getbootstrap.com/   (LICENSE)

Bootstrap-popover-x  v1.4.0
Copyright (c) 2014, Kartik Visweswaran, Krajee.com,
https://github.com/kartik-v/bootstrap-popover-x   (LICENSE)

jQuery  v1.11.2
Copyright (c) jQuery Foundation and other contributors,
https://jquery.com/   (LICENSE)

JSON Editor
Copyright (c) 2015 Jos de Jong - github.com/josdejong
https://github.com/josdejong/jsoneditor/   (LICENSE)

JSURL
Copyright (c) 2011 Bruno Jouhier - github.com/Sage
https://github.com/Sage/jsurl/   (LICENSE)

KnockoutJS  v3.2.0
Copyright (c) Steven Sanderson and the Knockout.js team,
http://knockoutjs.com/   (LICENSE)

Knockstrap  v1.2.0
Copyright (c) 2013 Artem Stepanyuk - github.com/faulknercs,
http://faulknercs.github.io/Knockstrap/   (LICENSE)

lightgl.js
Copyright (c) 2011 by Evan Wallace - https://github.com/evanw
https://github.com/evanw/lightgl.js/   (LICENSE)

Leaflet Maps API  v1.4.0
Copyright (c) Cloudmade, Vladimir Agafonkin - github.com/Leaflet,
https://leafletjs.com/   (LICENSE)

OpenStreetMap Map Data
Copyright (c) OpenStreetMap contributors - openstreetmap.org,
https://www.openstreetmap.org/about   (LICENSE)

SnackbarJS
Copyright (c) 2014 Federico Zivolo - github.com/FezVrasta
http://fezvrasta.github.io/snackbarjs/   (LICENSE)

x

[                    ]

Unfortunately most browsers automatically download remotely generated
files into a default location, typically a 'Downloads' folder in your
user area, and do not let you overwrite existing files. This is why a
new filename appears above every time you see this dialog.

If you would like to see a File Save As dialog, you need to
specifically set your browser to prompt you for the location of each
download within its advanced settings.

Why no File Save As dialog ?
Cancel Save File
x

Edit Settings as JSON

[                    ]                       
[                    ]                       
[                    ]                       
[                    ]                       
[                    ]                       
[                    ]                       
[                    ]                       
[                    ]                       
[                    ]                       
[                    ] [                    ]
Text Share
Cancel Read Data
x

Select Location on Map :: Drag marker or dblclick map to set new
location

Location: 0.00, 0.00

Cancel Apply Changes