This page requires a reasonably modern HTML5 browser
with both Javascript and WebGL enabled.
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.
SITE LOCATION | |
Latitude: | |
Longitude: | |
Timezone: | |
DATE AND TIME | |
Date: | |
Time: | |
SOLAR INFORMATION | |
Azi / Alt: | / |
Rise / Set: | / |
Daylight: | Hrs |
TWILIGHT TIMES | |
Civil: | |
Nautical: | |
Astronom.: |
Projection (Shortcut keys: 1 to 6) |
||
|
||
|
|
Show a white background without stars to make screen captures better for printed mediums.
Highlights the latitude and longitude angles of the current site to clearly show how positions on the Earth's surface are specified.
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.
A short animation that shows how the Arctic and Antarctic circles mark the extremes of night and day at each season.
Another short animation that shows the tropics of Cancer and Capricorn as the extremes of solar declination angle at each of the solstices.
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.
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.
|
|
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.
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.
The following are some of the more interesting features of this app that I had quite a bit of fun implementing:
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.
NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press.
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.
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.
This page uses the following frameworks/components:
Bootstrap v3.3.2
Copyright © 2011-2015 Twitter, Inc. - github.com/twbs,
http://getbootstrap.com/
(LICENSE)
Bootstrap-popover-x v1.4.0
Copyright © 2014, Kartik Visweswaran, Krajee.com,
https://github.com/kartik-v/bootstrap-popover-x
(LICENSE)
jQuery v1.11.2
Copyright © jQuery Foundation and other contributors,
https://jquery.com/
(LICENSE)
JSON Editor
Copyright © 2015 Jos de Jong - github.com/josdejong
https://github.com/josdejong/jsoneditor/
(LICENSE)
JSURL
Copyright © 2011 Bruno Jouhier - github.com/Sage
https://github.com/Sage/jsurl/
(LICENSE)
KnockoutJS v3.2.0
Copyright © Steven Sanderson and the Knockout.js team,
http://knockoutjs.com/
(LICENSE)
Knockstrap v1.2.0
Copyright © 2013 Artem Stepanyuk - github.com/faulknercs,
http://faulknercs.github.io/Knockstrap/
(LICENSE)
lightgl.js
Copyright © 2011 by Evan Wallace - https://github.com/evanw
https://github.com/evanw/lightgl.js/
(LICENSE)
Leaflet Maps API v1.4.0
Copyright © Cloudmade, Vladimir Agafonkin - github.com/Leaflet,
https://leafletjs.com/
(LICENSE)
OpenStreetMap Map Data
Copyright © OpenStreetMap contributors - openstreetmap.org,
https://www.openstreetmap.org/about
(LICENSE)
SnackbarJS
Copyright © 2014 Federico Zivolo - github.com/FezVrasta
http://fezvrasta.github.io/snackbarjs/
(LICENSE)