<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amari Interactive Demos - Geometric Algebra & Dual Numbers</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #333;
min-height: 100vh;
}
.header {
background: rgba(255, 255, 255, 0.95);
padding: 1rem 2rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
}
.header h1 {
color: #4a5568;
text-align: center;
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.header p {
text-align: center;
color: #718096;
font-size: 1.1rem;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.demo-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.demo-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.demo-card h3 {
color: #2d3748;
margin-bottom: 1rem;
font-size: 1.4rem;
border-bottom: 2px solid #667eea;
padding-bottom: 0.5rem;
}
.demo-card p {
color: #4a5568;
margin-bottom: 1rem;
line-height: 1.6;
}
.demo-preview {
width: 100%;
height: 250px;
border: 2px solid #e2e8f0;
border-radius: 10px;
margin: 1rem 0;
background: #f7fafc;
position: relative;
overflow: hidden;
}
.launch-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
.launch-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.math-notation {
background: #f8f9fa;
padding: 0.5rem;
border-radius: 5px;
font-family: 'Computer Modern', serif;
text-align: center;
margin: 0.5rem 0;
}
.feature-list {
list-style: none;
margin: 1rem 0;
}
.feature-list li {
padding: 0.25rem 0;
color: #4a5568;
}
.feature-list li:before {
content: "✨ ";
color: #667eea;
font-weight: bold;
}
.navigation {
background: rgba(255, 255, 255, 0.9);
padding: 1rem 2rem;
margin-top: 2rem;
border-radius: 15px;
text-align: center;
}
.nav-links {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.nav-links a {
color: #667eea;
text-decoration: none;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: all 0.3s ease;
}
.nav-links a:hover {
background: #667eea;
color: white;
}
@media (max-width: 768px) {
.demo-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.container {
padding: 1rem;
}
}
</style>
</head>
<body>
<div class="header">
<h1>🔮 Amari Interactive Demos</h1>
<p>Explore Geometric Algebra and Dual Numbers through Interactive Visualizations</p>
</div>
<div class="container">
<div class="demo-grid">
<div class="demo-card">
<h3>🌀 3D Rotations with Rotors</h3>
<p>Interactive exploration of how geometric algebra rotors provide singularity-free 3D rotations without gimbal lock.</p>
<div class="math-notation">
R = cos(θ/2) - sin(θ/2)(n⃗ · B)
</div>
<ul class="feature-list">
<li>Real-time rotor manipulation</li>
<li>Gimbal lock comparison</li>
<li>Smooth interpolation (SLERP)</li>
<li>Euler angle equivalence</li>
</ul>
<div class="demo-preview" id="rotor-preview">
<canvas id="rotor-canvas"></canvas>
</div>
<button class="launch-btn" onclick="launchDemo('rotor')">
Launch Rotor Demo
</button>
</div>
<div class="demo-card">
<h3>⚡ Electromagnetic Field Visualization</h3>
<p>See how electric and magnetic fields unite into a single multivector in geometric algebra, demonstrating Maxwell's equations elegantly.</p>
<div class="math-notation">
F = E + I·B, ∇F = J
</div>
<ul class="feature-list">
<li>Unified field representation</li>
<li>Lorentz transformations</li>
<li>Wave propagation</li>
<li>Field line visualization</li>
</ul>
<div class="demo-preview" id="em-preview">
<canvas id="em-canvas"></canvas>
</div>
<button class="launch-btn" onclick="launchDemo('electromagnetic')">
Launch EM Fields Demo
</button>
</div>
<div class="demo-card">
<h3>🧮 Automatic Differentiation</h3>
<p>Experience exact gradient computation using dual numbers, comparing with finite differences to see the precision advantage.</p>
<div class="math-notation">
f(a + bε) = f(a) + bf'(a)ε
</div>
<ul class="feature-list">
<li>Real-time function graphing</li>
<li>Exact vs. numerical derivatives</li>
<li>Error analysis visualization</li>
<li>Neural network gradients</li>
</ul>
<div class="demo-preview" id="autodiff-preview">
<div id="autodiff-plot"></div>
</div>
<button class="launch-btn" onclick="launchDemo('autodiff')">
Launch AutoDiff Demo
</button>
</div>
<div class="demo-card">
<h3>⚛️ Quantum Spin with GA</h3>
<p>Visualize quantum spin states and measurements using geometric algebra, making the abstract concrete through Bloch sphere representations.</p>
<div class="math-notation">
|ψ⟩ = α|↑⟩ + β|↓⟩, σ = e₁₂
</div>
<ul class="feature-list">
<li>Bloch sphere visualization</li>
<li>Spin measurement simulation</li>
<li>Pauli matrices as bivectors</li>
<li>Quantum evolution</li>
</ul>
<div class="demo-preview" id="quantum-preview">
<canvas id="quantum-canvas"></canvas>
</div>
<button class="launch-btn" onclick="launchDemo('quantum')">
Launch Quantum Demo
</button>
</div>
<div class="demo-card">
<h3>📈 Verified Optimization</h3>
<p>Watch optimization algorithms converge with mathematical guarantees, using exact gradients from dual number automatic differentiation.</p>
<div class="math-notation">
x_{n+1} = x_n - α∇f(x_n)
</div>
<ul class="feature-list">
<li>Multiple optimization functions</li>
<li>Gradient descent visualization</li>
<li>Convergence verification</li>
<li>Exact vs. approximate gradients</li>
</ul>
<div class="demo-preview" id="optimization-preview">
<div id="optimization-plot"></div>
</div>
<button class="launch-btn" onclick="launchDemo('optimization')">
Launch Optimization Demo
</button>
</div>
<div class="demo-card">
<h3>🌊 Fluid Vorticity Visualization</h3>
<p>Explore fluid dynamics where vorticity becomes a natural bivector quantity, making circulation and helicity intuitive geometric concepts.</p>
<div class="math-notation">
ω = ∇ ∧ v, Γ = ∮ v·dl
</div>
<ul class="feature-list">
<li>Vortex ring simulation</li>
<li>Circulation visualization</li>
<li>Magnus effect demonstration</li>
<li>Flow field interactions</li>
</ul>
<div class="demo-preview" id="fluid-preview">
<canvas id="fluid-canvas"></canvas>
</div>
<button class="launch-btn" onclick="launchDemo('fluid')">
Launch Fluid Demo
</button>
</div>
</div>
<div class="navigation">
<h3>🎓 Educational Pathways</h3>
<div class="nav-links">
<a href="#beginner">Beginner Track</a>
<a href="#intermediate">Intermediate Track</a>
<a href="#advanced">Advanced Track</a>
<a href="#research">Research Level</a>
<a href="https://github.com/amari-project/amari">View Source</a>
</div>
</div>
</div>
<script type="module">
import * as THREE from 'three';
function initRotorPreview() {
const canvas = document.getElementById('rotor-canvas');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
color: 0x667eea,
wireframe: true
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 3;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
}
function initEMPreview() {
const canvas = document.getElementById('em-canvas');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
const points = [];
for (let i = 0; i < 50; i++) {
points.push(new THREE.Vector3(
(i - 25) * 0.1,
Math.sin(i * 0.2) * 0.5,
Math.cos(i * 0.2) * 0.5
));
}
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0x764ba2 });
const line = new THREE.Line(geometry, material);
scene.add(line);
camera.position.z = 3;
function animate() {
requestAnimationFrame(animate);
line.rotation.z += 0.005;
renderer.render(scene, camera);
}
animate();
}
function initQuantumPreview() {
const canvas = document.getElementById('quantum-canvas');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({
color: 0x667eea,
wireframe: true,
transparent: true,
opacity: 0.3
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
const vectorGeometry = new THREE.ConeGeometry(0.1, 0.5, 8);
const vectorMaterial = new THREE.MeshBasicMaterial({ color: 0xff6b6b });
const vector = new THREE.Mesh(vectorGeometry, vectorMaterial);
vector.position.set(0, 0.5, 0);
scene.add(vector);
camera.position.z = 3;
function animate() {
requestAnimationFrame(animate);
sphere.rotation.y += 0.005;
vector.rotation.z += 0.02;
renderer.render(scene, camera);
}
animate();
}
function initFluidPreview() {
const canvas = document.getElementById('fluid-canvas');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
const torusGeometry = new THREE.TorusGeometry(0.8, 0.2, 8, 20);
const torusMaterial = new THREE.MeshBasicMaterial({
color: 0x4ecdc4,
wireframe: true
});
const torus = new THREE.Mesh(torusGeometry, torusMaterial);
scene.add(torus);
camera.position.z = 3;
function animate() {
requestAnimationFrame(animate);
torus.rotation.x += 0.01;
torus.rotation.y += 0.005;
renderer.render(scene, camera);
}
animate();
}
window.addEventListener('load', () => {
initRotorPreview();
initEMPreview();
initQuantumPreview();
initFluidPreview();
});
window.launchDemo = function(demoType) {
const demoUrls = {
'rotor': './demos/rotor-demo.html',
'electromagnetic': './demos/em-demo.html',
'autodiff': './demos/autodiff-demo.html',
'quantum': './demos/quantum-demo.html',
'optimization': './demos/optimization-demo.html',
'fluid': './demos/fluid-demo.html'
};
if (demoUrls[demoType]) {
window.open(demoUrls[demoType], '_blank');
} else {
alert(`${demoType} demo coming soon! This would launch an interactive ${demoType} visualization.`);
}
};
</script>
</body>
</html>