Cubic Mix Interpolation

Mathematical Foundation

The cubicMix function combines the power of cubic smoothing with linear interpolation, creating seamless transitions between colors, positions, and complex visual states. This technique eliminates harsh boundaries and produces organic morphing effects.

Cubic Mix Formula: $\text{cubicMix}(A, B, t) = A + (B - A) \cdot \text{cubic}(t)$

Where:

• $A$ is the starting value (color, vector, or scalar)
• $B$ is the ending value
• $t \in [0,1]$ is the interpolation parameter
• $\text{cubic}(t) = 3t^2 - 2t^3$ provides smooth easing

This can be expanded as: $\text{cubicMix}(A, B, t) = A + (B - A) \cdot (3t^2 - 2t^3) = A(1 - 3t^2 + 2t^3) + B(3t^2 - 2t^3)$

The cubic interpolation ensures smooth acceleration and deceleration, eliminating the linear artifacts of simple mixing functions.

Color Transition Spectacle

Creating smooth color gradients that flow naturally across space without banding or mechanical transitions.

ライブエディター

const fragment = () => {
      const t = uv.x
      const color1 = vec3(0.9, 0.2, 0.3)
      const color2 = vec3(0.1, 0.8, 0.9)
      const blended = cubicMix(color1, color2, t)
      const pulse = iTime.mul(2).sin().mul(0.1).add(1)
      return vec4(blended.mul(pulse), 1)
}

Complex Pattern Fusion

Combining different mathematical patterns with cubic interpolation generates intricate textures that evolve smoothly over time.

ライブエディター

const fragment = () => {
      const p = uv.mul(8)
      const pattern1 = p.x.add(p.y).sin().mul(p.x.sub(p.y).cos())
      const pattern2 = p.x.mul(p.y).sin().mul(p.x.div(p.y.add(0.1)).cos())
      const mixAmount = p.x.mul(p.y).sin().mul(0.5).add(0.5)
      const cubicBlend = cubicMix(pattern1, pattern2, mixAmount)
      const timeModulation = iTime.mul(0.8).add(cubicBlend).sin()
      const final = timeModulation.mul(0.5).add(0.5)
      return vec4(final.mul(0.8).add(0.1), final, final.mul(0.7).add(0.2), 1)
}