quartic: Fourth-Order Polynomial Smoothstep with Quadratic Acceleration Dynamics

Fourth-Order Smooth Interpolation

The quartic function provides smooth transitions using a fourth-order polynomial: $f(v) = v^2(2-v^2)$. This creates a different easing curve compared to cubic or quintic functions, with unique acceleration characteristics that can be useful for specific animation or transition effects.

Unlike conventional smoothstep functions, quartic introduces asymmetric acceleration profiles through its derivative $f'(v) = 4v(1-v^2)$, which reaches maximum velocity at $v = 1/\sqrt{3} \approx 0.577$. This mathematical property enables the creation of naturally occurring acceleration patterns that mirror physical phenomena in fluid dynamics and wave propagation systems.

The function's geometric characteristics include:

$f(v) = v^2(2-v^2) = 2v^2 - v^4$

$f'(v) = 4v - 4v^3 = 4v(1-v^2)$

$f''(v) = 4 - 12v^2 = 4(1-3v^2)$

The second derivative reveals inflection points at $v = \pm 1/\sqrt{3}$, creating natural transition zones that produce organic-feeling animation curves and spatial transformations.

ライブエディター

const fragment = () => {
      const t = iTime.mul(0.3).sin()
      const center = vec2(0.5)
      const pos = uv.sub(center)

      const r = pos.length().mul(3)
      const angle = pos.y.atan2(pos.x)

      const warpFactor = quartic(t.mul(2).sub(1).abs())
      const spiralR = r.add(warpFactor.mul(angle.mul(8).add(iTime.mul(2)).sin()).mul(0.3))
      const spiralAngle = angle.add(quartic(r.mul(0.5)).mul(t).mul(6.28))

      const warpedPos = vec2(spiralAngle.cos(), spiralAngle.sin()).mul(spiralR)
      const pattern = warpedPos.x.mul(warpedPos.y).abs()

      const intensity = quartic(pattern.fract())
      const depth = quartic(smoothstep(0.2, 0.8, spiralR.mul(0.2)))

      const color = vec3(
              intensity.mul(0.8).add(0.2),
              quartic(depth).mul(0.9).add(0.1),
              quartic(intensity.mul(depth)).mul(0.7).add(0.3)
      )

      return vec4(color, 1)

}