Dragging Cards

Deutsche Version hier

For the Lebenswege project, we wanted to simulate a collection of small cards on a table that could be moved with a mouse or a finger. The idea itself is not particularly unusual and has surely been implemented many times before. Still, it raises a question: how should we model the movement of a card that can be touched at different points and pulled in different directions? In our implementation, the cards are not grabbed directly. The user merely brushes over them. But that only amounts to scaling the movement vector, while the underlying question remains the same.

The rough intuition is that a card grabbed at its center should only translate, no matter in which direction it is pulled, without rotating. If it is grabbed at a corner, on the other hand, it should be easy to rotate by pulling in the right direction.

To translate these assumptions into vectors, it is useful to place the origin at the center of the card. Let $c$ be the contact point in this coordinate system and $u$ the finger’s current movement. For the card to rotate, the contact point must lie away from its center and the movement $u$ must have a component perpendicular to $c$—in other words, it cannot point directly along the line through the center. The larger these two components are, the higher the resulting angular velocity should be.

These dependencies are captured by the so-called cross product

which describes the signed area of the parallelogram spanned by the two vectors and is very easy to compute. In many applications, including this one, the parallelogram itself never appears directly. Its area simply has exactly the dependence on vector lengths and angle that we need.

First, we need to normalize the cross product appropriately. Without normalization, it depends linearly on both arguments, but our angular velocity should depend only on the lengths relative to the dimensions of the card (width $w$ and height $h$). To obtain a dimensionless rotation, we therefore divide by a value proportional to $w^2+h^2$.

We could, for example, choose the remaining constant factor so that touching a corner and moving it along the corresponding circle rotates the card exactly around its center. For this, the denominator must equal the squared distance between the corner and the center, which is $\lVert c\rVert^2=(w^2+h^2)/4$. Then we get the following formula for the angular velocity:

The rest of the card’s movement follows automatically from the requirement that the contact point itself must always move along $u$.

For most applications, the story could end here. The heuristic is simple, efficient to compute, and feels good. Out of curiosity, however, we can ask how the movement might be derived from physical principles and how good our approximation actually is.

Two models of least resistance

When we force the card to move, it follows the path of least resistance. In other words, the individual points on the card want to travel as little as possible, subject to the condition that the contact point $c$ continues to move in the direction specified by $u$.

What exactly this means depends on the physical model. For a heavy card with little friction, inertia dominates, so we minimize kinetic energy, which grows quadratically with velocity. This is less like a lightweight card on a table and more like a heavy steel plate on well-mounted wheels.

For a lightweight card on a table, dry-friction forces dominate and increase only linearly with velocity.

Both models can be described at once. Let $S$ be the area occupied by the card, and let $J(x,y)=(-y,x)$ denote a rotation through $90^\circ$. Once the contact point $c$ follows the finger, the only remaining free parameter is the rotation around $c$, given by the angular velocity $\omega$:

This velocity field describes an infinitesimal movement of the card whose required effort we want to minimize. The two optimization problems can therefore be written as the minimization of the following integral, where $p=1$ represents friction and $p=2$ the kinetic model:

In the kinetic case, $p=2$, the integrand can be expanded:

The integrals of these three terms all have closed-form expressions. The problem therefore reduces to minimizing a quadratic polynomial in $\omega$, whose minimum also has a closed form. For a rectangle of width $w$ and height $h$, the result is

In the friction model, where $p=1$, there is no closed-form expression for the minimum, so it can only be approximated numerically.

In the following demo, the contact point $c$ can be moved across the card, while the arrow tip controls the movement $u$. The plots show the two integrals for different values of $\omega$. The black outlined point marks the computed minimum, and the green circle shows the value of our simple approximation.

The next demo lets us try out how these different values of $\omega$ affect the actual movement. All three cards share the same fixed contact point. Drag it to compare the movement profiles produced by the three models.

Interestingly, the approximation feels farther from the friction model than the kinetic model does, even though the kinetic model describes very different physics. In particular, near the center, the kinetic model responds more strongly to sideways movement than our approximation. As the distance grows, the additional term $\lVert c\rVert^2$ increasingly dampens this rotation. Similar behavior can also be observed in the friction model.

Because the kinetic model gives us a neat closed-form expression that is almost as efficient to compute as our original approximation, it may be the most practical choice.

How does it really behave for rotations around the center?

As a final question, do the two models also satisfy our original intuition for a card held at a corner? If the finger moves tangentially around the center, $u$ is perpendicular to $c$. For the corresponding angular velocity $\omega_r$ of a rotation around the center, we have $u=\omega_rJc$, which is exactly what our approximation produces.

For the kinetic model, the angular velocity can also be calculated directly. With $\lVert c\rVert^2=(w^2+h^2)/4$, we get

For the aspect ratio of our card, the friction model numerically gives approximately $\omega_1\approx0.72\omega_r$. Both optimization models therefore rotate the card slightly less than would be required for a pure rotation around the center. This means that the finger must trace a larger circle to complete one full rotation of the card, while the center itself also describes a small circle. This is easy to reproduce with a sheet of paper on a table: it is impossible to rotate the sheet around its center with just one finger unless you press down firmly and twist your finger along with it. Doing so, however, applies an additional torque that is not part of our model.