elasticIn: Elastic Spring Acceleration

Mathematical Foundation of Elastic Motion

The elasticIn function simulates elastic spring behavior through combined sinusoidal and exponential components. The mathematical expression $f(t) = \sin(13t \cdot \frac{\pi}{2}) \cdot 2^{10(t-1)}$ creates oscillatory motion with exponentially increasing amplitude.

The sinusoidal component generates oscillations at frequency 13, while the exponential term $2^{10(t-1)}$ provides amplitude modulation that starts near zero and builds dramatically toward the end.

This combination produces motion characteristic of a spring system gathering energy through resonant oscillation before reaching its target position.

Spring Dynamics and Oscillation Pattern

The frequency factor (13) determines oscillation count during the acceleration phase, creating multiple elastic compressions and extensions before final approach. The exponential amplitude ensures oscillations start imperceptibly and build to maximum effect.

This easing pattern models physical spring behavior where initial movement is minimal, followed by increasing oscillatory energy as the system approaches its equilibrium position.

Live Editor

const fragment = () => {
  const w = 0.01
  const t = iTime.fract()
  const y = elasticIn(t)
  const Y = elasticIn(uv.x)
  const a = vec3(0.1, 0.9, 0.3)
  const b = vec3(0.8, 0.9, 0.7)
  const c = a.mix(b, t).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)
}