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

Move rise/set markers inside, use unified sun radius

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 07:41:13 +02:00
1 parent 18c063c623
commit 8a0ac80341
1 file changed
+23 -26
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+23 -26
View File
@@ -96,16 +96,16 @@
<!-- Hour marks --> <!-- Hour marks -->
<g id="hour-marks"></g> <g id="hour-marks"></g>
<!-- Sunrise/sunset markers (outside clock) --> <!-- Sunrise/sunset markers (inside, on inner orbit) -->
<g id="sun-marker" fill="#e0914f"> <g id="sun-marker" fill="#e0914f">
<circle id="sunrise-marker" cx="100" cy="100" r="3"/> <rect id="sunrise-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
<circle id="sunset-marker" cx="100" cy="100" r="3"/> <rect id="sunset-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
</g> </g>
<!-- Moonrise/moonset markers (outside clock) --> <!-- Moonrise/moonset markers (inside, on inner orbit) -->
<g id="moon-marker" fill="#b0a89a"> <g id="moon-marker" fill="#b0a89a">
<circle id="moonrise-marker" cx="100" cy="100" r="3"/> <rect id="moonrise-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
<circle id="moonset-marker" cx="100" cy="100" r="3"/> <rect id="moonset-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
</g> </g>
<!-- Clock hands --> <!-- Clock hands -->
@@ -411,20 +411,22 @@
return { x: 100 + Math.cos(angle) * r, y: 100 + Math.sin(angle) * r }; return { x: 100 + Math.cos(angle) * r, y: 100 + Math.sin(angle) * r };
} }
var sunRadius = 55; var sunOrbitRadius = 62;
var markerRadius = 48;
var sr = sunriseNext.date || new Date(now.getFullYear(), now.getMonth(), now.getDate(), 6, 0, 0); var sr = sunriseNext.date || new Date(now.getFullYear(), now.getMonth(), now.getDate(), 6, 0, 0);
var ss = sunsetNext.date || new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0, 0); var ss = sunsetNext.date || new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0, 0);
var srPoint = timeToPoint(sr, sunRadius); var srPoint = timeToPoint(sr, sunOrbitRadius);
var ssPoint = timeToPoint(ss, sunRadius); var ssPoint = timeToPoint(ss, sunOrbitRadius);
rpgArcBg.setAttribute('d', 'M ' + srPoint.x + ' ' + srPoint.y + ' A ' + sunRadius + ' ' + sunRadius + ' 0 0 1 ' + ssPoint.x + ' ' + ssPoint.y); rpgArcBg.setAttribute('d', 'M ' + srPoint.x + ' ' + srPoint.y + ' A ' + sunOrbitRadius + ' ' + sunOrbitRadius + ' 0 0 1 ' + ssPoint.x + ' ' + ssPoint.y);
if (now >= sunTimes.sunrise && now <= sunTimes.sunset) { if (now >= sunTimes.sunrise && now <= sunTimes.sunset) {
var sunP = timeToPoint(now, sunRadius); var sunP = timeToPoint(now, sunOrbitRadius);
rpgSun.setAttribute('cx', sunP.x); rpgSun.setAttribute('cx', sunP.x);
rpgSun.setAttribute('cy', sunP.y); rpgSun.setAttribute('cy', sunP.y);
rpgSun.setAttribute('opacity', '1'); rpgSun.setAttribute('opacity', '1');
} else { } else {
var sunP = timeToPoint(now, sunRadius); var sunP = timeToPoint(now, sunOrbitRadius);
rpgSun.setAttribute('cx', sunP.x); rpgSun.setAttribute('cx', sunP.x);
rpgSun.setAttribute('cy', sunP.y); rpgSun.setAttribute('cy', sunP.y);
rpgSun.setAttribute('opacity', '0.25'); rpgSun.setAttribute('opacity', '0.25');
@@ -439,32 +441,27 @@
moonVisible = (now >= moonTimes.rise || now <= moonTimes.set); moonVisible = (now >= moonTimes.rise || now <= moonTimes.set);
} }
} }
var moonP = timeToPoint(now, sunRadius); var moonP = timeToPoint(now, sunOrbitRadius);
rpgMoon.setAttribute('cx', moonP.x); rpgMoon.setAttribute('cx', moonP.x);
rpgMoon.setAttribute('cy', moonP.y); rpgMoon.setAttribute('cy', moonP.y);
rpgMoon.setAttribute('opacity', moonVisible ? '1' : '0.25'); rpgMoon.setAttribute('opacity', moonVisible ? '1' : '0.25');
var outerRadius = 98; var srM = timeToPoint(sr, markerRadius);
var srM = timeToPoint(sr, outerRadius); sunriseMarker.setAttribute('transform', 'translate(' + srM.x + ', ' + srM.y + ')');
sunriseMarker.setAttribute('cx', srM.x); var ssM = timeToPoint(ss, markerRadius);
sunriseMarker.setAttribute('cy', srM.y); sunsetMarker.setAttribute('transform', 'translate(' + ssM.x + ', ' + ssM.y + ')');
var ssM = timeToPoint(ss, outerRadius);
sunsetMarker.setAttribute('cx', ssM.x);
sunsetMarker.setAttribute('cy', ssM.y);
if (moonTimes.rise) { if (moonTimes.rise) {
var mrM = timeToPoint(moonTimes.rise, outerRadius); var mrM = timeToPoint(moonTimes.rise, markerRadius);
moonriseMarker.setAttribute('cx', mrM.x); moonriseMarker.setAttribute('transform', 'translate(' + mrM.x + ', ' + mrM.y + ')');
moonriseMarker.setAttribute('cy', mrM.y);
moonriseMarker.setAttribute('opacity', '1'); moonriseMarker.setAttribute('opacity', '1');
} else { } else {
moonriseMarker.setAttribute('opacity', '0'); moonriseMarker.setAttribute('opacity', '0');
} }
if (moonTimes.set) { if (moonTimes.set) {
var msM = timeToPoint(moonTimes.set, outerRadius); var msM = timeToPoint(moonTimes.set, markerRadius);
moonsetMarker.setAttribute('cx', msM.x); moonsetMarker.setAttribute('transform', 'translate(' + msM.x + ', ' + msM.y + ')');
moonsetMarker.setAttribute('cy', msM.y);
moonsetMarker.setAttribute('opacity', '1'); moonsetMarker.setAttribute('opacity', '1');
} else { } else {
moonsetMarker.setAttribute('opacity', '0'); moonsetMarker.setAttribute('opacity', '0');