Mit Karten spielen wie in echt

Wenn man mit dem Finger über eine Karte auf dem Tisch streicht, gleitet sie, dreht sich vielleicht ein wenig, und landet an einer neuen Stelle. Man denkt kaum darüber nach.

Diesen kleinen Moment auf einem Bildschirm nachzustellen, erfordert überraschend viel Überlegung.

Für das Lebenswege-Projekt wollten wir, dass Besucher*innen eine Ansammlung digitaler Karten mit der Maus oder dem Finger erkunden können. Die Karten sollten auf beiläufige Gesten reagieren, als würde sie sanft über die Tischoberfläche streifen.

Das sollte die Neugier wecken und zum Spielen einladen. Ungefähr so sieht das Ergebnis aus:

Ein vertrauter Ausgangspunkt

Wir haben bereits ein gutes Gefühl dafür, wie sich Alltagsgegenstände bewegen. Schiebt man eine Karte von ihrer Mitte aus, erwartet man, dass sie gleitet. Streicht man seitlich über eine Ecke, erwartet man, dass sie sich dreht.

Diese Erwartungen bildeten unseren Ausgangspunkt. Wo man die Karte berührt und in welche Richtung man zieht, sollte bestimmen, wie sie reagiert.

Um diese Annahmen in ein konkretes Modell zu übersetzen, suchen wir nach einem Zusammenhang zwischen dem Berührungspunkt $c$, an dem der Finger die Karte berührt, dem Bewegungsvektor $u$, der die Bewegungsrichtung des Fingers beschreibt, und der daraus resultierenden Bewegung der Karte.

Es ist sinnvoll, den Koordinatenursprung in die Mitte der Karte zu legen, sodass $c=0$ einer Berührung in der Mitte entspricht. Da sich der Berührungspunkt selbst immer mit dem Finger bewegen soll, genügt es, die Winkelgeschwindigkeit $\omega$ zu berechnen, die beschreibt, wie schnell sich die Karte um $c$ dreht.

Wie bereits erwähnt, sollte eine Berührung in der Mitte keine Drehung verursachen. Auch eine Bewegung direkt zur Mitte hin oder von ihr weg sollte zu keiner Drehung führen; das umfasst alle Fälle, in denen $c$ und $u$ parallel liegen.

Zerlegen wir den Bewegungsvektor $u$ in eine zu $c$ parallele Komponente $u_\parallel$ und die verbleibende Komponente $u_\perp$, die senkrecht auf $c$ steht, können wir sagen, dass die Winkelgeschwindigkeit $\omega$ mit der Länge von $c$ und der Länge von $u_\perp$ zunehmen soll.

Diese Abhängigkeiten werden vom sogenannten Kreuzprodukt erfasst:

Es beschreibt den signierten Flächeninhalt des von den beiden Vektoren aufgespannten Parallelogramms und lässt sich sehr einfach berechnen. In vielen Anwendungen, so auch hier, tritt das Parallelogramm selbst nicht direkt in Erscheinung. Sein Flächeninhalt besitzt schlicht genau die Abhängigkeit von Vektorlängen und Winkel, die wir benötigen.

Zunächst müssen wir das Kreuzprodukt passend normieren. Unsere Winkelgeschwindigkeit soll nur von den Längen relativ zu den Abmessungen $w\times h$ der Karte abhängen. Deshalb müssen wir durch einen Wert dividieren, der proportional zu $w^2+h^2$ ist.

Wir können den noch offenen konstanten Faktor beispielsweise so wählen, dass eine Berührung an der Ecke mit einer kreisförmigen Bewegung die Karte um ihren Mittepunkt dreht. Dafür muss der Nenner dem quadrierten Abstand zwischen Ecke und Mitte entsprechen, also $\lVert c\rVert^2=(w^2+h^2)/4$. Damit erhalten wir folgende Formel für die Winkelgeschwindigkeit:

Dieser Ansatz übersetzte unsere Idee in eine einfache Bewegungsregel, die wir auch in der obigen Demo verwenden. Sie war effizient und fühlte sich überzeugend an. Wir hätten es dabei belassen können.

Aber wir waren neugierig: Wie nahe waren wir dem Verhalten einer echten Karte gekommen?

Ein Abstecher in die Physik

Aus physikalischer Sicht folgt eine Karte, die wir in Bewegung zwingen, im Allgemeinen dem Weg des geringsten Widerstands. Das führt typischerweise zu einem Optimum, bei dem die einzelnen Punkte der Karte möglichst wenig Strecke zurücklegen. Wie genau dieses Optimum aussieht, hängt jedoch vom physikalischen Modell ab.

Wir untersuchten zwei einfache Beschreibungen des Widerstands: Die eine ähnelt einem schweren Gegenstand, der mit sehr wenig Reibung gleitet. Die andere entspricht eher einem leichten Gegenstand, der über eine nicht vollkommen glatte Oberfläche rutscht, etwa einer Karte auf einem Tisch.

Beim schweren Gegenstand mit geringer Reibung dominiert die Trägheit. Wir minimieren daher die kinetische Energie, die quadratisch mit der Geschwindigkeit anwächst. Im anderen Fall dominiert die trockene Reibung, die mit der Geschwindigkeit nur in einem linearen Verhältnis steht.

Beide Modelle lassen sich gemeinsam beschreiben. Sei $S$ die von der Karte eingenommene Fläche und $J(x,y)=(-y,x)$ eine Drehung um $90^\circ$. Ist $\omega$ wieder die Winkelgeschwindigkeit um $c$, so beschreibt die folgende Formel die Geschwindigkeit jedes einzelnen Punkts $x$ auf der Karte:

Die beiden Optimierungsprobleme lassen sich somit als Minimierung des folgenden Integrals formulieren, wobei $p=1$ das Reibungsmodell und $p=2$ das kinetische Modell beschreibt:

Man könnte erwarten, dass das realistischere Modell mit $p=1$ die naheliegende Wahl ist. In der Praxis ist es jedoch schwieriger zu berechnen. Das kinetische Modell liefert mit einer wesentlich einfacheren Berechnung eine überraschend überzeugende Dynamik.

Zunächst entwickeln wir den Integranden für $p=2$:

Die Integrale dieser drei Terme besitzen allesamt geschlossene Lösungen. Das Problem reduziert sich dadurch auf die Minimierung eines quadratischen Polynoms in $\omega$, dessen Minimum ebenfalls in geschlossener Form vorliegt. Für ein Rechteck der Breite $w$ und Höhe $h$ ergibt sich

Für das Reibungsmodell mit $p=1$ existiert keine geschlossene Formel für das Minimum; es lässt sich nur numerisch annähern. Das haben wir getan und das Ergebnis mit den beiden anderen Modellen verglichen:

Überraschenderweise verhalten sich die beiden physikalischen Modelle recht ähnlich, obwohl sie unterschiedliche Szenarien abbilden. Da das kinetische Modell wesentlich einfacher zu berechnen ist, bietet es sich als praktische Lösung gut an.

Für eine weitere Perspektive können wir den Widerstand der beiden Modelle in Abhängikeit vom Winkel darstellen und ihre Minima mit der naiven Kreuzprodukt-Approximation aus unserer ersten Version vergleichen:

Hier zeigt sich ein Hinweis darauf, warum sich die beiden physikalischen Modelle so ähnlich verhalten: Sie unterscheiden sich hauptsächlich darin, wie schnell der Widerstand zunimmt, wenn wir uns vom optimalen Winkel entfernen, und weniger in der Lage des Optimums selbst.

Das ist ein Teil des digitalen Handwerks, der uns Freude macht: ein Problem so weit zu untersuchen, bis wir verstehen, welche Details entscheidend sind, und dann einen effizienten Weg zu finden, sie zum Leben zu erwecken.

Auch der Tisch konnte uns etwas beibringen

Während der Arbeit an dem Problem stellten wir fest, dass eine unserer eigenen Annahmen nicht ganz richtig war.

Wir hatten uns vorgestellt, dass eine an der Ecke geführte Karte sich sauber um ihre Mitte drehen könnte. Unsere physikalischen Modelle deuteten jedoch darauf hin, dass sich auch die Mitte ein wenig mitbewegen würde.

Man kann es mit einem Blatt Papier ausprobieren: Legt man einen Finger an eine Ecke und führt ihn im Kreis, ist es unmöglich, die Mitte des Blattes vollkommen unbewegt zu halten.

Den Besucher*innen etwas zu entdecken geben

Solche Details verleihen einem digitalen Erlebnis Charakter. Eine vertraute Bewegung kann eine ungewohnte Oberfläche zugänglicher machen. Eine spielerische Reaktion kann einen Grund geben, noch ein wenig weiter zu erkunden.

Wenn wir für eine Marke gestalten, denken wir über diese Momente ebenso nach wie über Worte und Bilder. Wie soll der Inhalt auf eine Interaktion reagieren? Wo könnte es ein wenig Neugier wecken?

Manchmal beginnt diese Einladung mit einer Karte, die sich genau so dreht, wie der Finger es erwartet.