Dragging Cards

English version here

Für das Lebenswege-Projekt wollten wir eine Ansammlung von kleinen Karten auf einem Tisch simulieren, die mit der Maus oder dem Finger bewegt werden können. Das alleine ist keine besonders ausgefallene Idee und wurde sicher schon vielfach umgesetzt, aber trotzdem stellt sich die Frage, wie modelliert man die Bewegung von Karten, wenn man sie an verschiedenen Stellen anfassen und in verschiedene Richtungen ziehen können soll? In unserer Umsetzung kann man die Karten nicht direkt anfassen, sondern streicht nur sanft darüber, aber das ist dann bloß eine Skalierung des an die Karte weitergegebenen Bewegungsvektors, die zugrunde liegende Frage bleibt bestehen.

Von der groben Intuition her, fasst man eine Karte in der Mitte an, soll sie sich nur verschieben lassen, egal in welche Richtung, ohne Drehung. Fasst man sie hingegen an der Ecke an, soll es leicht sein, sie zu drehen, wenn man in die richtige Richtung zieht.

Übersetzt man diese Annahmen in Vektoren, ist es sinnvoll, den Koordinatenursprung auf den Kartenmittelpunkt zu legen. Sei $c$ der Berührungspunkt in diesem Koordinatensystem und $u$ die momentane Bewegung des Fingers. Für eine Drehung muss der Berührungspunkt außerhalb des Kartenmittelpunkts liegen und die Bewegung $u$ eine Komponente senkrecht zu $c$ besitzen, also keine Bewegung direkt entlang der Linie durch den Mittelpunkt. Je größer diese beiden Komponenten sind, desto höher soll die daraus berechnete Winkelgeschwindigkeit sein.

Diese Abhängigkeiten werden unter anderem vom sogenannten Kreuzprodukt

c\times u:=c_xu_y-c_yu_x

erfüllt, was den signierten Flächeninhalt des von den beiden Vektoren aufgespannten Parallelograms beschreibt und sehr einfach zu berechnen ist. In vielen Anwendungsfällen, wie auch hier, tritt das Parallelogram nicht direkt in Erscheinung, der Flächeninhalt erfüllt nur genau die richtigen Anforderungen an Abhängigkeit zu Vektorlängen und Winkel.

Zunächst müssen wir das Kreuzprodukt passend normieren. Denn sonst verhält es sich linear zu den beiden Argumenten, aber für unsere Winkelgeschwindigkeit sollen nur die Längen relativ zur Kartendimension (Breite $w$ und Höhe $h$ ) von Bedeutung sein. Um eine dimensionslose Drehung zu erhalten, dividieren wir also durch einen Wert proportional zu $w^2+h^2$ .

Den noch offenen konstanten Faktor können wir z. B. so festlegen, dass eine Berührung an der Ecke mit entsprechender Kreisbewegung die Karte genau um ihren Mittelpunkt drehen kann. Dafür muss der Nenner dem quadrierten Abstand der Ecke vom Mittelpunkt $\lVert c\rVert^2=(w^2+h^2)/4$ entsprechen. Dann ergibt sich folgende Formel für die Winkelgeschwindigkeit:

\omega=\frac{c\times u}{(w^2+h^2)/4}

Die restliche lineare Bewegung der Karte ergibt sich automatisch, weil der Berührungspunkt selbst immer $u$ folgen muss.

Fasse die Karte an einer beliebigen Stelle an.

Für die meisten Anwendungen könnte die Geschichte hier enden. Die Heuristik ist einfach, effizient zu berechnen und fühlt sich gut an. Aus Neugierde können wir aber noch fragen, wie sich die Bewegung aus den Regeln der Physik ableiten lässt, und wie gut wir mit unsere Approximation gelandet sind.

Zwei Modelle für den geringsten Widerstand

Wenn wir die Karte in eine Bewegung zwingen, folgt sie immer dem Prinzip des geringsten Widerstands. Das heißt, die einzelnen Punkte auf der Karte wollen so wenig Strecke wie möglich zurücklegen, unter der Bedingung, dass $c$ sich immer in die von $u$ vorgegebene Richtung bewegt.

Was das genau bedeutet, hängt vom physikalischen Modell ab. Bei einer schweren Karte mit wenig Reibung überwiegen die Kräfte der Trägheit, das heißt, die kinetische Energie, welche quadratisch mit der Geschwindigkeit ansteigt, soll minimiert werden. Das entspricht dann aber weniger einer leichten Karte auf dem Tisch als einer schweren Stahlplatte auf gut gelagerten Rädern.

