Spaces:

raayraay
/

hypnotic-flocking

Running

App Files Files Community

raayraay99 commited on Feb 1

Commit

24883ad

1 Parent(s): 7f8fcea

✨ Viral upgrade: audio-reactive, fullscreen, video export

Browse files

Files changed (2) hide show

README.md +26 -6
index.html +522 -341

README.md CHANGED Viewed

@@ -1,12 +1,32 @@
 ---
-title: hypnotic-flocking
 emoji: 🐳
 colorFrom: blue
-colorTo: blue
 sdk: static
-pinned: false
-tags:
-  - deepsite
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Watch Whales Think 🐳
 emoji: 🐳
 colorFrom: blue
+colorTo: green
 sdk: static
+pinned: true
+short_description: Mesmerizing boids simulation with audio reactivity
 ---
+# 🐳 Hypnotic Flocking
+**Watch whales think** — A mesmerizing simulation of emergent flocking behavior.
+## Features
+- 🎨 **Fullscreen Canvas** — Immersive visual experience
+- 🎤 **Audio Reactive** — Whales dance to your music (press SPACE)
+- 📹 **MP4 Export** — Record 30s clips for TikTok (press R)
+- ⚙️ **Minimal Controls** — Chaos, Count, Trail Glow
+## Keyboard Shortcuts
+| Key | Action |
+|-----|--------|
+| `F` | Toggle controls |
+| `SPACE` | Toggle audio reactive |
+| `R` | Start/stop recording |
+---
+Made with emergent algorithms and neon dreams.

index.html CHANGED Viewed

@@ -3,396 +3,577 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hypnotic Flocking Simulation</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         body {
-            margin: 0;
             overflow: hidden;
             background: #000;
         }
-        canvas {
-            display: block;
-        }
         .controls {
-            position: absolute;
             top: 20px;
             left: 20px;
             z-index: 100;
             color: white;
-            background: rgba(0, 0, 0, 0.7);
-            padding: 15px;
-            border-radius: 10px;
-            font-family: 'Arial', sans-serif;
         }
-        .particle {
-            position: absolute;
             border-radius: 50%;
-            pointer-events: none;
         }
     </style>
 </head>
 <body>
-    <canvas id="flockCanvas"></canvas>
-    <div class="controls">
-        <h1 class="text-2xl font-bold mb-4 text-purple-400">Hypnotic Flocking</h1>
-        <div class="grid grid-cols-2 gap-4">
-            <div>
-                <label class="block text-sm font-medium text-cyan-300">Alignment</label>
-                <input type="range" id="alignment" min="0" max="2" step="0.01" value="1" class="w-full">
-            </div>
-            <div>
-                <label class="block text-sm font-medium text-cyan-300">Cohesion</label>
-                <input type="range" id="cohesion" min="0" max="2" step="0.01" value="1" class="w-full">
-            </div>
-            <div>
-                <label class="block text-sm font-medium text-cyan-300">Separation</label>
-                <input type="range" id="separation" min="0" max="2" step="0.01" value="1.5" class="w-full">
-            </div>
-            <div>
-                <label class="block text-sm font-medium text-cyan-300">Particle Count</label>
-                <input type="range" id="particleCount" min="50" max="1000" step="10" value="500" class="w-full">
-            </div>
-            <div>
-                <label class="block text-sm font-medium text-cyan-300">Trail Length</label>
-                <input type="range" id="trailLength" min="0" max="1" step="0.01" value="0.05" class="w-full">
-            </div>
-            <div>
-                <label class="block text-sm font-medium text-cyan-300">Color Mode</label>
-                <select id="colorMode" class="w-full bg-gray-800 text-white rounded p-1">
-                    <option value="velocity">Velocity</option>
-                    <option value="distance">Distance</option>
-                    <option value="rainbow">Rainbow</option>
-                    <option value="pulse">Pulse</option>
-                </select>
-            </div>
         </div>
