invCubic: Inverse Cubic Curve Function

Trigonometric-Based Curve Transformation

The invCubic function creates a smooth S-curve using nested trigonometric operations. It provides an alternative to standard cubic easing with different acceleration characteristics.

Mathematical Definition:

$$\text{invCubic}(v) = 0.5 - \sin\left(\frac{\arcsin(1 - 2v)}{3}\right)$$

Trigonometric Analysis:

• Input domain: $v \in [0, 1]$
• Transformation: $1 - 2v \in [-1, 1]$ maps to arcsine domain
• Phase division: $\frac{\arcsin(1 - 2v)}{3}$ creates triadic resonance
• Final sine operation produces smooth S-curve transformation

Mathematical Properties:

• Monotonic increasing function
• Smooth derivatives throughout domain
• Unique inflection characteristics creating harmonic resonance
• Symmetric around midpoint with specialized curvature

Geometric Interpretation: The nested trigonometric structure creates angular phase spaces where the division by 3 produces triadic harmonic relationships, revealing complex resonance patterns hidden within the input values.

Radial Curve Application

This example applies the invCubic transformation to radial distances, creating smooth falloff effects with the unique acceleration curve.

ライブエディター

const fragment = () => {
      const offset = uv.sub(vec2(0.5))
      const r = offset.length()
      const theta = offset.y.atan2(offset.x)
      const phase = invCubic(r.mul(2).saturate())
      const interference = theta.mul(6).add(phase.mul(20)).sin()
      const resonance = phase.mul(interference).abs()
      const harmonics = resonance.pow(0.7).mul(1.2)
      return vec4(harmonics.mul(0.9), harmonics.mul(0.7).add(phase.mul(0.3)), harmonics.add(phase.mul(0.4)), 1)
}

結果

Loading...

Grid-Based Pattern Effects

This example shows how invCubic can be applied to grid patterns to create smooth cell-based effects with unique easing characteristics.

ライブエディター

const fragment = () => {
      const lattice = uv.mul(12)
      const cellX = lattice.x.fract().sub(0.5).abs()
      const cellY = lattice.y.fract().sub(0.5).abs()
      const cellDist = cellX.max(cellY)
      const quantum = invCubic(cellDist.mul(2))
      const wave1 = lattice.x.add(iTime.mul(2)).sin().mul(quantum)
      const wave2 = lattice.y.add(iTime.mul(1.7)).sin().mul(quantum)
      const interference = wave1.mul(wave2).add(quantum.mul(0.5))
      const crystal = interference.abs().pow(1.8).saturate()
      return vec4(crystal.mul(0.6).add(quantum.mul(0.4)), crystal, crystal.mul(0.8).add(quantum.mul(0.2)), 1)
}

結果

Loading...