Die Info-Website
von Falk Joensson

Sonstige Themen:01. Über den Bildschirmschoner

Herzlichen Glückwunsch! Du hast das Easteregg dieser Website gefunden. Wenn du nicht auf den Bildschirmschoner warten willst (1 Minute auf dieser Seite, einige Minuten auf allen anderen), kannst du nämlich einfach "Joensson" eintippen, um die Easteregg-Version des Bildschirmschoners zu starten. Was du dann siehst, ist zur Gänze meine eigene Arbeit, die Graphiken, die Programmierung und insbesondere die dahinterstehende Mathematik. Beschreibung Der reguläre Bildschirmschoner hat 6 Bälle in 3 Farben, die Easteregg-Version hat 18 Bälle in 3 Farben sowie einen speziellen schwarzen mit meinem Gesicht. Die 3 Farben werden zufällig aus 6 verschiedenen ausgewählt (rot, grün, blau, orange, türkis, lila). Ebenso gibt es 3 Versionen des Easteregg-Extraballs. Das Hauptlogo "FJ" ist normalerweise undurchsichtig, beim Easteregg ist es jedoch leicht transparent. Nur die Bildschirmschoner-Version trägt den Text "falkj.info Bildschirmschoner". Beide Versionen beendest du, indem du entweder irgendeine Taste drückst (außer Tab) oder indem du das fliegende "FJ" mit dem Maus-Fadenkreuz streifst. Wie funktioniert das? Das FJ-Logo und die Bälle sind PNG-Grafiken (PNG bietet einen Transparenz-Kanal und komprimiert ohne Qualitätseinbußen), die mittels CSS-Positionierung über den Bildschirm bewegt werden, animiert durch einen JavaScript-Timer. Hier als Beispiel das Bild des roten Balls: ein roter Ball Und nun animiere ich es: Den dreidimensionalen Eindruck erzeuge ich, indem ich die Größe der Bälle verändere (strecken/stauchen) und ihren CSS-Wert z-index (z-Ebene). Das obige Bild des roten Balls, von deinem Webbrowser via CSS auf verschiedene Größen gebracht: Eine Animation der Größe: Und nun kombiniert mit Bewegung: Die CSS-Eigenschaft "z-index" definiert, in welcher Reihenfolge Elemente übereinander gelegt werden, was die dritte Dimension konstituiert. Das FJ-Logo dient hier als Bezugspunkt:
Die Bewegungsunschärfe erreiche ich, indem ich dem Ball einfach zwei transparente Kopien nachschicke. Hier sind die drei Versionen des roten Balls: ein undurchsichtiger roter Ballder rote Ball, 50 % transparentder rote Ball, 75 % transparentl Ihre Transparenz ist 0 vs 50 vs 75 %. Zunächst noch einmal Bewegung ohne Unschärfe: Und jetzt mit Bewegungsunschärfe: Zu den organischen Bewegungsmustern: Die Bälle folgen jeweils unsichtbaren virtuellen Punkten, die sich ihrerseits ganz unorganisch linear in langsamen, einem Zufallsmuster folgenden Zickzackbahnen umherbewegen. Die sichtbaren Bälle folgen ihnen mit einer Art Massenträgheit, erzeugt mit einem Algorithmus, der fachsprachlich als Infinite-Reponse Low-Pass Filter (IRLPF) klassifiziert werden kann (Tiefpassfilter mit unendlichem Nachhall). Wenn Z die Position des virtuellen Zielpunkts ist und B den Ball repräsentiert, der ihm folgt, dann müssen wir in jedem Animationsschritt als Erstes ermitteln, wohin es B zieht, müssen also seinen Zielvektor Vz bestimmen:
Vz := Z-Balt
Ohne Massenträgheit würde B einfach direkt auf Z aufspringen und auf ihm Huckepack reiten:
Bneu := Balt+Vz
Bneu würde zu Balt+(Z-Balt) =Z. Daher müssen wir einen zweiten Vektor, den Vektor träger Masse Vm, einführen, der den Ball animieren wird, nachdem er von Vz mit einem Massenträgheitsfaktor F beeinflusst wurde, den wir auf einen Wert zwischen 0 (keine Trägheit, Huckepackfahrt) und 1 (vollständige Trägheit, unverrückbar) setzen können.
Vm, neu := Vm, alt*F + (1-F)*Vz
Bneu := Balt+Vm
Wissenschaftlich ausgedrückt ist dies, wie oben schon erwähnt, ein IRLPF (infinite-reponse low-pass filter). Und so sieht das dann beispielsweise aus, folgt unser roter Ball dem hier durch einen grünen Ball dargestellten Z mit F=0,95 (95-prozentige Massenträgheit): Da die Animation recht hochfrequent läuft, ist selbst diese hohe Massenträgheit fast noch ein Huckepackfahren. Erhöhen wir F auf 99 % Massenträgheit: Das sieht etwas interessanter aus, aber erhöhen wir es noch weiter, etwa auf 99,8 %:: Das wirkt nun endlich wirklich natürlich, ist die angestrebte organische Bewegung. Wenn wir es aber übertreiben, und sei es nur ein klein wenig, gerät die Animation aus den Fugen. Nur 0,1 % mehr Massenträgheit als eben, F=0,999, und das Ergebnis sieht so aus: Der Bildschirmschoner kombiniert - 3-dimensionale CSS-Animation (x = left, y = top, z = z-index und Bildgrößen) - eine gut ausbalancierte IRLPF-Massenträgheits-Physik - Bewegungsunschärfe-Animation Für weitere Informationen zum Bildschirmschoner, und um ein wenig mit ihm zu spielen, gehe zu (nur auf englisch verfügbar) F →falkj.info/PowerLeaf/?/SSE-Screensaver-Easteregg.
01. Über den Bildschirmschoner
K Kontakt + Helfen
Esc Durchsuchen / Inhaltsverzeichnis
Enter