-        <button id="resetBtn" class="mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded text-white">Reset Simulation</button>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const canvas = document.getElementById('flockCanvas');
-            const ctx = canvas.getContext('2d');
-            // Set canvas to full window size
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-            // Flocking parameters
-            let params = {
-                alignment: 1,
-                cohesion: 1,
-                separation: 1.5,
-                particleCount: 500,
-                trailLength: 0.05,
-                colorMode: 'velocity',
-                mouseInfluence: true,
-                mouseRadius: 100,
-                mouseStrength: 5
-            };
-            // Initialize controls
-            document.getElementById('alignment').addEventListener('input', (e) => {
-                params.alignment = parseFloat(e.target.value);
-            });
-            document.getElementById('cohesion').addEventListener('input', (e) => {
-                params.cohesion = parseFloat(e.target.value);
-            });
-            document.getElementById('separation').addEventListener('input', (e) => {
-                params.separation = parseFloat(e.target.value);
-            });
-            document.getElementById('particleCount').addEventListener('input', (e) => {
-                params.particleCount = parseInt(e.target.value);
-                resetSimulation();
-            });
-            document.getElementById('trailLength').addEventListener('input', (e) => {
-                params.trailLength = parseFloat(e.target.value);
-            });
-            document.getElementById('colorMode').addEventListener('change', (e) => {
-                params.colorMode = e.target.value;
-            });
-            document.getElementById('resetBtn').addEventListener('click', () => {
-                resetSimulation();
-            });
-            // Mouse position
-            let mouseX = null;
-            let mouseY = null;
-            canvas.addEventListener('mousemove', (e) => {
-                mouseX = e.clientX;
-                mouseY = e.clientY;
-            });
-            canvas.addEventListener('mouseout', () => {
-                mouseX = null;
-                mouseY = null;
-            });
-            // Particle class
-            class Particle {
-                constructor() {
-                    this.reset();
-                    this.history = [];
-                    this.maxHistory = 5;
-                }
-                reset() {
-                    this.x = Math.random() * canvas.width;
-                    this.y = Math.random() * canvas.height;
-                    this.vx = (Math.random() - 0.5) * 2;
-                    this.vy = (Math.random() - 0.5) * 2;
-                    this.size = 2 + Math.random() * 3;
-                    this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
-                    this.baseHue = Math.random() * 360;
-                    this.pulsePhase = Math.random() * Math.PI * 2;
-                }
-                update(particles) {
-                    // Store position history for trails
-                    this.history.unshift({x: this.x, y: this.y});
-                    if (this.history.length > this.maxHistory) {
-                        this.history.pop();
-                    }
-                    // Apply flocking rules
-                    this.flock(particles);
-                    // Apply mouse influence
-                    if (mouseX !== null && mouseY !== null && params.mouseInfluence) {
-                        const dx = mouseX - this.x;
-                        const dy = mouseY - this.y;
-                        const distance = Math.sqrt(dx * dx + dy * dy);
-                        if (distance < params.mouseRadius) {
-                            const angle = Math.atan2(dy, dx);
-                            const force = (params.mouseRadius - distance) / params.mouseRadius * params.mouseStrength;
-                            this.vx += Math.cos(angle) * force * 0.1;
-                            this.vy += Math.sin(angle) * force * 0.1;
                         }
                     }
-                    // Update position
-                    this.x += this.vx;
-                    this.y += this.vy;
-                    // Apply boundary conditions (wrap around)
-                    if (this.x < 0) this.x = canvas.width;
-                    if (this.x > canvas.width) this.x = 0;
-                    if (this.y < 0) this.y = canvas.height;
-                    if (this.y > canvas.height) this.y = 0;
-                    // Apply friction
-                    this.vx *= 0.98;
-                    this.vy *= 0.98;
-                    // Limit speed
-                    const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
-                    const maxSpeed = 3;
-                    if (speed > maxSpeed) {
-                        this.vx = (this.vx / speed) * maxSpeed;
-                        this.vy = (this.vy / speed) * maxSpeed;
-                    }
-                    // Update pulse phase for color animation
-                    this.pulsePhase += 0.02;
                 }
-                flock(particles) {
-                    let alignmentX = 0;
-                    let alignmentY = 0;
-                    let cohesionX = 0;
-                    let cohesionY = 0;
-                    let separationX = 0;
-                    let separationY = 0;
-                    let neighborCount = 0;
-                    const perceptionRadius = 100;
-                    for (let other of particles) {
-                        if (other === this) continue;
-                        const dx = other.x - this.x;
-                        const dy = other.y - this.y;
-                        const distance = Math.sqrt(dx * dx + dy * dy);
-                        if (distance < perceptionRadius) {
-                            neighborCount++;
-                            // Alignment: steer toward average heading of neighbors
-                            alignmentX += other.vx;
-                            alignmentY += other.vy;
-                            // Cohesion: steer toward average position of neighbors
-                            cohesionX += other.x;
-                            cohesionY += other.y;
-                            // Separation: avoid crowding neighbors
-                            if (distance < 30) {
-                                separationX -= dx / distance;
-                                separationY -= dy / distance;
-                            }
-                        }
-                    }
-                    if (neighborCount > 0) {
-                        // Apply alignment
-                        alignmentX /= neighborCount;
-                        alignmentY /= neighborCount;
-                        const alignMag = Math.sqrt(alignmentX * alignmentX + alignmentY * alignmentY);
-                        if (alignMag > 0) {
-                            alignmentX = (alignmentX / alignMag) * params.alignment;
-                            alignmentY = (alignmentY / alignMag) * params.alignment;
-                        }
-                        // Apply cohesion
-                        cohesionX /= neighborCount;
-                        cohesionY /= neighborCount;
-                        cohesionX -= this.x;
-                        cohesionY -= this.y;
-                        const cohereMag = Math.sqrt(cohesionX * cohesionX + cohesionY * cohesionY);
-                        if (cohereMag > 0) {
-                            cohesionX = (cohesionX / cohereMag) * params.cohesion;
-                            cohesionY = (cohesionY / cohereMag) * params.cohesion;
-                        }
-                        // Apply separation
-                        const separateMag = Math.sqrt(separationX * separationX + separationY * separationY);
-                        if (separateMag > 0) {
-                            separationX = (separationX / separateMag) * params.separation;
-                            separationY = (separationY / separateMag) * params.separation;
-                        }
-                        // Combine all forces
-                        this.vx += alignmentX + cohesionX + separationX;
-                        this.vy += alignmentY + cohesionY + separationY;
-                    }
                 }
-                draw(ctx) {
-                    // Determine color based on mode
-                    let color;
-                    const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
-                    switch(params.colorMode) {
-                        case 'velocity':
-                            color = `hsl(${(speed * 50) % 360}, 100%, 50%)`;
-                            break;
-                        case 'distance':
-                            const avgDist = this.calculateAverageDistance();
-                            color = `hsl(${(avgDist * 0.5) % 360}, 100%, 50%)`;
-                            break;
-                        case 'rainbow':
-                            color = `hsl(${(this.baseHue + Date.now() * 0.01) % 360}, 100%, 50%)`;
-                            break;
-                        case 'pulse':
-                            const pulseValue = Math.sin(this.pulsePhase) * 0.5 + 0.5;
-                            color = `hsl(${this.baseHue}, 100%, ${pulseValue * 50 + 30}%)`;
-                            break;
-                        default:
-                            color = this.color;
-                    }
-                    // Draw trail
-                    if (this.history.length > 1) {
-                        ctx.beginPath();
-                        ctx.moveTo(this.history[0].x, this.history[0].y);
-                        for (let i = 1; i < this.history.length; i++) {
-                            const alpha = i / this.history.length * params.trailLength;
-                            ctx.strokeStyle = color.replace(')', `, ${alpha})`).replace('hsl', 'hsla');
-                            ctx.lineWidth = this.size * 0.7;
-                            ctx.lineTo(this.history[i].x, this.history[i].y);
-                            ctx.stroke();
-                            ctx.beginPath();
-                            ctx.moveTo(this.history[i].x, this.history[i].y);
-                        }
-                    }
-                    // Draw particle
-                    ctx.beginPath();
-                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-                    ctx.fillStyle = color;
-                    ctx.fill();
                 }
-                calculateAverageDistance() {
-                    let totalDist = 0;
-                    let count = 0;
                     for (let i = 1; i < this.history.length; i++) {
-                        const dx = this.history[i].x - this.history[i-1].x;
-                        const dy = this.history[i].y - this.history[i-1].y;
-                        totalDist += Math.sqrt(dx * dx + dy * dy);
-                        count++;
                     }
-                    return count > 0 ? totalDist / count : 0;
                 }
             }
