Molaskes: Wegbereiter und Vorreiter

Diese Website hat ihren eigenen Bildschirmschoner. Wenn du nicht auf den Bildschirmschoner warten willst (1 Minute auf dieser Seite, einige Minuten auf allen anderen), kannst du auch einfach "Molaskes" sehr rasch 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. Die 3 Farben werden zufällig aus 6 verschiedenen ausgewählt (rot, grün, blau, orange, türkis, lila). Den Bildschirmschoner beendest du, indem du entweder irgendeine Taste drückst (außer Tab) oder indem du das fliegende Cartoonbild mit dem Maus-Fadenkreuz streifst. Wie funktioniert das?‌ Das Cartoonbild 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: ‌ 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 Cartoonbild 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: ‌ 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 V_z bestimmen: ‌ Ohne Massenträgheit würde B einfach direkt auf Z aufspringen und auf ihm Huckepack reiten: B_neu würde zu B_alt+(Z-B_alt) =Z. Daher müssen wir einen zweiten Vektor, den Vektor träger Masse V_m, einführen, der den Ball animieren wird, nachdem er von V_z‌ 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. 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) E‌ →molaskes.com/PowerLeaf/?/SSE-Screensaver-Easteregg.

Esc Suche / Inhaltsverzeichnis

 

Tab ›