Directional Swipe-Card Physics: 2D Vector Gesture Decision

What is a Directional Swipe-Card?

A directional swipe-card is an interactive element often seen in applications like Tinder or Netflix, where users can drag a card to make decisions. The card's movement triggers specific actions based on the direction and distance of the swipe.

In this simulation, you control the card’s motion with your pointer, which demonstrates how these gestures are translated into discrete outcomes such as 'like' or 'dislike'.

Thresholds for Dismiss Decisions

The dismiss decision is made based on either a Euclidean distance threshold or a velocity-vector magnitude threshold. The former determines if the card has moved far enough to be considered dismissed, while the latter checks the speed of the swipe.

These thresholds are crucial in ensuring that user interactions are accurately interpreted and acted upon by the application.

Fling vs Spring-Back

When a swipe exceeds the dismiss threshold but does not reach the fling velocity, the card undergoes a fling. This is a smooth transition where the card moves at a constant vector deceleration until it comes to rest.

If the swipe velocity surpasses the fling threshold, the card experiences a critically-damped spring-back, which brings the card back to its original position with minimal overshoot and oscillations.

Kinematics of 2D Motion

The kinematics of 2D motion in this simulation are governed by Newton's laws of motion. The x/y coordinates of the card change over time, influenced by initial velocity, deceleration, and external forces.

Independently verifying the x/y kinematics ensures that the physics engine accurately models real-world behavior.

Frequently asked questions

Try it live

Everything above runs in your browser — open Directional Swipe-Card Physics: 2D Vector Gesture Decision and change the parameters while it is running. Nothing is installed, nothing is uploaded, the whole model lives in one tab.