-            // Simulation state
-            let particles = [];
-            let lastTime = 0;
-            let frameCount = 0;
-            let fps = 0;
-            function initSimulation() {
-                particles = [];
-                for (let i = 0; i < params.particleCount; i++) {
-                    particles.push(new Particle());
                 }
             }
-            function resetSimulation() {
-                initSimulation();
             }
-            function animate(currentTime) {
-                // Calculate FPS
-                frameCount++;
-                if (currentTime - lastTime >= 1000) {
-                    fps = frameCount;
-                    frameCount = 0;
-                    lastTime = currentTime;
                 }
-                // Clear canvas with fade effect
-                ctx.fillStyle = `rgba(0, 0, 0, ${params.trailLength})`;
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-                // Update and draw all particles
-                for (let particle of particles) {
-                    particle.update(particles);
-                    particle.draw(ctx);
                 }
-                // Draw FPS counter
-                ctx.fillStyle = 'white';
-                ctx.font = '14px Arial';
-                ctx.fillText(`FPS: ${fps}`, 10, 20);
-                ctx.fillText(`Particles: ${particles.length}`, 10, 40);
-                requestAnimationFrame(animate);
             }
-            // Handle window resize
-            window.addEventListener('resize', () => {
-                canvas.width = window.innerWidth;
-                canvas.height = window.innerHeight;
-            });
-            // Start simulation
-            initSimulation();
-            animate();
         });
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=raayraay/hypnotic-flocking" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Watch Whales Think 🐳</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
             overflow: hidden;
             background: #000;
