Skip to main content

quadraticOut: Parabolic Deceleration

Inverted quadratic curve for gentle motion completion

The quadraticOut function produces parabolic deceleration through inverted quadratic mapping. This creates fast initial motion that gradually slows to a gentle stop.

f(t)=t(t2)=2tt2f(t) = -t(t - 2) = 2t - t^2

The mathematical transformation inverts the acceleration pattern. Values start with rapid change and progressively approach the final state with decreasing velocity.

Live Editor
const fragment = () => {
  const w = 0.01
  const t = iTime.fract()
  const y = quadraticOut(t)
  const Y = quadraticOut(uv.x)
  const a = vec3(0.4, 0.9, 0.2)
  const b = vec3(0.9, 0.3, 0.8)
  const c = a.mix(b, y).mul(uv.x.step(t))
  const lines = mmin2(smoothstep(0, w, uv.mod(0.1).min(uv.sub(vec2(t, y)).abs())))
  const curve = stroke(uv.y.sub(Y), 0, w).mul(c)
  const color = lines.oneMinus().mul(0.2).add(curve)
  return vec4(color, 1)
}