mirror of
https://github.com/cosinekitty/astronomy.git
synced 2025-12-28 18:20:34 -05:00
21c053dbed
The npm dependencies required are now installed locally inside the generate folder. Cleaned up the Astronomy object closure for TS and kept it for the Browser bundle. We will have some usage examples in the website.
155 lines
6.0 KiB
HTML
155 lines
6.0 KiB
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"> 0°</span> = New Moon</li>
|
|
<li><span class="Numeric"> 90°</span> = First Quarter</li>
|
|
<li><span class="Numeric">180°</span> = Full Moon</li>
|
|
<li><span class="Numeric">270°</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 < 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>
|