Spring study
One switch and the curve of how it gets there. Flick it, change the stiffness, flick it again.
Pen 2 is up
Settles in 276 ms · overshoot 0% · damping ratio 1.16
Overdamped: no overshoot, and it takes its time. Ink is the spring from rest. Orange is your last throw.
How it works
The knob sits on a spring, so you can catch it mid-flight and it keeps the speed you throw it with. That is the difference between a spring and a timed animation, and it is easier to feel than to read about.
The ink curve is the same spring worked out on paper: stiffness, damping and mass go in, position over time comes out. The orange line is what the knob really did on your last throw, sampled every frame. Throw it hard and the two part company.
“Site” is the spring my own instruments use: stiffness 600, damping 44, mass 0.6.
- Input
- Drag or flick the knob, Space, the arrow keys
- Drawn with
- A DOM switch on Motion’s spring, a canvas plot
- Work
- A frame loop only while the knob is moving
- Reduced motion
- The switch snaps; the curve still draws
Made for the fun of it. The paid work gets the same pen.