(zuletzt geändert am 5. April 2020 von Marc)
Eine dynamische Uhr, realisiert mit JavaScript.
Die ursprüngliche Idee hinter der Uhr war eigentlich ein langsamer Übergang von einer Ziffer zur nächsten. Zwischen 2:00 Uhr und 2:30 Uhr sollte sich die „2“ langsam verändern, aber immer noch als „2“ erkennbar bleiben. Ab 2:31 Uhr dann sollte die „3“ langsam in der veränderten „2“ sichtbar werden.
Nach den ersten „Gehversuchen“ wurde klar, dass das nicht funktioniert. Die Übergänge wurden daher kurz vor dem Stundenwechsel möglichst fließend animiert. Das Grundkonzept blieb aber erhalten: in der ersten Hälfte des Überganges sollte die Ausgangsziffer als solche erkennbar bleiben, in der zweiten Hälfte erfolgt dann ein schneller Übergang hin zur Endziffer.
Zur Realisierung der Übergänge wurde die Skriptsprache MetaPost verwendet, die es ermöglicht, mit wenigen Koordinaten schöne vektorisierte Kurvenformen zu erzeugen.
Als Beispiel sei hier der Übergang 2→3 beleuchtet. Die Ziffer 2 ist durch fünf Punkte beschrieben. Im ersten Teil der Animation klappt der waagrechte Teil der Ziffer 2 nach unten, bis er senkrecht steht:
In dem nun senkrecht stehenden Teil der 2 werden nun zwei zusätzliche Hilfspunkte angelegt, die dann den unteren Bogen der 3 bilden sollen. Die weißen Punkte im oberen Bereich bleiben unverändert, der Startpunkt und die Spitze wandern ein bisschen in ihre entgültigen Positionen. Dadurch verändert sich auch die Krümmung im oberen Teil der Ziffer:
Kurze Zeit nach der Fertigstellung aller Übergänge zwischen den Ziffern kam der Gedanke auf, auch das Datum (in abgekürzter Form) mit einzubeziehen. Am Beispiel o→r (für den Übergang Do→Fr) wird ersichtlich, wie mit Hilfspfaden gearbeitet wurde.
Im ersten Teil des Übergangs wird ein Segment unten rechts aus dem „o“ herausgeschoben:
Im zweiten Teil der Animation wird ein Hilfspfad definiert, an dem entlang das herausgeschnittene Stück entlang gleitet und schließlich zum senkrechten r-Strich wird:
Für jeden Übergang wurden 100 Teilbilder berechnet; zusammen mit einigen unveränderten Elementen und einem animierten „o“ in Form einer Uhr sind 10.568 Grafiken generiert worden, um die animierte Uhr zu erzeugen.
Mittels einiger Skripte konnten die Pfadinformationen in ein JavaScript-Objekt umgewandelt werden, das die benötigten Vektorgrafiken im Browser zusammensetzt und passend abruft. Die Quelldateien sind unter GitHub frei verfügbar.
Die Uhr ist unter hohlart.de/morphclock abrufbar. Man kann dort verschiedene Zeit- und Datumsformate einstellen sowie die einzelnen Übergänge detailliert einsehen.
Weiterhin habe ich versucht, möglichst detaillierte Zeitinformationen zu erhalten (speziell im Hinblick auf die Umstellung Sommer-/Winterzeit und ggf. eingefügte Schaltsekunden, die einen Übergang 23:59:59 → 23:59:60 → 00:00:00 erfordern) und bin auf die Uhr der Physikalisch-Technischen Bundesanstalt gestoßen, die Dr. Martin Gutbrod programmiert hat. Herr Gutbrod hat mir freundlicherweise erlaubt, seinen Quellcode als Basis für meine Uhr zu verwenden.
Im April 2020 wurde auf die neue WebSocket-Schnittstelle umgestellt und die Schnittstelle aus dem Kern-Paket herausgelöst. Somit kann die morphclock mit und ohne Zeitanbindung im Browser verwendet werden.