Grab a corner. Give it a pull. A few simple constraints make a small object feel alive.
Pick it up ↓9 MIN READ · AN INTERACTIVE PHYSICS STUDY
A little weight. A little personality.
PULL IT AROUND. SEE WHAT HOLDS.
A SMALL OBJECT / A LIVE RIG0°
GRAB ANYWHERE · RELEASE TO SWING · ARROW KEYS TO TUG
04 / GRAB. RELEASE. LET IT SETTLE.
Grab the badge anywhere. Pull, then release. Gravity and damping bring it back.
drag point + inertia + damping → personality
THE IDEA / AN OBJECT WITH CONSEQUENCES
One small pull. A whole response.
A draggable object feels convincing when the pieces agree. The badge moves, the strap bends, the clip stays attached and the shadow follows. When you let go, the object remembers a little of your movement.
Build that relationship before polishing the surface. This experiment uses a planar particle rig and Canvas drawing. You can explore it without setup. Basic JavaScript helps when editing the working starter.
01 / MAKE A RELATIONSHIP
Let points move. Keep distances.
A point stores its current and previous position. The difference between them carries its velocity. Gravity moves it down; a distance constraint brings two connected points back to their allowed separation. The anchors at the top have zero mobility, so they stay fixed.
Small links can bend. Three fixed distances keep the badge’s shape.
error = current distance − rest distance correction = error × direction
Split the correction according to each point’s mobility. Revisit the constraints several times: solving one pair can disturb another. Our rig uses 22 iterations at each simulation step. It is an approximate solver; the repeated corrections keep stretching small.
Try: select Rig. Drag slowly, then quickly. Watch which points move and which relationships hold. Change Strap length to alter the chains’ rest distances.
02 / DRAW THE SOFT PART
Turn the chain into a ribbon.
The lanyard has two chains meeting at one attachment point. A smooth path through their positions hides the individual segments. Stroke that path with a dark ribbon, then add a faint centre highlight and fine texture. The drawing follows the physics; it does not drive it.
ribbon path = smooth curve through chain points
The paper badge uses three constrained points. Because the triangle’s side lengths stay fixed, it provides an orientation for drawing a rigid rectangular object. The clip sits between the shared rope point and the top of the holder.
Try: select Strap. Toggle Show the rig to compare the particle chain with its smooth ribbon. Grab different parts of the ghost badge and watch its orientation change.
03 / KEEP THE PLACE YOU GRABBED
A corner pull should feel different.
Attaching the centre of the badge to every pointer position makes it jump under your hand. Instead, convert the initial grip into the badge’s local coordinates. Express that point as a weighted combination of the three rigid-body points. Move the weighted point toward the pointer, then solve the distance constraints again.
grip = a × top + b × left + c × right a + b + c = 1
The weights preserve where the hand met the object. An off-centre grip naturally changes its rotation. Pointer capture keeps the gesture connected when the pointer leaves the moving badge. Touch scrolling remains available outside the badge.
Try: compare pulling the middle with pulling an upper corner. Release while moving, then release after holding still. The badge should remember different amounts of motion.
04 / A LITTLE MEMORY
Let gravity pull. Let damping settle.
Velocity comes from the change between two positions. Keep most of that change, add gravity, then solve the constraints. On release, the rig continues from its recent movement. Damping removes a little velocity at each step, turning a swing into a rest.
next = current + retained velocity + gravity × Δt² retention = (1 − damping)^(60 × Δt)
The simulation advances at 120 fixed steps per second, even when the screen draws at a different rate. A small accumulator carries leftover time into the next frame. Long frame gaps are capped, and hidden or offscreen scenes stop updating. This keeps the solver predictable through pauses and navigation.
Try: increase Damping, then Give it a nudge. Lower Damping and repeat. Set Gravity to zero for a floating rig; restore it to see how weight gives the interaction a centre.
05 / POLISH THE OBJECT
Separate paper, plastic and metal.
The paper carries the name. The clear sleeve adds a double edge, a faint translucent fill and small punched holes. Soft reflection bands sit above the insert. A metal gradient gives the clip a different character from the dark strap.
object = paper + clear sleeve + clip scene = object + projected soft shadow
Keep the materials quiet enough to read the silhouette. The shadow is offset and softened to suggest distance from the background. This is a two-dimensional drawing treatment; the particle rig supplies the motion and rotation.
Try: select Badge and open Card. Change the two name lines and ink colour. Compare Sleeve sheen at zero and 100%. Select Scene to add the shadow.
06 / KEEP THE INTERACTION AVAILABLE
Make a pause a useful state.
Pausing freezes the motion without disabling the exercise. Dragging still positions the badge, and the arrow keys tug it. Space gives it a nudge; Home resets the rig. A reduced-motion preference starts the scene paused.
Use Save this frame to export the current drawing at 1600 × 1200 pixels. The image contains the visible build stage, name, material, pose and rig overlay. It is a still image of your scene, including its background.
Try: pause, make a deliberate composition, and save it. Then resume and see how the same geometry becomes an interaction.
YOUR TURN / ONE OBJECT, TWO PERSONALITIES
Make it playful. Then let it rest.
Start with a long strap and low damping. Pull a corner and release while moving. Notice the broad swing. Now shorten the strap, increase damping and use a smaller pull.
Keep the same card artwork. How much of its character comes from motion? Save a frame from each version, then compare the interactions as well as their appearance.
The experiment uses a small particle solver and Canvas 2D. The same pose positions an accessible button over the badge, so pointer and keyboard controls agree with what you see.
// A fixed step, with previous position carrying velocity.
const retention = (1 - damping) ** (60 * dt);
const velocity = (position - previous) * retention;
previous = position;
position += velocity + gravity * dt * dt;
// Move connected points back to their rest distances.
solveDistanceConstraints();
// Draw ribbons, then the rigid badge at its solved pose.
Download the self-contained starter, open it in a browser and edit its embedded model and drawing code in a text editor. It contains the styles, cover and JavaScript; no server or installation is needed.
