Code, Motion

The mathematics of motion in WebGL

Easing curves, springs and noise: the small amount of maths behind motion that feels natural.

You do not need advanced maths to make good motion, but a few ideas make a big difference.

Interpolation

Almost every animation is a value moving from A to B. Linear interpolation is mechanical; adding an easing curve gives it intention. Ease-out for things arriving, ease-in for things leaving.

Springs

Springs respond to interruption gracefully. If a user changes their mind halfway through, a spring adjusts from its current position instead of restarting.

Noise

Smooth noise adds organic variation to particles, colour and position. It is the basis of the Noise Field study and most of my shader work.

  • Use easing for UI transitions
  • Use springs for direct manipulation
  • Use noise for organic texture

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *