quadraticInOut: Symmetric Acceleration Curve

Mirrored quadratic motion with acceleration followed by deceleration

The quadraticInOut function combines acceleration and deceleration through piecewise quadratic curves. The first half accelerates while the second half mirrors this motion in reverse.

$$f(t) = \begin{cases} 2t^2 & \text{if } t < 0.5 \\ -2t^2 + 4t - 1 & \text{if } t \geq 0.5 \end{cases}$$

The mathematical relationship creates smooth transitions at the midpoint while maintaining quadratic curvature throughout both phases.

ライブエディター

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

結果

Loading...