🎨 MathUtils Integration Demo

MathUtils Features: This demo showcases the integration of advanced mathematical utilities with your animation engine, including Perlin noise, Catmull-Rom splines, easing functions, and more!

🌊 Advanced Wave Effect (MathUtils)

// Uses MathUtils.lerp and custom easing functions
const wave = engine.createAdvancedWaveEffect(element, {
    duration: 2,
    amplitude: 30,
    easing: 'math-sine'
});
            

🎲 Perlin Noise Animation (MathUtils)

// Uses MathUtils.perlinNoise for organic movement
const noise = engine.createNoiseAnimation(element, {
    duration: 3,
    intensity: 15,
    noiseScale: 0.2
});
            

🦘 Spring Animation (MathUtils)

// Uses MathUtils.elastic for spring-like motion
const spring = engine.createSpringAnimation(element, {
    targetValue: 150,
    stiffness: 0.15,
    damping: 0.7
});
            

🛤️ Path Animation (Catmull-Rom Splines)

// Uses MathUtils.catmullRom for smooth path interpolation
const path = engine.createMorphingPath(element, pathPoints, {
    duration: 4,
    easing: 'math-cubic'
});
            

🎨 Color Transition (MathUtils.lerp)

// Uses MathUtils.lerp for smooth color interpolation
const color = engine.createColorTransition(element, '#ff6b6b', '#4ecdc4', {
    duration: 3,
    easing: 'math-sine'
});
            

✨ Particle System (Perlin Noise + MathUtils)

// Uses MathUtils.perlinNoise and MathUtils.smoothstep
const particles = engine.createParticleSystem(container, {
    particleCount: 75,
    duration: 6,
    spread: 120,
    speed: 1.2
});
            

🔷 Shape Morphing (MathUtils Interpolation)

// Uses MathUtils for smooth shape interpolation
const shapes = [
    'circle(50% at 50% 50%)',
    'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
    'polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)'
];
const morph = engine.createMorphingShape(element, shapes, {
    duration: 4,
    easing: 'math-quintic'
});
            

🧮 MathUtils Function Showcase