Für die leichte Karte auf dem Tisch überwiegen hingegen die trockenen Reibungskräfte, welche nur linear mit der Geschwindigkeit ansteigen.

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$ . Folgt der Berührungspunkt $c$ dem Finger, ist der einzige frei wählbare Parameter noch die Rotation um $c$ , gegeben durch die Winkelgeschwindigkeit $\omega$ :

v_\omega(x)=u+\omega J(x-c)

Dieses Geschwindigkeitsfeld beschreibt eine infinitesimale Bewegung der Karte, dessen Kraftaufwand wir minimieren wollen. Beide Modelle lassen sich als Minimierung des folgenden Integrals darstellen, was für $p=1$ den Reibungsfall und für $p=2$ den kinetischen Fall beschreibt:

E_p(\omega)=\int_{x\in S} \lVert v_\omega(x)\rVert^p, \qquad p\in\{1,2\}.

Im kinetischen Fall $p=2$ lässt sich der Integrand ausmultiplizieren:

\left\lVert u+\omega J(x-c)\right\rVert^2 =\lVert u\rVert^2 +2\omega\,u\cdot J(x-c) +\omega^2\lVert x-c\rVert^2

Die Integrale über diese drei Summanden lassen sich geschlossen berechnen. Damit reduziert sich das Problem 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$ ist das Ergebnis

\omega_2 =\frac{c\times u}{(w^2+h^2)/12+\lVert c\rVert^2}.

Im Reibungsmodell mit $p=1$ gibt es für das Minimum keine geschlossene Formel mehr, es lässt sich nur numerisch annähern.

In der folgenden Demo kann der Berührungspunkt $c$ auf der Karte verschoben und mit der Pfeilspitze der Bewegungsvektor $u$ eingestellt werden. Die Diagramme zeigen die beiden Integrale für verschiedene Werte von $\omega$ . Der schwarz umrandete Punkt markiert jeweils das berechnete Minimum, der grüne Kreis den Wert unserer einfachen Approximation.

Karte

L₁

L₂

Wie sich diese unterschiedlichen Werte von $\omega$ tatsächlich auswirken, kann man hier ausprobieren. Alle drei Karten teilen sich denselben festen Berührungspunkt. Zieht man daran, lassen sich die von den drei Modellen erstellten Bewegungsprofile vergleichen.

Approximation

Interessant ist dabei, dass die Approximation gefühlt weiter von dem Reibungsmodell abweicht, als das kinetische Modell, obwohl das kinetische Modell eine ganz andere Physik beschreibt. Insbesondere nahe dem Mittelpunkt reagiert das kinetische Modell stärker auf seitliche Bewegunsimpulse als unsere Approximation. Mit wachsendem Abstand dämpft der zusätzliche Term $\lVert c\rVert^2$ die Drehung zunehmend. Ein ähnliches Verhalten lässt sich auch im Reibungsmodell beobachten.

Da das kinetische Modell eine schöne, geschlossene Formel ergibt, die sich fast genau so effizient berechnen lässt wie unsere ursprüngliche Approximation, würde sich dieses Modell für die Praxis am besten anbieten.

Wie verhält es sich wirklich mit Drehungen um den Mittelpunkt?

Als letzte Fragestellung, erfüllen die beiden Modelle nun auch unsere ursprüngliche Intuition für eine an der Ecke gehaltene Karte? Bewegt sich der Finger dort tangential um den Mittelpunkt, steht $u$ senkrecht auf $c$ . Für die entsprechende Winkelgeschwindigkeit $\omega_r$ einer Rotation um den Mittelpunkt gilt dann $u=\omega_rJc$ , was genau unserer Approximation entspricht.

Für das kinetische Modell lässt sich die Winkelgeschwindigkeit ebenfalls direkt ausrechnen. Mit $\lVert c\rVert^2=(w^2+h^2)/4$ folgt

\omega_2 =\frac{\omega_r(w^2+h^2)/4} {(w^2+h^2)/12+(w^2+h^2)/4} =\frac34\omega_r.

Das Reibungsmodell liefert für das Seitenverhältnis unserer Karte numerisch ungefähr $\omega_1\approx0{,}72\omega_r$ . Beide Optimierungsmodelle drehen die Karte also etwas weniger als für eine reine Rotation um den Mittelpunkt nötig wäre, das heißt, für eine komplette Drehung der Karte ist ein größerer Radius notwendig, und der Mittelpunkt beschreibt dabei auch einen kleinen Kreis. Dies lässt sich auch leicht mit einem Blatt Papier auf dem Tisch nachvollziehen: Es ist unmöglich, das Blatt mit nur einem Finger um seinen Mittelpunkt zu drehen, außer man drückt fest darauf und dreht den Finger dabei mit. Dann übt der Finger jedoch ein zusätzliches Drehmoment aus, was nicht mehr einer Maus- oder Touchinteraktion entspricht.