demo/browser/moonphase.html

<!DOCTYPE html>
<html>
    <head>
        <title>Moon Phase Calculator</title>
        <meta name="viewport" content="width=device-width,maximum-scale=2">
        <link rel="stylesheet" href="astro_demo.css" />
    </head>
    <body id="main_content_wrap" class="inner">
        <h1>Moon Phase Calculator</h1>

        <table border="1" cellpadding="5" cellspacing="0">
            <tr>
                <td><span id="CurrentDateTime" class="Numeric"></span></td>
                <td>Moon phase = <span id="MoonPhaseAngle"></span> degrees.</td>
            </tr>

            <tr>
                <td><span id="DateTime1" class="Numeric"></span></td>
                <td><span id="Quarter1"></span></td>
            </tr>

            <tr>
                <td><span id="DateTime2" class="Numeric"></span></td>
                <td><span id="Quarter2"></span></td>
            </tr>

            <tr>
                <td><span id="DateTime3" class="Numeric"></span></td>
                <td><span id="Quarter3"></span></td>
            </tr>

            <tr>
                <td><span id="DateTime4" class="Numeric"></span></td>
                <td><span id="Quarter4"></span></td>
            </tr>
        </table>

        <p>
            Above is a table of the current Moon phase along with predictions of the next
            four quarters of the Moon's orbit. It is updated every second.
        </p>

        <p>
            This is a sample page for the open-source
            <a href="https://github.com/cosinekitty/astronomy/">Astronomy Engine</a>.
            All of the source code and documentation is available there.
            Also, try using your browser's View Source command to look at how this page works.
        </p>

        <p>
            The phases of the Moon are calculated using relative ecliptic longitudes.
            This means that the Moon's position is measured as an angle away from the Sun
            counterclockwise as seen from above the Earth's north pole. This is the same direction
            as the Moon orbits the Earth.
        </p>

        <p>
            The angle is defined along the ecliptic plane,
            which is the plane of the Earth's orbit around the Sun. The Moon does not stay
            within this plane, so its position above or below the ecliptic plane is ignored
            for the sake of calculating phases. This is the way almanacs and calendars
            historically have reported the dates and times of moon phases.
        </p>


        <p>
            The phase angle increases from 0 degrees to 360 degrees over the span of each synodic month.
            Certain values of the phase angle define the four lunar quarters:

            <ul>
                <li><span class="Numeric">&nbsp;&nbsp;0&deg;</span> = New Moon</li>
                <li><span class="Numeric">&nbsp;90&deg;</span> = First Quarter</li>
                <li><span class="Numeric">180&deg;</span> = Full Moon</li>
                <li><span class="Numeric">270&deg;</span> = Third Quarter</li>
            </ul>
        </p>

        <p>
            In your own code, to calculate the Moon's current phase angle, call
            the function <code><a href="../../source/js/#Astronomy.MoonPhase">Astronomy.MoonPhase</a></code>.
        </p>

        <p>
            To predict upcoming lunar quarter phases, call
            <code><a href="../../source/js/#Astronomy.SearchMoonQuarter">Astronomy.SearchMoonQuarter</a></code>
            passing in a Date object to find the first quarter phase after that date and time.
            Then if you want, you can call
            <code><a href="../../source/js/#Astronomy.NextMoonQuarter">Astronomy.NextMoonQuarter</a></code>
            in a loop to iterate over the next consecutive quarter phases.
            Each time, you pass the return value of the previous function call as the argument
            to <code>Astronomy.NextMoonQuarter</code> so it knows where to resume the search.
        </p>

        <p>
            Here is an example that finds the next 100 lunar quarter phases:
        </p>

        <p>
            <pre><code>
    let date = new Date();
    let mq = Astronomy.SearchMoonQuarter(date);
    console.log(mq.quarter, mq.time.date);
    for (let i=1; i &lt; 100; ++i) {
        mq = Astronomy.NextMoonQuarter(mq);
        console.log(mq.quarter, mq.time.date);
    }
            </code></pre>
        </p>
    </body>

    <script src="astronomy.browser.js"></script>
    <script>
        window.onload = function() {
            var QuarterName = ['New Moon', 'First Quarter', 'Full Moon', 'Third Quarter'];

            function Pad(s, w) {
                s = s.toFixed(0);
                while (s.length < w) {
                    s = '0' + s;
                }
                return s;
            }

            function FormatDate(date) {
                var year = Pad(date.getFullYear(), 4);
                var month = Pad(1 + date.getMonth(), 2);
                var day = Pad(date.getDate(), 2);
                var hour = Pad(date.getHours(), 2);
                var minute = Pad(date.getMinutes(), 2);
                var second = Pad(date.getSeconds(), 2);
                return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
            }

            function UpdateScreen() {
                var mq, i;
                var now = new Date();
                var phase = Astronomy.MoonPhase(now);

                document.getElementById('CurrentDateTime').innerText = FormatDate(now);
                document.getElementById('MoonPhaseAngle').innerText = phase.toFixed(3);

                for (i=1; i<=4; ++i) {
                    mq = (i==1) ? Astronomy.SearchMoonQuarter(now) : Astronomy.NextMoonQuarter(mq);
                    document.getElementById(`DateTime${i}`).innerText = FormatDate(mq.time.date);
                    document.getElementById(`Quarter${i}`).innerText = QuarterName[mq.quarter];
                }

                setTimeout(UpdateScreen, 1000);
            }

            UpdateScreen();
        }
    </script>
</html>