my-animation-lib
Version:
A powerful animation library combining Three.js, GSAP, custom scroll triggers, and advanced effects with MathUtils integration
505 lines (454 loc) • 18 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathUtils Integration Demo</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: white;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.demo-section {
background: rgba(255,255,255,0.1);
border-radius: 15px;
padding: 20px;
margin-bottom: 30px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}
.demo-title {
font-size: 1.5em;
margin-bottom: 15px;
color: #ffd700;
}
.demo-element {
width: 100px;
height: 100px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
margin: 10px;
display: inline-block;
cursor: pointer;
transition: transform 0.3s ease;
}
.demo-element:hover {
transform: scale(1.1);
}
.controls {
margin: 15px 0;
}
button {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
margin: 5px;
transition: transform 0.2s ease;
}
button:hover {
transform: translateY(-2px);
}
.particle-container {
position: relative;
height: 200px;
background: rgba(0,0,0,0.3);
border-radius: 10px;
overflow: hidden;
margin: 15px 0;
}
.path-demo {
position: relative;
height: 300px;
background: rgba(0,0,0,0.3);
border-radius: 10px;
overflow: hidden;
margin: 15px 0;
}
.path-element {
position: absolute;
width: 20px;
height: 20px;
background: #ffd700;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.color-demo {
width: 150px;
height: 150px;
border-radius: 15px;
margin: 15px auto;
display: block;
transition: background-color 0.3s ease;
}
.shape-demo {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
margin: 15px auto;
display: block;
transition: clip-path 0.3s ease;
}
.code-example {
background: rgba(0,0,0,0.3);
border-radius: 10px;
padding: 15px;
margin: 15px 0;
font-family: 'Courier New', monospace;
font-size: 0.9em;
overflow-x: auto;
}
.math-info {
background: rgba(255,215,0,0.1);
border-left: 4px solid #ffd700;
padding: 15px;
margin: 15px 0;
border-radius: 0 10px 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>🎨 MathUtils Integration Demo</h1>
<div class="math-info">
<strong>MathUtils Features:</strong> This demo showcases the integration of advanced mathematical utilities with your animation engine, including Perlin noise, Catmull-Rom splines, easing functions, and more!
</div>
<!-- Advanced Wave Effect -->
<div class="demo-section">
<div class="demo-title">🌊 Advanced Wave Effect (MathUtils)</div>
<div class="demo-element" id="waveElement"></div>
<div class="controls">
<button onclick="startWaveEffect()">Start Wave</button>
<button onclick="stopWaveEffect()">Stop Wave</button>
</div>
<div class="code-example">
// Uses MathUtils.lerp and custom easing functions
const wave = engine.createAdvancedWaveEffect(element, {
duration: 2,
amplitude: 30,
easing: 'math-sine'
});
</div>
</div>
<!-- Noise Animation -->
<div class="demo-section">
<div class="demo-title">🎲 Perlin Noise Animation (MathUtils)</div>
<div class="demo-element" id="noiseElement"></div>
<div class="controls">
<button onclick="startNoiseAnimation()">Start Noise</button>
<button onclick="stopNoiseAnimation()">Stop Noise</button>
</div>
<div class="code-example">
// Uses MathUtils.perlinNoise for organic movement
const noise = engine.createNoiseAnimation(element, {
duration: 3,
intensity: 15,
noiseScale: 0.2
});
</div>
</div>
<!-- Spring Animation -->
<div class="demo-section">
<div class="demo-title">🦘 Spring Animation (MathUtils)</div>
<div class="demo-element" id="springElement"></div>
<div class="controls">
<button onclick="startSpringAnimation()">Start Spring</button>
<button onclick="stopSpringAnimation()">Stop Spring</button>
</div>
<div class="code-example">
// Uses MathUtils.elastic for spring-like motion
const spring = engine.createSpringAnimation(element, {
targetValue: 150,
stiffness: 0.15,
damping: 0.7
});
</div>
</div>
<!-- Path Animation -->
<div class="demo-section">
<div class="demo-title">🛤️ Path Animation (Catmull-Rom Splines)</div>
<div class="path-demo">
<div class="path-element" id="pathElement"></div>
</div>
<div class="controls">
<button onclick="startPathAnimation()">Start Path</button>
<button onclick="stopPathAnimation()">Stop Path</button>
</div>
<div class="code-example">
// Uses MathUtils.catmullRom for smooth path interpolation
const path = engine.createMorphingPath(element, pathPoints, {
duration: 4,
easing: 'math-cubic'
});
</div>
</div>
<!-- Color Transition -->
<div class="demo-section">
<div class="demo-title">🎨 Color Transition (MathUtils.lerp)</div>
<div class="color-demo" id="colorElement"></div>
<div class="controls">
<button onclick="startColorTransition()">Start Transition</button>
<button onclick="stopColorTransition()">Stop Transition</button>
</div>
<div class="code-example">
// Uses MathUtils.lerp for smooth color interpolation
const color = engine.createColorTransition(element, '#ff6b6b', '#4ecdc4', {
duration: 3,
easing: 'math-sine'
});
</div>
</div>
<!-- Particle System -->
<div class="demo-section">
<div class="demo-title">✨ Particle System (Perlin Noise + MathUtils)</div>
<div class="particle-container" id="particleContainer"></div>
<div class="controls">
<button onclick="startParticleSystem()">Start Particles</button>
<button onclick="stopParticleSystem()">Stop Particles</button>
</div>
<div class="code-example">
// Uses MathUtils.perlinNoise and MathUtils.smoothstep
const particles = engine.createParticleSystem(container, {
particleCount: 75,
duration: 6,
spread: 120,
speed: 1.2
});
</div>
</div>
<!-- Shape Morphing -->
<div class="demo-section">
<div class="demo-title">🔷 Shape Morphing (MathUtils Interpolation)</div>
<div class="shape-demo" id="shapeElement"></div>
<div class="controls">
<button onclick="startShapeMorphing()">Start Morphing</button>
<button onclick="stopShapeMorphing()">Stop Morphing</button>
</div>
<div class="code-example">
// 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'
});
</div>
</div>
<!-- MathUtils Showcase -->
<div class="demo-section">
<div class="demo-title">🧮 MathUtils Function Showcase</div>
<div class="controls">
<button onclick="testMathUtils()">Test MathUtils Functions</button>
<button onclick="showEasingComparison()">Compare Easing Functions</button>
</div>
<div id="mathOutput" class="code-example"></div>
</div>
</div>
<script type="module">
import { AnimationEngine } from '../src/core/AnimationEngine.js';
import { MathUtils } from '../src/utils/MathUtils.js';
import { Easing } from '../src/utils/Easing.js';
// Initialize the animation engine
const engine = new AnimationEngine({
enableThreeJS: false,
enableScrollTrigger: false
});
// Store animation references
let currentAnimations = new Map();
// Wait for engine to be ready
engine.on('ready', () => {
console.log('Animation Engine ready!');
document.body.style.opacity = '1';
});
// Advanced Wave Effect
window.startWaveEffect = () => {
const element = document.getElementById('waveElement');
const animation = engine.createAdvancedWaveEffect(element, {
duration: 2,
amplitude: 30,
easing: 'math-sine'
});
currentAnimations.set('wave', animation);
};
window.stopWaveEffect = () => {
const animation = currentAnimations.get('wave');
if (animation) {
animation.kill();
currentAnimations.delete('wave');
}
};
// Noise Animation
window.startNoiseAnimation = () => {
const element = document.getElementById('noiseElement');
const animation = engine.createNoiseAnimation(element, {
duration: 3,
intensity: 15,
noiseScale: 0.2
});
currentAnimations.set('noise', animation);
};
window.stopNoiseAnimation = () => {
const animation = currentAnimations.get('noise');
if (animation) {
animation.kill();
currentAnimations.delete('noise');
}
};
// Spring Animation
window.startSpringAnimation = () => {
const element = document.getElementById('springElement');
const animation = engine.createSpringAnimation(element, {
targetValue: 150,
stiffness: 0.15,
damping: 0.7,
duration: 2
});
currentAnimations.set('spring', animation);
};
window.stopSpringAnimation = () => {
const animation = currentAnimations.get('spring');
if (animation) {
animation.kill();
currentAnimations.delete('spring');
}
};
// Path Animation
window.startPathAnimation = () => {
const element = document.getElementById('pathElement');
const pathPoints = [
{ x: 50, y: 150 },
{ x: 150, y: 50 },
{ x: 250, y: 150 },
{ x: 350, y: 50 },
{ x: 450, y: 150 }
];
const animation = engine.createMorphingPath(element, pathPoints, {
duration: 4,
easing: 'math-cubic'
});
currentAnimations.set('path', animation);
};
window.stopPathAnimation = () => {
const animation = currentAnimations.get('path');
if (animation) {
animation.kill();
currentAnimations.delete('path');
}
};
// Color Transition
window.startColorTransition = () => {
const element = document.getElementById('colorElement');
const animation = engine.createColorTransition(element, '#ff6b6b', '#4ecdc4', {
duration: 3,
easing: 'math-sine'
});
currentAnimations.set('color', animation);
};
window.stopColorTransition = () => {
const animation = currentAnimations.get('color');
if (animation) {
animation.kill();
currentAnimations.delete('color');
}
};
// Particle System
window.startParticleSystem = () => {
const container = document.getElementById('particleContainer');
const animation = engine.createParticleSystem(container, {
particleCount: 75,
duration: 6,
spread: 120,
speed: 1.2
});
currentAnimations.set('particles', animation);
};
window.stopParticleSystem = () => {
const animation = currentAnimations.get('particles');
if (animation) {
animation.kill();
currentAnimations.delete('particles');
}
};
// Shape Morphing
window.startShapeMorphing = () => {
const element = document.getElementById('shapeElement');
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%)',
'polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)'
];
const animation = engine.createMorphingShape(element, shapes, {
duration: 4,
easing: 'math-quintic'
});
currentAnimations.set('shape', animation);
};
window.stopShapeMorphing = () => {
const animation = currentAnimations.get('shape');
if (animation) {
animation.kill();
currentAnimations.delete('shape');
}
};
// Test MathUtils Functions
window.testMathUtils = () => {
const output = document.getElementById('mathOutput');
const results = [];
// Test various MathUtils functions
results.push(`MathUtils.clamp(5, 0, 10): ${MathUtils.clamp(5, 0, 10)}`);
results.push(`MathUtils.lerp(0, 100, 0.5): ${MathUtils.lerp(0, 100, 0.5)}`);
results.push(`MathUtils.map(50, 0, 100, 0, 1): ${MathUtils.map(50, 0, 100, 0, 1)}`);
results.push(`MathUtils.distance(0, 0, 3, 4): ${MathUtils.distance(0, 0, 3, 4)}`);
results.push(`MathUtils.smoothstep(0.3, 0.7, 0.5): ${MathUtils.smoothstep(0.3, 0.7, 0.5)}`);
results.push(`MathUtils.perlinNoise(0.5, 0.5): ${MathUtils.perlinNoise(0.5, 0.5).toFixed(4)}`);
results.push(`MathUtils.bezier(0.5, 0, 0.5, 1, 0.5): ${MathUtils.bezier(0.5, 0, 0.5, 1, 0.5).toFixed(4)}`);
results.push(`MathUtils.catmullRom(0.5, 0, 1, 2, 3): ${MathUtils.catmullRom(0.5, 0, 1, 2, 3).toFixed(4)}`);
results.push(`MathUtils.bounce(0.7): ${MathUtils.bounce(0.7).toFixed(4)}`);
results.push(`MathUtils.elastic(0.6): ${MathUtils.elastic(0.6).toFixed(4)}`);
output.innerHTML = results.join('<br>');
};
// Compare Easing Functions
window.showEasingComparison = () => {
const output = document.getElementById('mathOutput');
const results = [];
const t = 0.5;
results.push(`Easing comparison at t = ${t}:`);
results.push(`Linear: ${Easing.linear(t).toFixed(4)}`);
results.push(`MathUtils.sine: ${MathUtils.sine(t).toFixed(4)}`);
results.push(`MathUtils.bounce: ${MathUtils.bounce(t).toFixed(4)}`);
results.push(`MathUtils.elastic: ${MathUtils.elastic(t).toFixed(4)}`);
results.push(`MathUtils.back: ${MathUtils.back(t).toFixed(4)}`);
results.push(`MathUtils.circular: ${MathUtils.circular(t).toFixed(4)}`);
output.innerHTML = results.join('<br>');
};
// Initialize page
document.addEventListener('DOMContentLoaded', () => {
// Set initial color for color demo
document.getElementById('colorElement').style.backgroundColor = '#ff6b6b';
// Set initial shape for shape demo
document.getElementById('shapeElement').style.clipPath = 'circle(50% at 50% 50%)';
});
</script>
</body>
</html>