Moon phase visualizer is a simple demo to understand how Moon's phases (and eclipses) occur.
Fig A (main left visual) - shows Moon's position during different phases. It shows the top view of Moon's orbit around Earth.
Fig a (top right visual) - shows Moon's shape during different phases for the position in Fig A.
The dotted portion of the moon in Fig A shows the side of the moon which is always facing the Earth. This is called Tidal Locking. Tidal Locking occurs because moon's rotation around its axis takes the same time taken for moon's rotation around earth.
Fig b (bottom left visual)- shows how earth and moon shadows have to coincide with line of nodes (the red line) for eclipses to occur.
If Fig b is visualized in 3 dimensional space, the bottom end of line of nodes will be facing towards the viewer, and the top end will be facing away from the viewer. Earth and Moon's shadow in these positions will also be facing towards and away respectively.
Moon's orbit around the earth is tilted by an angle of 5.1 degrees. Due to this moon will always miss the earth's shadow passing outside of it except in line of nodes.
Lunar Eclipse occurs when earth is between moon and the sun. This occurs only on a full moon day (Day 14 in Fig a).
Solar Eclipse occurs when moon is between earth and the sun. This occurs only on a new moon day (Day 29.5 in Fig a).
Eclipses occur only in the line of nodes.
Eclipses happen when lines of nodes (red line in Fig b) co-incides with shadow of earth or moon. Watch the lines of nodes turn green for every few revolutions (approx 3-4) when the shadow of moon and earth coincides with them. If the moon is in full moon position then it is a lunar eclipse; if in new moon position it is a solar eclipse. The part of the shadow shown is called 'umbra' which results in Total Eclipses. There is another component of shadow called 'penumbra' (not shown in the figure) which results in partial eclipses.
Feedback & Contributing
Feedbacks, Improvements and Contributions are greatly appreciated. If you are familiar with Github, you can find the source computer program for this demo here. Check out Github issue tracker here for current issues and problems.
This demo is built using d3.js. There is a very brief introduction to d3.js with some of the elements of this demo, which you can check out here.
This demo is currently best viewed in chrome. Tested in Chrome and Firefox.
This demo is not to scale. They are not shown with complete scientific accuracy for demonstration purposes.