Filipe: "nehm diese uhr bitte und passe sie so gut wie es geht an, auch
die lichter von sekunden, minuten und stunden perfekt anpassen ...
überrasch mich."
ZWEI DINGE, DIE EINE UHR LEBENDIG MACHEN.
1. DER KOMETENSCHWEIF. Ein Bogen in gleichmaessiger Farbe zeigt einen
STAND. Ein Bogen, der zur Spitze hin heller wird, zeigt eine
RICHTUNG -- man sieht ohne Nachdenken, wo "jetzt" ist und wohin es
laeuft. Bei drei Ringen uebereinander ist das der Unterschied
zwischen Ablesen und Erkennen.
Gebaut als zweites, kuerzeres Segment ueber dem Bogen: die letzten
rund 40 Grad, heller, mit runder Kappe. Ein Verlauf ENTLANG der Bahn
geht in SVG nicht -- `linearGradient` folgt einer Geraden, keiner
Kurve. Zwei Lagen sind der ehrliche Weg dorthin.
Die Lage wird gerechnet, nicht geschaetzt: Bei Umfang U, Fortschritt
a und Schweiflaenge s soll das Segment von (aU - s) bis aU liegen.
Mit `dasharray: s, U-s` beginnt das sichtbare Stueck bei (U - offset),
also ist offset = U*(1-a) + s. Die Laenge wird bei kurzen Boegen
mitgekuerzt -- sonst haenge der Schweif am Anfang einer Minute am
ENDE des Kreises, sichtbar als heller Strich bei zwoelf Uhr.
2. DIE KOEPFE GLEITEN. Bisher sprangen sie einmal je Sekunde. Jetzt
uebernimmt der Browser die Bewegung dazwischen (Ueberblendung von
0,92 s) -- das Skript rechnet weiterhin nur EINMAL je Sekunde. Sechzig
Bildberechnungen je Sekunde wuerden auf einer stundenlang offenen
Seite den Rechner warm halten; diese Loesung kostet nichts.
ZWEI FEHLER DABEI, BEIDE NUR IM BILD ZU SEHEN:
Der erste Versuch rechnete die Winkel aus der vollen Unixzeit, damit
sie immer weiterwachsen (sonst liefe die Ueberblendung einmal je
Minute rueckwaerts durchs Zifferblatt). Ergebnis:
`rotate(1.07333e+10deg)` -- Exponentialschreibweise, Nachkommastellen
weg. Die Koepfe standen sichtbar neben ihren Boegen, der rote auf der
anderen Seite der Uhr. Jetzt zaehlt eine eigene Uhr ab dem ersten
Takt: klein genug zum Rechnen, wachsend genug fuer die Ueberblendung.
Und ich hatte den Schweifen `rotate(-90deg)` gegeben, damit sie bei
zwoelf beginnen -- das SVG ist aber bereits gedreht. Sie standen
dadurch exakt eine Vierteldrehung daneben: oben links, waehrend die
Boegen oben rechts endeten.
NACHGEMESSEN, in Grad statt nach Augenmass:
Kopf gegen Bogenende Abweichung 0,00° / 0,00° / 0,03°
Schweifende gegen Bogen Abweichung 0,0° / 0,0° / 0,0°
pruef-start-ansicht EXIT=0 (140), pruef-css-klassen EXIT=0 (28).
Bei `prefers-reduced-motion` gleiten die Koepfe nicht -- sie springen
dann wie vorher.
Co-Authored-By: Claude Opus 5 <[email protected]>
DogFatherGitandClaude Opus 5
e2bd6d4dc4