This page requires a reasonably modern HTML5 browser with
If this message is not quickly replaced by an interactive 3D model,
then it is likely that your browser does not support this web app.
|Azi / Alt:||/|
|Rise / Set:||/|
Ordinal day of the year:
Sunrise: , Sunset:
The aim of this app is to demonstrate the relationship between geographic location and solar position throughout the year. You can use the map to drag the location around and interactively see how the Sun-path diagram and shadow projections change. You can also directly relate the 3D Sun-path and day-length, as well as a range of different 2D Sun-path projections.
As it turned out, there was scope for some pretty fundamental optimisations, so now it's even quick enough on an iPad as well as most of my old Android tablets.
Thus, the key to fast animations is to offload as much work as possible onto the SVG engine, or even the browser rendering engine. This can be done by, for example, transforming components instead of regenerating them, using CSS3 animations and transitions, interpolating between pre-built elements instead of regenerating new elements each time, etc. For me, this is the really fun bit as you often have to completely rethink how to do things before you finally get that vital Eureka moment.
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: