cubicInOut: Symmetric Cubic Motion

Mathematical Structure of Bidirectional Cubic Easing

The cubicInOut function creates symmetric motion through piecewise cubic composition. The mathematical foundation uses scaled cubic functions for both acceleration and deceleration phases.

For $t \in [0, 0.5]$: $f(t) = 4t^3$ (accelerated cubic) For $t \in [0.5, 1]$: $f(t) = \frac{1}{2}(2t-2)^3 + 1$ (decelerated cubic)

This piecewise structure ensures $C^0$ continuity at the midpoint while maintaining cubic smoothness properties throughout both phases.

Polynomial Properties and Smoothness

Both segments maintain $C^2$ continuity within their respective domains, providing smooth acceleration and deceleration without velocity or acceleration discontinuities. The scaling factors ensure proper range mapping while preserving cubic characteristics.

The velocity profile increases cubically during the first half, reaches maximum at the center, then decreases symmetrically through the second half, creating balanced motion dynamics.

ライブエディター

const fragment = () => {
  const w = 0.01
  const t = iTime.fract()
  const y = cubicInOut(t)
  const Y = cubicInOut(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)
}