zink/animated_wallpaper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve moon phase visualization using fraction for terminator ellipse

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 08:37:11 +02:00
1 parent 5ea523e6c4
commit b4c3669006
1 file changed
+56 -33
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+56 -33
View File
@@ -193,7 +193,7 @@
<!-- Moon position (with phase) -->
<g id="rpg-moon">
<circle id="rpg-moon-bg" cx="0" cy="0" r="9" fill="#b0a89a" stroke="#e6dfd1" stroke-width="1"/>
<circle id="rpg-moon-bg" cx="0" cy="0" r="9" fill="#1c1b1f" stroke="#999187" stroke-width="1"/>
<path id="rpg-moon-lit" d="" fill="#e6dfd1"/>
<path id="rpg-moon-dark" d="" fill="#54514f"/>
</g>
@@ -219,7 +219,7 @@
</div>
<div class="info-row">
<div class="info-icon">
<svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#e6dfd1"/></svg>
<svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#1c1b1f"/></svg>
</div>
<div class="info-content"><span class="info-label">Mondphase</span><span class="info-value" id="moon-phase-text">--</span></div>
</div>
@@ -500,50 +500,73 @@
}
}
function renderMoonPhaseIcon(phase) {
function renderMoonPhaseIcon(phase, fraction) {
var icon = document.getElementById('moon-phase-icon');
icon.innerHTML = '';
var r = 9;
// Background: dark full circle
var bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
bg.setAttribute('cx', '12'); bg.setAttribute('cy', '12'); bg.setAttribute('r', '9');
bg.setAttribute('fill', '#b0a89a');
bg.setAttribute('stroke', '#e6dfd1');
bg.setAttribute('cx', '12'); bg.setAttribute('cy', '12'); bg.setAttribute('r', r);
bg.setAttribute('fill', '#1c1b1f');
bg.setAttribute('stroke', '#999187');
bg.setAttribute('stroke-width', '0.5');
icon.appendChild(bg);
// Calculate terminator ellipse radius from fraction
// rx > 0 (crescent): terminator curves into the lit area
// rx < 0 (gibbous): terminator curves into the dark area
var rx = r * (1 - 2 * fraction);
var path;
if (phase < 0.5) {
var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
var r = 9;
var phaseAngle = phase * 360;
var rx = r * Math.abs(Math.cos(phaseAngle * Math.PI / 180));
var sweepFlag = phase < 0.25 ? 0 : 1;
lit.setAttribute('d', 'M 12 3 A 9 9 0 0 1 12 21 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 12 3 Z');
lit.setAttribute('fill', '#e6dfd1');
icon.appendChild(lit);
// Waxing: right side lit, left side dark
if (rx > 0) {
// Crescent
path = 'M 12 3 A 9 9 0 0 0 12 21 A ' + rx + ' 9 0 0 1 12 3 Z';
} else {
// Gibbous
path = 'M 12 3 A 9 9 0 0 0 12 21 A ' + Math.abs(rx) + ' 9 0 0 0 12 3 Z';
}
} else {
var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
var r = 9;
var phaseAngle = (1 - phase) * 360;
var rx = r * Math.abs(Math.cos(phaseAngle * Math.PI / 180));
var sweepFlag = phase > 0.75 ? 0 : 1;
lit.setAttribute('d', 'M 12 3 A 9 9 0 0 0 12 21 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 12 3 Z');
lit.setAttribute('fill', '#e6dfd1');
icon.appendChild(lit);
// Waning: left side lit, right side dark
if (rx > 0) {
// Crescent
path = 'M 12 3 A 9 9 0 0 1 12 21 A ' + rx + ' 9 0 0 0 12 3 Z';
} else {
// Gibbous
path = 'M 12 3 A 9 9 0 0 1 12 21 A ' + Math.abs(rx) + ' 9 0 0 1 12 3 Z';
}
}
var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
lit.setAttribute('d', path);
lit.setAttribute('fill', '#e6dfd1');
icon.appendChild(lit);
}
function renderRpgMoon(phase) {
function renderRpgMoon(phase, fraction) {
var r = 9;
rpgMoonDark.setAttribute('d', '');
var rx = r * (1 - 2 * fraction);
var path;
if (phase < 0.5) {
var phaseAngle = phase * 360;
var rx = r * Math.abs(Math.cos(phaseAngle * Math.PI / 180));
var sweepFlag = phase < 0.25 ? 0 : 1;
rpgMoonLit.setAttribute('d', 'M 0 -9 A 9 9 0 0 1 0 9 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 0 -9 Z');
if (rx > 0) {
path = 'M 0 -9 A 9 9 0 0 0 0 9 A ' + rx + ' 9 0 0 1 0 -9 Z';
} else {
path = 'M 0 -9 A 9 9 0 0 0 0 9 A ' + Math.abs(rx) + ' 9 0 0 0 0 -9 Z';
}
} else {
var phaseAngle = (1 - phase) * 360;
var rx = r * Math.abs(Math.cos(phaseAngle * Math.PI / 180));
var sweepFlag = phase > 0.75 ? 0 : 1;
rpgMoonLit.setAttribute('d', 'M 0 -9 A 9 9 0 0 0 0 9 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 0 -9 Z');
if (rx > 0) {
path = 'M 0 -9 A 9 9 0 0 1 0 9 A ' + rx + ' 9 0 0 0 0 -9 Z';
} else {
path = 'M 0 -9 A 9 9 0 0 1 0 9 A ' + Math.abs(rx) + ' 9 0 0 1 0 -9 Z';
}
}
rpgMoonLit.setAttribute('d', path);
}
function updateClockAndEvents() {
@@ -648,8 +671,8 @@
var moonIllum = SunCalc.getMoonIllumination(now);
document.getElementById('moon-phase-text').textContent =
getMoonPhaseText(moonIllum.phase) + ' ' + Math.round(moonIllum.fraction * 100) + '%';
renderMoonPhaseIcon(moonIllum.phase);
renderRpgMoon(moonIllum.phase);
renderMoonPhaseIcon(moonIllum.phase, moonIllum.fraction);
renderRpgMoon(moonIllum.phase, moonIllum.fraction);
}
var startTime = Date.now();