mirror of
https://github.com/cosinekitty/astronomy.git
synced 2026-03-23 17:03:37 -04:00
1b0ba300d8
I'm not going to use GitHub Pages after all, because it is causing more problems than it is helping. All I really wanted was a way to host live JavaScript browser examples. I will find my own way of hosting just those. The main problem is that GitHub pages uses a different flavor of Markdown than GitHub. This makes it really difficult to get something that works right across both. In general, it doubles how much stuff I have to look at when I make a cosmetic change. So I have already turned off GitHub Pages on this repo, and this commit removes all links and references to it.
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="../../source/js/astronomy.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>
|