+            font-family: 'Inter', system-ui, sans-serif;
         }
+        canvas { display: block; position: fixed; top: 0; left: 0; }
+        /* Glassmorphism controls */
         .controls {
+            position: fixed;
             top: 20px;
             left: 20px;
+            padding: 24px;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: white;
+            z-index: 100;
+            min-width: 280px;
+            transition: opacity 0.3s, transform 0.3s;
+        }
+        .controls.hidden {
+            opacity: 0;
+            pointer-events: none;
+            transform: translateX(-100%);
+        }
+        .controls h1 {
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-bottom: 4px;
+            background: linear-gradient(135deg, #00d9ff, #00ff88);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .controls .tagline {
+            font-size: 0.85rem;
+            color: rgba(255, 255, 255, 0.6);
+            margin-bottom: 20px;
+        }
+        .slider-group { margin-bottom: 16px; }
+        .slider-group label {
+            display: block;
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: rgba(255, 255, 255, 0.7);
+            margin-bottom: 6px;
+        }
+        input[type="range"] {
+            width: 100%;
+            height: 6px;
+            border-radius: 3px;
+            background: rgba(255, 255, 255, 0.1);
+            appearance: none;
+            cursor: pointer;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #00d9ff, #00ff88);
+            cursor: pointer;
+            box-shadow: 0 0 15px rgba(0, 217, 255, 0.5);
+        }
+        .btn {
+            width: 100%;
+            padding: 12px;
+            border: none;
+            border-radius: 12px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            margin-top: 8px;
+            font-size: 0.9rem;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #00d9ff, #00ff88);
+            color: #000;
+        }
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .btn:hover { transform: scale(1.02); }
+        .btn:active { transform: scale(0.98); }
+        .btn-audio.active {
+            background: linear-gradient(135deg, #ff0080, #ff6600);
+            animation: pulse 1s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 128, 0.5); }
+            50% { box-shadow: 0 0 20px 5px rgba(255, 0, 128, 0.3); }
+        }
+        /* Floating toggle button */
+        .toggle-btn {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
             z-index: 100;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+        }
