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

Fix moon visibility on dark background

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 08:13:16 +02:00
1 parent d8a644864b
commit c91a278294
1 file changed
+10 -8
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+10 -8
View File
@@ -76,7 +76,6 @@
<body>
<div id="vanta"></div>
<div id="info-panel">
<div id="debug" style="font-size:10px;color:#999187;"></div>
<svg id="analog-clock" viewBox="0 0 200 200">
<!-- Clock face -->
<circle cx="100" cy="100" r="95" fill="rgba(28,27,31,0.3)" stroke="#e6dfd1" stroke-width="2"/>
@@ -123,8 +122,9 @@
<!-- Moon position (with phase) -->
<g id="rpg-moon">
<circle id="rpg-moon-bg" cx="100" cy="100" r="9" fill="#1c1b1f"/>
<circle id="rpg-moon-bg" cx="100" cy="100" r="9" fill="#b0a89a" stroke="#e6dfd1" stroke-width="1"/>
<path id="rpg-moon-lit" d="" fill="#e6dfd1"/>
<path id="rpg-moon-dark" d="" fill="#54514f"/>
</g>
<!-- Clock hands (on top of everything) -->
@@ -261,6 +261,7 @@
var rpgSunCore = document.getElementById('rpg-sun-core');
var rpgMoon = document.getElementById('rpg-moon');
var rpgMoonLit = document.getElementById('rpg-moon-lit');
var rpgMoonDark = document.getElementById('rpg-moon-dark');
var sunRiseArrow = document.getElementById('sun-rise-arrow');
var sunSetArrow = document.getElementById('sun-set-arrow');
var moonRiseArrow = document.getElementById('moon-rise-arrow');
@@ -430,7 +431,9 @@
icon.innerHTML = '';
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', '#1c1b1f');
bg.setAttribute('fill', '#b0a89a');
bg.setAttribute('stroke', '#e6dfd1');
bg.setAttribute('stroke-width', '0.5');
icon.appendChild(bg);
if (phase < 0.5) {
var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -455,15 +458,19 @@
function renderRpgMoon(phase) {
var r = 9;
// Always start with empty dark path
rpgMoonDark.setAttribute('d', '');
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;
// Lit area (right side, waxing)
rpgMoonLit.setAttribute('d', 'M 100 91 A 9 9 0 0 1 100 109 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 100 91 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;
// Lit area (left side, waning)
rpgMoonLit.setAttribute('d', 'M 100 91 A 9 9 0 0 0 100 109 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 100 91 Z');
}
}
@@ -570,11 +577,6 @@
getMoonPhaseText(moonIllum.phase) + ' ' + Math.round(moonIllum.fraction * 100) + '%';
renderMoonPhaseIcon(moonIllum.phase);
renderRpgMoon(moonIllum.phase);
document.getElementById('debug').textContent =
'rpg-moon exists: ' + (rpgMoon !== null) +
' | lit: ' + (rpgMoonLit !== null) +
' | moonPos: ' + (moonPos ? Math.round(moonPos.point.x) + ',' + Math.round(moonPos.point.y) : 'null');
}
var startTime = Date.now();