Wie klingt eigentlich Typografie?

Bühne frei: Großes Kino auf der Leinwand

Grundlage für den HALMA-Startscreen bildet ein HTML canvas Element, auf dem die Animation projiziert wird. Für die Umsetzung des gewünschten Effektes entschieden wir uns für den Einsatz der Physik-Engine Matter.js.

Im ersten Schritt soll die Unterstreichung des Textes animiert werden. Dazu wurden mit Matter.js einzelne Kugeln erstellt, welche von mehreren „Sprungfedern“ an der Stelle gehalten werden. Für die korrekte Positionierung entlang den Unterlängen des Textes – hier soll sich später eine Unterstreichung befinden – sorgt eine Funktion, die diese Körper automatisch zwischen zwei Koordinaten in gleichmäßigen Abständen platziert.

Möge die Kraft mit dir – und deinem Mauszeiger – sein

Mit einer Art „Kraftfeld“, welches die Position des Mauszeigers umgibt, können die Körper nun in Schwingung versetzt werden. Da diese miteinander verbunden sind, beginnen sie zu oszillieren. So wird der gewünschte „Wobbel“-Effekt erzeugt. Damit dies nicht zu chaotischem Verhalten führt, beschränken wir die maximale Entfernung zum Ursprungspunkt mit einer simplen Vektorrechnung.

Tuning, oder auch: „Gefrickel“

Durch das Zusammenspiel von verschiedenen Parametern wie Masse, Gravitation, Zugkraft und Dämpfung können wir die Simulation gezielt beeinflussen und feintunen.

Auf den Schirm: Jetzt wird gerendert

Die so berechneten Animationen sind noch nicht sichtbar, sie existieren bis jetzt nur virtuell in Form von Koordinaten und Vektoren. Damit sich das Ganze auch konkret auf dem Bildschirm in einer hübschen Animation manifestiert, müssen im nächsten Schritt konkrete Pixel daraus gerendern werden. Dafür verwenden wir nicht den in Matter.js integrierten Renderer sondern die Bibliothek P5.js, da mit ihr das Zeichnen von Splines möglich ist.

Mit den Koordinaten der einzelnen Körper kann eine Linie auf dem Canvas Element ausgegeben werden, die ohne weitere  Berechnungen zunächst jedoch sehr kantig wäre. Erste Versuche, die Kanten mit Bézierkurven zu glätten, zeigten, dass Bézierkurven besser bei wenigen Ankerpunkten geeignet sind. Sie benötigen die Position der drei darauffolgenden Koordinaten, was die  Berechnungen sehr aufwendig und zeitintensiv macht.

Um eine geschwungene Kurve zu generieren, verwendeten wir also stattdessen die Formel des kubisch-hermiteschen Spline, die sich leichter auf die einzelnen Vektorpunkte der Linie anwenden lässt. Da diese mit jedem Frame neu berechnet werden muss und auf jedem Gerät mit einer Framerate von mindestens 30 FPS laufen sollte, ist es sehr wichtig, dass diese Funktion so performant wie möglich bleibt. Wir lassen die Physik-Engine in einer eigenen Animationsschleife laufen, sind so von der Framerate unabhängig und können dubioses Verhalten der Simulation vermeiden.

Die vom Javascript dynamisch erzeugten Inhalte müssen nun noch je nach Bildschirmgröße und Auflösung skaliert, korrekt auf dem Canvas platziert und bei jeder Größenänderung des Browserfensters neu berechnet werden.

Kein Ton gehört zum guten Ton

Zu guter Letzt muss – sobald das Kraftfeld der Maus mit einem der Körper kollidiert – „nur noch“ ein Ton abgespielt werden. Da herkömmliche <audio> Elemente erst buffern bevor der Ton wiedergegeben wird, musste eine andere Lösung her. Damit das Ganze browserübergreifend funktioniert, werden alle Töne beim Laden der Seite einmal lautlos abgespielt und so effektiv ein preload erreicht. So wird das Laden und Buffern der Sounddateien quasi vorverlegt.

Nun ist es ja bekanntlich gute Praxis, Sound nicht ohne ausdrücklichen Wunsch des Benutzers abzuspielen. In einigen Browsern und auf fast allen Mobilgeräten wird dies auch erzwungen und kann Ton erst nach einer Benutzerinteraktion abgespielt werden. Wir fügen also einen Button hinzu, mit dem die Tonausgabe an- und abgewählt werden kann.

Ein störender Bug: Wer „nicht stören“ will, muss fühlen

Der Startscreen war endlich fertig, wir starteten die Testphase. Schnell zeigte sich, dass die visuelle Umsetzung auf fast allen Geräten wie gewünscht funktionierte. Doch es sammelten sich Hinweise einzelner Testpersonen, die auf ihren iOS-Geräten keinen Ton hören konnten. Was für ein Rückschlag, war der Sound doch grundlegender Teil der ganzen Idee! Es folgten Wochen des Rätselns und Debuggens: das Problem ließ sich nicht reproduzieren und eingrenzen, es schien vollkommen willkürlich aufzutreten. Die einzige Gemeinsamkeit war das Auftreten auf iOS-Geräten, doch weder die iOS- noch die Safari-Version oder das Gerät selbst, schienen Einfluss darauf zu haben.

Zahlreiche frustrierte Zeilen Code wurden geschrieben. Auf der Suche nach Antworten oder wenigstens kleinen Hinweisen wie der Bug reproduziert werden könnte, wurden Dokumentationen gewälzt und Internetforen durchforstet. Alle HALMAs und schließlich sogar deren Familien- und Bekanntenkreise wurden als Testpersonen rekrutiert, ausgiebige Testreihen durchgeführt. Alles ohne Erfolg. Fast hätten wir die ganze Idee verworfen. Doch dann, eher durch Zufall, konnten wir den Fehler dingfest machen: Ganz nach dem Motto „It's not a bug, it's a feature“, läuft die Wiedergabe von dynamischen Tönen auf iOS nicht wie bei anderen Geräten über den Medienkanal, sondern über den Kanal für Klingeltöne! Das bedeutet, dass kein Ton abgespielt werden kann, solange das Telefon stumm geschaltet oder „nicht stören“ aktiv ist. Deshalb gilt nun für alle iPhone und iPad User: „Nicht stören“ aus und dafür Ton an!