+        .toggle-btn:hover {
+            background: rgba(0, 217, 255, 0.3);
+            transform: scale(1.1);
+        }
+        /* Audio visualizer indicator */
+        .audio-visualizer {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 4px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .audio-visualizer.active { opacity: 1; }
+        .audio-bar {
+            width: 4px;
+            height: 20px;
+            background: linear-gradient(to top, #00d9ff, #00ff88);
+            border-radius: 2px;
+            transform-origin: bottom;
+        }
+        /* Recording indicator */
+        .recording-indicator {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 16px;
+            background: rgba(255, 0, 0, 0.8);
+            border-radius: 20px;
             color: white;
+            font-weight: 600;
+            font-size: 0.85rem;
+            opacity: 0;
+            transition: opacity 0.3s;
+            z-index: 100;
         }
+        .recording-indicator.active { opacity: 1; }
+        .recording-dot {
+            width: 10px;
+            height: 10px;
             border-radius: 50%;
+            background: white;
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
         }
     </style>
 </head>
 <body>
+    <canvas id="canvas"></canvas>
+    <!-- Controls Panel -->
+    <div class="controls" id="controls">
+        <h1>🐳 Hypnotic Flocking</h1>
+        <p class="tagline">Watch whales think</p>
+        <div class="slider-group">
+            <label>Chaos Level</label>
+            <input type="range" id="chaos" min="0" max="100" value="30">
         </div>
+        <div class="slider-group">
+            <label>Whale Count</label>
+            <input type="range" id="count" min="50" max="1000" value="500">
+        </div>
+        <div class="slider-group">
+            <label>Trail Glow</label>
+            <input type="range" id="trail" min="0" max="100" value="70">
+        </div>
+        <button class="btn btn-secondary btn-audio" id="audioBtn">
+            🎤 Audio Reactive
+        </button>
+        <button class="btn btn-primary" id="recordBtn">
+            📹 Record MP4
+        </button>
+        <button class="btn btn-secondary" id="resetBtn">
+            ↻ Reset
+        </button>
+    </div>
+    <!-- Toggle Button -->
+    <button class="toggle-btn" id="toggleBtn" title="Toggle Controls">⚙️</button>
+    <!-- Audio Visualizer -->
+    <div class="audio-visualizer" id="audioVisualizer">
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
+        <div class="audio-bar"></div>
+    </div>
+    <!-- Recording Indicator -->
+    <div class="recording-indicator" id="recordingIndicator">
+        <div class="recording-dot"></div>
+        <span>Recording...</span>
     </div>
     <script>
+        // Canvas setup
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        let width, height;
+        function resize() {
+            width = canvas.width = window.innerWidth;
+            height = canvas.height = window.innerHeight;
+        }
+        resize();
+        window.addEventListener('resize', resize);
+        // State
+        let particles = [];
+        let audioContext = null;
+        let analyser = null;
+        let audioData = null;
+        let isAudioActive = false;
+        let audioLevel = 0;
+        let mediaRecorder = null;
+        let recordedChunks = [];
+        let isRecording = false;
+        // Controls
+        const chaosSlider = document.getElementById('chaos');
+        const countSlider = document.getElementById('count');
+        const trailSlider = document.getElementById('trail');
+        const audioBtn = document.getElementById('audioBtn');
+        const recordBtn = document.getElementById('recordBtn');
+        const resetBtn = document.getElementById('resetBtn');
+        const toggleBtn = document.getElementById('toggleBtn');
+        const controlsPanel = document.getElementById('controls');
+        const audioVisualizer = document.getElementById('audioVisualizer');
+        const recordingIndicator = document.getElementById('recordingIndicator');
+        const audioBars = audioVisualizer.querySelectorAll('.audio-bar');
+        // Particle class
+        class Particle {
+            constructor() {
+                this.x = Math.random() * width;
+                this.y = Math.random() * height;
+                this.vx = (Math.random() - 0.5) * 4;
+                this.vy = (Math.random() - 0.5) * 4;
+                this.history = [];
+                this.hue = Math.random() * 60 + 140; // Teal-green range
+            }
+            update(particles, chaos) {
+                // Boids algorithm
+                let alignX = 0, alignY = 0;
+                let cohesionX = 0, cohesionY = 0;
+                let separationX = 0, separationY = 0;
+                let neighbors = 0;
+                const perception = 80 + chaos * 0.5;
+                const chaosMultiplier = 1 + (chaos / 100) * 2;
+                for (const other of particles) {
+                    const dx = other.x - this.x;
+                    const dy = other.y - this.y;
+                    const dist = Math.sqrt(dx * dx + dy * dy);
+                    if (dist > 0 && dist < perception) {
+                        alignX += other.vx;
+                        alignY += other.vy;
+                        cohesionX += other.x;
+                        cohesionY += other.y;
+                        if (dist < 30) {
+                            separationX -= dx / dist;
+                            separationY -= dy / dist;
                         }
+                        neighbors++;
                     }
                 }
+                if (neighbors > 0) {
+                    // Alignment
+                    alignX /= neighbors;
+                    alignY /= neighbors;
+                    this.vx += (alignX - this.vx) * 0.05 * chaosMultiplier;
+                    this.vy += (alignY - this.vy) * 0.05 * chaosMultiplier;
+                    // Cohesion
+                    cohesionX /= neighbors;
+                    cohesionY /= neighbors;
+                    this.vx += (cohesionX - this.x) * 0.001;
+                    this.vy += (cohesionY - this.y) * 0.001;
+                    // Separation
+                    this.vx += separationX * 0.5;
+                    this.vy += separationY * 0.5;
                 }
+                // Audio reactivity
+                if (isAudioActive && audioLevel > 0) {
+                    const audioForce = audioLevel * 0.3;
+                    this.vx += (Math.random() - 0.5) * audioForce;
+                    this.vy += (Math.random() - 0.5) * audioForce;
+                    this.hue = 140 + audioLevel * 200; // Shift colors with audio
                 }
+                // Speed limit
+                const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
+                const maxSpeed = 4 + (chaos / 100) * 4;
+                if (speed > maxSpeed) {
+                    this.vx = (this.vx / speed) * maxSpeed;
+                    this.vy = (this.vy / speed) * maxSpeed;
+                }
+                // Move
+                this.x += this.vx;
+                this.y += this.vy;
+                // Wrap edges
+                if (this.x < 0) this.x = width;
+                if (this.x > width) this.x = 0;
+                if (this.y < 0) this.y = height;
+                if (this.y > height) this.y = 0;
+                // Store history for trails
+                this.history.push({ x: this.x, y: this.y });
+                const maxHistory = Math.floor(trailSlider.value / 2) + 5;
+                if (this.history.length > maxHistory) {
+                    this.history.shift();
+                }
+            }
+            draw() {
+                // Draw trail
+                if (this.history.length > 1) {
+                    ctx.beginPath();
+                    ctx.moveTo(this.history[0].x, this.history[0].y);
                     for (let i = 1; i < this.history.length; i++) {
+                        ctx.lineTo(this.history[i].x, this.history[i].y);
                     }
+                    const gradient = ctx.createLinearGradient(
+                        this.history[0].x, this.history[0].y,
+                        this.x, this.y
+                    );
+                    gradient.addColorStop(0, `hsla(${this.hue}, 100%, 50%, 0)`);
+                    gradient.addColorStop(1, `hsla(${this.hue}, 100%, 60%, 0.8)`);
+                    ctx.strokeStyle = gradient;
+                    ctx.lineWidth = 2;
+                    ctx.stroke();
                 }
+                // Draw head
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
+                ctx.fillStyle = `hsl(${this.hue}, 100%, 70%)`;
+                ctx.fill();
             }
+        }
+        // Initialize particles
+        function initParticles(count) {
+            particles = [];
+            for (let i = 0; i < count; i++) {
+                particles.push(new Particle());
+            }
+        }
+        initParticles(500);
+        // Animation loop
+        function animate() {
+            // Fade effect for trails
+            ctx.fillStyle = `rgba(0, 0, 0, ${1 - trailSlider.value / 100})`;
+            ctx.fillRect(0, 0, width, height);
+            const chaos = parseFloat(chaosSlider.value);
+            // Update audio level
+            if (isAudioActive && analyser) {
+                analyser.getByteFrequencyData(audioData);
+                audioLevel = audioData.reduce((a, b) => a + b) / audioData.length / 255;
+                // Update visualizer bars
+                for (let i = 0; i < audioBars.length; i++) {
+                    const value = audioData[i * 4] / 255;
+                    audioBars[i].style.transform = `scaleY(${0.3 + value * 2})`;
                 }
             }
+            // Update and draw particles
+            for (const p of particles) {
+                p.update(particles, chaos);
+                p.draw();
             }
+            requestAnimationFrame(animate);
+        }
+        animate();
+        // Event listeners
+        countSlider.addEventListener('input', () => {
+            const targetCount = parseInt(countSlider.value);
+            if (particles.length < targetCount) {
+                while (particles.length < targetCount) {
+                    particles.push(new Particle());
                 }
+            } else {
+                particles.length = targetCount;
+            }
+        });
+        resetBtn.addEventListener('click', () => {
+            initParticles(parseInt(countSlider.value));
+        });
+        toggleBtn.addEventListener('click', () => {
+            controlsPanel.classList.toggle('hidden');
+        });
+        // Audio reactive mode
+        audioBtn.addEventListener('click', async () => {
+            if (!isAudioActive) {
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    audioContext = new AudioContext();
+                    const source = audioContext.createMediaStreamSource(stream);
+                    analyser = audioContext.createAnalyser();
+                    analyser.fftSize = 64;
+                    source.connect(analyser);
+                    audioData = new Uint8Array(analyser.frequencyBinCount);
+                    isAudioActive = true;
+                    audioBtn.classList.add('active');
+                    audioBtn.textContent = '🎤 Audio ON';
+                    audioVisualizer.classList.add('active');
+                } catch (e) {
+                    console.error('Microphone access denied:', e);
+                    alert('Please allow microphone access for audio-reactive mode');
                 }
+            } else {
+                isAudioActive = false;
+                audioLevel = 0;
+                if (audioContext) {
+                    audioContext.close();
+                    audioContext = null;
+                }
+                audioBtn.classList.remove('active');
+                audioBtn.textContent = '🎤 Audio Reactive';
+                audioVisualizer.classList.remove('active');
+            }
+        });
+        // MP4 Recording
+        recordBtn.addEventListener('click', async () => {
+            if (!isRecording) {
+                try {
+                    const stream = canvas.captureStream(60);
+                    mediaRecorder = new MediaRecorder(stream, {
+                        mimeType: 'video/webm;codecs=vp9',
+                        videoBitsPerSecond: 8000000
+                    });
+                    recordedChunks = [];
+                    mediaRecorder.ondataavailable = (e) => {
+                        if (e.data.size > 0) recordedChunks.push(e.data);
+                    };
+                    mediaRecorder.onstop = () => {
+                        const blob = new Blob(recordedChunks, { type: 'video/webm' });
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = 'whale-dreams.webm';
+                        a.click();
+                        URL.revokeObjectURL(url);
+                    };
+                    mediaRecorder.start();
+                    isRecording = true;
+                    recordBtn.textContent = '⏹️ Stop Recording';
+                    recordBtn.classList.remove('btn-primary');
+                    recordBtn.classList.add('btn-secondary');
+                    recordingIndicator.classList.add('active');
+                    // Auto-stop after 30 seconds
+                    setTimeout(() => {
+                        if (isRecording) {
+                            recordBtn.click();
+                        }
+                    }, 30000);
+                } catch (e) {
+                    console.error('Recording failed:', e);
+                    alert('Recording not supported in this browser');
+                }
+            } else {
+                mediaRecorder.stop();
+                isRecording = false;
+                recordBtn.textContent = '📹 Record MP4';
+                recordBtn.classList.add('btn-primary');
+                recordBtn.classList.remove('btn-secondary');
+                recordingIndicator.classList.remove('active');
+            }
+        });
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'f' || e.key === 'F') {
+                controlsPanel.classList.toggle('hidden');
+            }
+            if (e.key === ' ') {
+                audioBtn.click();
+            }
+            if (e.key === 'r' || e.key === 'R') {
+                recordBtn.click();
             }
         });
+        // Start in fullscreen mode after 5 seconds
+        setTimeout(() => {
+            controlsPanel.classList.add('hidden');
+        }, 5000);
     </script>
+</body>
+</html>