Particle3d_v004

Running

App Files Files Community

JamesToth commited on Dec 4, 2025

Commit

0dbf181

verified ·

1 Parent(s): 3aa7e84

Update index.html

Browse files

Files changed (1) hide show

index.html +400 -325

index.html CHANGED Viewed

@@ -3,421 +3,496 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pro CPU Particle System</title>
     <style>
-        body { margin: 0; overflow: hidden; background: #000; font-family: 'Courier New', Courier, monospace; }
         #hud {
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            color: rgba(255, 255, 255, 0.8);
-            pointer-events: none;
-            z-index: 10;
         }
-        h1 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; }
-        .meta { font-size: 10px; color: #555; margin-top: 5px; }
-        #gesture-alert {
-            position: absolute;
-            top: 50%; left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 2rem;
-            color: white;
-            opacity: 0;
-            transition: opacity 0.5s;
-            text-shadow: 0 0 20px rgba(0,255,255,0.8);
-            pointer-events: none;
         }
-        #loading {
-            position: absolute;
-            bottom: 20px; left: 20px;
-            color: #00ff88;
-            font-size: 12px;
         }
         video { display: none; }
     </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
 </head>
 <body>
     <div id="hud">
-        <h1>Kinetic Particle Engine</h1>
-        <div class="meta">CPU OPTIMIZED // PHYSICS ENABLED</div>
-        <div class="meta" id="mode-display">MODE: GALAXY</div>
-        <div class="meta" style="margin-top:15px; color:#888;">
-            [GESTURES]<br>
-            • SWIPE LEFT/RIGHT: Change Shape<br>
-            • PINCH: Scale<br>
-            • FIST: Gravity Well (Attract)
         </div>
     </div>
-    <div id="gesture-alert">SWIPE DETECTED</div>
-    <div id="loading">SYSTEM INITIALIZING...</div>
     <video id="input-video"></video>
 <script>
-    /**
-     * ------------------------------------------------------------------
-     * 1. UTILITIES & GENERATORS
-     * ------------------------------------------------------------------
-     */
-    // Generate a soft glow texture programmatically (saves loading images)
-    function createGlowTexture() {
-        const canvas = document.createElement('canvas');
-        canvas.width = 32; canvas.height = 32;
-        const ctx = canvas.getContext('2d');
-        const grad = ctx.createRadialGradient(16, 16, 0, 16, 16, 16);
-        grad.addColorStop(0, 'rgba(255, 255, 255, 1)');
-        grad.addColorStop(0.2, 'rgba(255, 255, 255, 0.8)');
-        grad.addColorStop(0.5, 'rgba(255, 255, 255, 0.2)');
-        grad.addColorStop(1, 'rgba(0, 0, 0, 0)');
-        ctx.fillStyle = grad;
-        ctx.fillRect(0, 0, 32, 32);
-        const texture = new THREE.CanvasTexture(canvas);
-        return texture;
-    }
-    // Shape Formulas
-    const Shapes = {
-        galaxy: (i, total) => {
-            const arms = 3;
-            const spin = i / total * arms;
-            const r = (i / total) * 8;
-            const angle = spin * Math.PI * 2;
-            return {
-                x: Math.cos(angle) * r,
-                y: (Math.random() - 0.5) * (10 - r), // Thicker center
-                z: Math.sin(angle) * r
-            };
-        },
-        sphere: (i, total) => {
-            const phi = Math.acos(-1 + (2 * i) / total);
-            const theta = Math.sqrt(total * Math.PI) * phi;
-            const r = 5;
-            return {
-                x: r * Math.cos(theta) * Math.sin(phi),
-                y: r * Math.sin(theta) * Math.sin(phi),
-                z: r * Math.cos(phi)
-            };
-        },
-        heart: (i, total) => {
-            const t = Math.random() * Math.PI * 2;
-            // 3D Heart approximation
-            const x = 16 * Math.pow(Math.sin(t), 3);
-            const y = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t);
-            const scale = 0.35;
-            return {
-                x: x * scale,
-                y: y * scale,
-                z: (Math.random()-0.5) * 4
-            };
         },
-        tornado: (i, total) => {
-            const angle = i * 0.1;
-            const y = (i / total) * 12 - 6;
-            const r = 1 + (y + 6) * 0.3;
-            return {
-                x: Math.cos(angle) * r,
-                y: y,
-                z: Math.sin(angle) * r
-            };
-        }
     };
-    /**
-     * ------------------------------------------------------------------
-     * 2. CORE ENGINE SETUP
-     * ------------------------------------------------------------------
-     */
-    const PARTICLE_COUNT = 12000; // Optimized for CPU physics
     const scene = new THREE.Scene();
-    scene.fog = new THREE.FogExp2(0x000000, 0.04);
     const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 100);
-    camera.position.z = 12;
     const renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: "high-performance" });
     renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
     document.body.appendChild(renderer.domElement);
-    /**
-     * ------------------------------------------------------------------
-     * 3. PARTICLE SYSTEM (PHYSICS BASED)
-     * ------------------------------------------------------------------
-     */
-    const geometry = new THREE.BufferGeometry();
-    // Arrays for Double Buffering / Physics
-    const posArray = new Float32Array(PARTICLE_COUNT * 3);
-    const targetArray = new Float32Array(PARTICLE_COUNT * 3);
-    const velocityArray = new Float32Array(PARTICLE_COUNT * 3); // Velocity for physics
-    const colorsArray = new Float32Array(PARTICLE_COUNT * 3);
-    const baseColor = new THREE.Color(0x00aaff);
-    for(let i=0; i<PARTICLE_COUNT; i++) {
-        const i3 = i*3;
-        posArray[i3] = (Math.random()-0.5)*20;
-        posArray[i3+1] = (Math.random()-0.5)*20;
-        posArray[i3+2] = (Math.random()-0.5)*20;
-        targetArray[i3] = posArray[i3];
-        colorsArray[i3] = baseColor.r;
-        colorsArray[i3+1] = baseColor.g;
-        colorsArray[i3+2] = baseColor.b;
     }
-    geometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
-    geometry.setAttribute('color', new THREE.BufferAttribute(colorsArray, 3));
-    const material = new THREE.PointsMaterial({
-        size: 0.15,
-        map: createGlowTexture(), // Use generated texture
         vertexColors: true,
         transparent: true,
-        opacity: 0.9,
         blending: THREE.AdditiveBlending,
         depthWrite: false
     });
-    const particles = new THREE.Points(geometry, material);
     scene.add(particles);
-    /**
-     * ------------------------------------------------------------------
-     * 4. LOGIC & STATE
-     * ------------------------------------------------------------------
-     */
-    const AppState = {
-        currentShape: 'galaxy',
-        shapeKeys: Object.keys(Shapes),
-        shapeIndex: 0,
-        hand: { x: 0, y: 0, z: 0, active: false, pinch: 0, fist: false },
-        handVelocity: { x: 0, y: 0 }
     };
-    function switchShape(direction) {
-        if(direction === 'next') {
-            AppState.shapeIndex = (AppState.shapeIndex + 1) % AppState.shapeKeys.length;
-        } else {
-            AppState.shapeIndex = (AppState.shapeIndex - 1 + AppState.shapeKeys.length) % AppState.shapeKeys.length;
-        }
-        AppState.currentShape = AppState.shapeKeys[AppState.shapeIndex];
-        document.getElementById('mode-display').innerText = `MODE: ${AppState.currentShape.toUpperCase()}`;
-        // Show UI feedback
-        const alert = document.getElementById('gesture-alert');
-        alert.innerText = `${AppState.currentShape.toUpperCase()}`;
-        alert.style.opacity = 1;
-        setTimeout(() => alert.style.opacity = 0, 1000);
-        // Recalculate targets
-        const func = Shapes[AppState.currentShape];
-        for(let i=0; i<PARTICLE_COUNT; i++) {
-            const p = func(i, PARTICLE_COUNT);
-            targetArray[i*3] = p.x;
-            targetArray[i*3+1] = p.y;
-            targetArray[i*3+2] = p.z;
         }
-    }
-    // Init first shape
-    switchShape('next');
-    /**
-     * ------------------------------------------------------------------
-     * 5. COMPUTER VISION (THROTTLED)
-     * ------------------------------------------------------------------
-     */
-    const videoElement = document.getElementById('input-video');
     let lastHandX = 0;
-    // We will only process MediaPipe every 2 frames to save CPU for rendering
-    let frameSkipCounter = 0;
     const hands = new Hands({locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`});
-    hands.setOptions({
-        maxNumHands: 1,
-        modelComplexity: 0, // Lite model for speed
-        minDetectionConfidence: 0.5,
-        minTrackingConfidence: 0.5
-    });
     hands.onResults(results => {
-        const loading = document.getElementById('loading');
-        if(loading) loading.style.display = 'none';
-        if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
-            const landmarks = results.multiHandLandmarks[0];
-            AppState.hand.active = true;
-            // 1. Position Mapping (Normalized -1 to 1)
-            // Invert X because webcam is mirrored
-            const hx = -(landmarks[9].x - 0.5) * 10;
-            const hy = -(landmarks[9].y - 0.5) * 8;
-            // Calculate Velocity for gestures
-            AppState.handVelocity.x = hx - lastHandX;
-            lastHandX = hx;
-            // Smooth hand position
-            AppState.hand.x += (hx - AppState.hand.x) * 0.2;
-            AppState.hand.y += (hy - AppState.hand.y) * 0.2;
-            // 2. Pinch Detection (Thumb Tip vs Index Tip)
-            const pinchDist = Math.hypot(landmarks[4].x - landmarks[8].x, landmarks[4].y - landmarks[8].y);
-            AppState.hand.pinch = pinchDist; // <0.05 is pinch
-            // 3. Fist Detection (Tip to Wrist)
-            const wrist = landmarks[0];
-            const midTip = landmarks[12];
-            const dist = Math.hypot(wrist.x - midTip.x, wrist.y - midTip.y);
-            AppState.hand.fist = dist < 0.2; // Threshold for fist
-            // 4. Swipe Detection
-            if (Math.abs(AppState.handVelocity.x) > 0.6) {
-                // Debounce swipe
-                if (!AppState.swiping) {
-                    AppState.swiping = true;
-                    switchShape(AppState.handVelocity.x > 0 ? 'next' : 'prev');
-                    setTimeout(() => AppState.swiping = false, 500);
-                }
-            }
         } else {
-            AppState.hand.active = false;
         }
     });
-    const cameraUtils = new Camera(videoElement, {
         onFrame: async () => {
-            // Throttling Logic: Run AI every 2nd frame only
-            frameSkipCounter++;
-            if(frameSkipCounter % 2 === 0) {
-                await hands.send({image: videoElement});
-            }
         },
-        width: 640,
-        height: 480
     });
-    cameraUtils.start();
-    /**
-     * ------------------------------------------------------------------
-     * 6. PHYSICS LOOP
-     * ------------------------------------------------------------------
-     */
     const clock = new THREE.Clock();
     function animate() {
         requestAnimationFrame(animate);
         const time = clock.getElapsedTime();
-        const positions = particles.geometry.attributes.position.array;
-        const colors = particles.geometry.attributes.color.array;
-        // Interaction Variables
-        let globalScale = 1.0;
-        if(AppState.hand.active) {
-            // Map pinch to scale: 0.02->0.5, 0.2->1.5
-            globalScale = THREE.MathUtils.mapLinear(AppState.hand.pinch, 0.02, 0.2, 0.5, 1.8);
         }
-        // Particle Loop
-        for (let i = 0; i < PARTICLE_COUNT; i++) {
-            const i3 = i * 3;
-            // 1. Get Target
-            let tx = targetArray[i3] * globalScale;
-            let ty = targetArray[i3+1] * globalScale;
-            let tz = targetArray[i3+2] * globalScale;
-            // 2. Hand Repulsion / Attraction Physics
-            if (AppState.hand.active) {
-                const dx = positions[i3] - AppState.hand.x;
-                const dy = positions[i3+1] - AppState.hand.y;
-                const distSq = dx*dx + dy*dy;
-                // Repulsion Radius
-                if (distSq < 4) {
-                    const force = (4 - distSq) * 0.1;
-                    if(AppState.hand.fist) {
-                        // Attraction (Black Hole)
-                        tx -= dx * force * 5;
-                        ty -= dy * force * 5;
-                    } else {
-                        // Repulsion (Push away)
-                        tx += dx * force;
-                        ty += dy * force;
-                    }
                 }
             }
-            // 3. Spring Physics Integration
-            // Acceleration = (Target - Current) * SpringStrength
-            const ax = (tx - positions[i3]) * 0.05; // Spring strength
-            const ay = (ty - positions[i3+1]) * 0.05;
-            const az = (tz - positions[i3+2]) * 0.05;
-            // Update Velocity (Inertia)
-            velocityArray[i3]   += ax;
-            velocityArray[i3+1] += ay;
-            velocityArray[i3+2] += az;
-            // Friction (Damping)
-            velocityArray[i3]   *= 0.92;
-            velocityArray[i3+1] *= 0.92;
-            velocityArray[i3+2] *= 0.92;
-            // Apply Velocity
-            positions[i3]   += velocityArray[i3];
-            positions[i3+1] += velocityArray[i3+1];
-            positions[i3+2] += velocityArray[i3+2];
-            // 4. Dynamic Coloring based on Speed
-            const speed = Math.abs(velocityArray[i3]) + Math.abs(velocityArray[i3+1]);
-            if (speed > 0.1) {
-                // Moving fast -> White/Cyan
-                colors[i3] = 0.8; colors[i3+1] = 1.0; colors[i3+2] = 1.0;
             } else {
-                // Resting -> Base Color
-                colors[i3] += (baseColor.r - colors[i3]) * 0.1;
-                colors[i3+1] += (baseColor.g - colors[i3+1]) * 0.1;
-                colors[i3+2] += (baseColor.b - colors[i3+2]) * 0.1;
             }
         }
-        // Global idle rotation
-        if(!AppState.hand.active) {
-            particles.rotation.y = time * 0.1;
         }
-        particles.geometry.attributes.position.needsUpdate = true;
-        particles.geometry.attributes.color.needsUpdate = true;
         renderer.render(scene, camera);
     }
     animate();
-    // Resize Handler
-    window.addEventListener('resize', () => {
-        camera.aspect = window.innerWidth / window.innerHeight;
         camera.updateProjectionMatrix();
         renderer.setSize(window.innerWidth, window.innerHeight);
-    });
 </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Omni-Hand Particle Engine</title>
     <style>
+        body {
+            margin: 0; overflow: hidden; background-color: #000;
+            font-family: 'Segoe UI', monospace; user-select: none;
+        }
+        /* HUD UI */
         #hud {
+            position: absolute; top: 20px; left: 20px;
+            width: 300px; padding: 20px;
+            background: rgba(10,12,16, 0.85);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255,255,255,0.15);
+            border-left: 4px solid #00ffcc;
+            border-radius: 8px;
+            color: #fff; pointer-events: none; z-index: 10;
         }
+        h1 { margin: 0 0 10px 0; font-size: 16px; letter-spacing: 1px; color: #00ffcc; text-transform: uppercase; }
+        .row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 5px; color: #aaa; }
+        .val { font-family: 'Courier New', monospace; color: #fff; font-weight: bold; }
+        .highlight { color: #00ffcc; }
+        #detected-gesture {
+            margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.1);
+            font-size: 18px; text-align: center; color: #fff; font-weight: 300;
         }
+        #detected-gesture span { display: block; font-size: 10px; color: #666; margin-top: 4px; letter-spacing: 2px; text-transform: uppercase;}
+        #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #00ffcc; font-size: 14px; animation: blink 1s infinite; }
+        @keyframes blink { 50% { opacity: 0.5; } }
+        /* Toast Notification for Shape/Color Changes */
+        #toast {
+            position: absolute; bottom: 100px; left: 0; width: 100%;
+            text-align: center; font-size: 24px; color: white;
+            text-shadow: 0 0 20px #00ffcc; opacity: 0; transition: opacity 0.5s;
+            pointer-events: none;
         }
         video { display: none; }
     </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
 </head>
 <body>
     <div id="hud">
+        <h1>OMNI-CONTROL ENGINE</h1>
+        <div class="row"><span>SHAPE</span><span id="ui-shape" class="val">GALAXY</span></div>
+        <div class="row"><span>COLOR</span><span id="ui-color" class="val">CYBER</span></div>
+        <div class="row"><span>SIZE</span><span id="ui-size" class="val">1.0x</span></div>
+        <div class="row"><span>FPS</span><span id="ui-fps" class="val">60</span></div>
+        <div id="detected-gesture">
+            WAITING FOR HAND...
+            <span>SYSTEM STATUS</span>
         </div>
     </div>
+    <div id="toast">MODE CHANGE</div>
+    <div id="loading">INITIALIZING NEURAL NET...</div>
     <video id="input-video"></video>
 <script>
+    // ==========================================
+    // 1. SYSTEM CONFIG
+    // ==========================================
+    const CONFIG = {
+        count: 15000,
+        camWidth: 640,
+        camHeight: 480,
+        throttleAI: 2 // Save CPU
+    };
+    const COLORS = [
+        { name: 'CYBER', base: 0x00aaff, high: 0xffffff },
+        { name: 'INFERNO', base: 0xff3300, high: 0xffaa00 },
+        { name: 'POISON', base: 0x8800ff, high: 0x00ff00 },
+        { name: 'MATRIX', base: 0x003300, high: 0x00ff00 },
+        { name: 'COTTON', base: 0xffaabb, high: 0xaabbff },
+    ];
+    const State = {
+        active: false,
+        gesture: 'NONE',
+        hand: { x: 0, y: 0, z: 0, angle: 0 },
+        params: {
+            shapeIdx: 0,
+            colorIdx: 0,
+            size: 0.15,
+            autoSpin: true,
+            freeze: false,
+            turbulence: 0,
+            trail: false,
+            reset: false
         },
+        cooldown: 0
     };
+    // ==========================================
+    // 2. VISUAL ENGINE (THREE.JS)
+    // ==========================================
     const scene = new THREE.Scene();
+    scene.fog = new THREE.FogExp2(0x000000, 0.03);
     const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 100);
+    camera.position.z = 10;
     const renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: "high-performance" });
     renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
     document.body.appendChild(renderer.domElement);
+    // Texture Gen
+    const canvas = document.createElement('canvas');
+    canvas.width = 32; canvas.height = 32;
+    const ctx = canvas.getContext('2d');
+    const grad = ctx.createRadialGradient(16,16,0,16,16,16);
+    grad.addColorStop(0, 'white');
+    grad.addColorStop(1, 'rgba(255,255,255,0)');
+    ctx.fillStyle = grad; ctx.fillRect(0,0,32,32);
+    const texture = new THREE.CanvasTexture(canvas);
+    // Particles
+    const geo = new THREE.BufferGeometry();
+    const pos = new Float32Array(CONFIG.count * 3);
+    const tar = new Float32Array(CONFIG.count * 3);
+    const vel = new Float32Array(CONFIG.count * 3);
+    const col = new Float32Array(CONFIG.count * 3);
+    const extra = new Float32Array(CONFIG.count); // For trails/size variation
+    for(let i=0; i<CONFIG.count*3; i++) {
+        pos[i] = (Math.random()-0.5)*50;
+        tar[i] = pos[i];
+        vel[i] = 0;
+        col[i] = 1;
     }
+    geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+    geo.setAttribute('color', new THREE.BufferAttribute(col, 3));
+    const mat = new THREE.PointsMaterial({
+        size: State.params.size,
+        map: texture,
         vertexColors: true,
         transparent: true,
+        opacity: 0.8,
         blending: THREE.AdditiveBlending,
         depthWrite: false
     });
+    const particles = new THREE.Points(geo, mat);
     scene.add(particles);
+    // ==========================================
+    // 3. SHAPE LIBRARY
+    // ==========================================
+    const Shapes = [
+        { name: 'GALAXY', func: (i) => {
+            const r = (i/CONFIG.count)*8;
+            const a = (i/CONFIG.count)*Math.PI*8;
+            return { x: Math.cos(a)*r, y: (Math.random()-0.5), z: Math.sin(a)*r };
+        }},
+        { name: 'SPHERE', func: (i) => {
+            const phi = Math.acos(-1 + (2*i)/CONFIG.count);
+            const theta = Math.sqrt(CONFIG.count * Math.PI) * phi;
+            return { x: 5*Math.cos(theta)*Math.sin(phi), y: 5*Math.sin(theta)*Math.sin(phi), z: 5*Math.cos(phi) };
+        }},
+        { name: 'HEART', func: (i) => {
+            const t = (i/CONFIG.count)*Math.PI*2;
+            const x = 16*Math.pow(Math.sin(t),3);
+            const y = 13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t);
+            return { x: x*0.3, y: y*0.3, z: (Math.random()-0.5)*2 };
+        }},
+        { name: 'CUBE', func: (i) => {
+             const s = 3; // size
+             const ax = i % 3; // 0=x, 1=y, 2=z plane logic simplified
+             return { x: (Math.random()-0.5)*10, y: (Math.random()-0.5)*10, z: (Math.random()-0.5)*10 };
+        }},
+        { name: 'RING', func: (i) => {
+            const a = (i/CONFIG.count)*Math.PI*2;
+            return { x: Math.cos(a)*7, y: (Math.random()-0.5)*2, z: Math.sin(a)*7 };
+        }}
+    ];
+    function setShape(idx) {
+        const s = Shapes[idx];
+        document.getElementById('ui-shape').innerText = s.name;
+        showToast(s.name);
+        for(let i=0; i<CONFIG.count; i++) {
+            const p = s.func(i);
+            tar[i*3] = p.x; tar[i*3+1] = p.y; tar[i*3+2] = p.z;
+        }
+    }
+    setShape(0);
+    function setColor(idx) {
+        document.getElementById('ui-color').innerText = COLORS[idx].name;
+        showToast("COLOR: " + COLORS[idx].name);
+    }
+    function showToast(msg) {
+        const t = document.getElementById('toast');
+        t.innerText = msg; t.style.opacity = 1;
+        setTimeout(() => t.style.opacity = 0, 1000);
+    }
+    // ==========================================
+    // 4. GESTURE RECOGNITION LOGIC
+    // ==========================================
+    const Gesture = {
+        isFist: (lm) => {
+            // Tips (8,12,16,20) closer to wrist(0) than PIP joints (6,10,14,18)
+            return lm[8].y > lm[6].y && lm[12].y > lm[10].y && lm[16].y > lm[14].y && lm[20].y > lm[18].y;
+        },
+        isIndex: (lm) => lm[8].y < lm[6].y && lm[12].y > lm[10].y && lm[16].y > lm[14].y,
+        isPinky: (lm) => lm[20].y < lm[18].y && lm[16].y > lm[14].y && lm[8].y > lm[6].y,
+        isOkay: (lm) => {
+            const dist = Math.hypot(lm[4].x - lm[8].x, lm[4].y - lm[8].y);
+            return dist < 0.05 && lm[12].y < lm[10].y; // Tips touch + Middle up
+        },
+        isVictory: (lm) => lm[8].y < lm[6].y && lm[12].y < lm[10].y && lm[16].y > lm[14].y,
+        isThree: (lm) => lm[8].y < lm[6].y && lm[12].y < lm[10].y && lm[16].y < lm[14].y && lm[20].y > lm[18].y,
+        isFour: (lm) => lm[8].y < lm[6].y && lm[12].y < lm[10].y && lm[16].y < lm[14].y && lm[20].y < lm[18].y && lm[4].x < lm[3].x, // Thumb tucked
+        isOpen: (lm) => lm[8].y < lm[6].y && lm[12].y < lm[10].y && lm[16].y < lm[14].y && lm[20].y < lm[18].y,
+        isRock: (lm) => lm[8].y < lm[6].y && lm[20].y < lm[18].y && lm[12].y > lm[10].y && lm[16].y > lm[14].y,
+        isShaka: (lm) => lm[4].x > lm[3].x && lm[20].y < lm[18].y && lm[8].y > lm[6].y, // Thumb out, pinky up, others down
     };
+    function processGesture(lm, velX) {
+        let g = "UNKNOWN";
+        // 1. Swipe Check (High Priority)
+        if(Math.abs(velX) > 0.8 && State.cooldown <= 0) {
+            State.params.shapeIdx = (State.params.shapeIdx + 1) % Shapes.length;
+            setShape(State.params.shapeIdx);
+            State.cooldown = 20;
+            return "SWIPE CHANGE";
+        }
+        // 2. Pinch Check (Scaling)
+        const pinchDist = Math.hypot(lm[4].x - lm[8].x, lm[4].y - lm[8].y);
+        if(pinchDist < 0.1 && !Gesture.isFist(lm)) {
+            // Map Pinch Y position to scale
+            // Higher hand = bigger scale
+            const newSize = THREE.MathUtils.mapLinear(lm[4].y, 0, 1, 2.0, 0.5);
+            State.params.scaleTarget = newSize; // We'll lerp to this
+            g = "PINCH ZOOM";
+        }
+        // 3. Static Poses
+        if (Gesture.isFist(lm)) g = "FIST (GRAVITY)";
+        else if (Gesture.isOkay(lm)) g = "OKAY (FREEZE)";
+        else if (Gesture.isRock(lm)) g = "ROCK (TRAILS)";
+        else if (Gesture.isVictory(lm)) g = "VICTORY (CHAOS)";
+        else if (Gesture.isShaka(lm)) g = "SHAKA (RESET)";
+        else if (Gesture.isThree(lm)) {
+            if(State.cooldown <= 0) {
+                State.params.colorIdx = (State.params.colorIdx + 1) % COLORS.length;
+                setColor(State.params.colorIdx);
+                State.cooldown = 30;
+            }
+            g = "3-FINGER (COLOR)";
+        }
+        else if (Gesture.isFour(lm)) {
+            if(State.cooldown <= 0) {
+                State.params.autoSpin = !State.params.autoSpin;
+                showToast(State.params.autoSpin ? "SPIN: ON" : "SPIN: OFF");
+                State.cooldown = 30;
+            }
+            g = "4-FINGER (SPIN)";
+        }
+        else if (Gesture.isPinky(lm)) g = "PINKY (VORTEX)";
+        else if (Gesture.isIndex(lm)) g = "INDEX (CURSOR)";
+        else if (Gesture.isOpen(lm)) g = "PALM (SHIELD)";
+        // 4. Thumb Orientation (Size)
+        // Check relative y of thumb tip vs IP joint
+        if(g === "UNKNOWN" || g === "FIST (GRAVITY)") {
+            const dy = lm[4].y - lm[3].y;
+            if(dy < -0.05) { // Thumb pointing up
+                State.params.size = Math.min(State.params.size + 0.005, 0.4);
+                g = "THUMB UP (GROW)";
+            } else if (dy > 0.05) {
+                State.params.size = Math.max(State.params.size - 0.005, 0.02);
+                g = "THUMB DOWN (SHRINK)";
+            }
         }
+        return g;
+    }
+    // ==========================================
+    // 5. MEDIA PIPE LOOP
+    // ==========================================
+    const videoElem = document.getElementById('input-video');
+    const hudGesture = document.getElementById('detected-gesture');
     let lastHandX = 0;
+    let frames = 0;
     const hands = new Hands({locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`});
+    hands.setOptions({maxNumHands: 1, minDetectionConfidence: 0.6, minTrackingConfidence: 0.6});
     hands.onResults(results => {
+        document.getElementById('loading').style.display = 'none';
+        if(results.multiHandLandmarks.length > 0) {
+            State.active = true;
+            const lm = results.multiHandLandmarks[0];
+            // Map coordinates (Mirror X)
+            const x = (1 - lm[9].x) * 20 - 10;
+            const y = -(lm[9].y - 0.5) * 15;
+            const z = (lm[9].z) * 20; // Depth approx
+            const velX = x - lastHandX;
+            lastHandX = x;
+            // Detect Gesture
+            const g = processGesture(lm, velX);
+            State.gesture = g;
+            // Update HUD
+            hudGesture.innerHTML = `${g}<span>DETECTED</span>`;
+            if(g !== "NONE") hudGesture.style.borderColor = "#00ffcc";
+            // Update State Hands
+            State.hand.x += (x - State.hand.x) * 0.3;
+            State.hand.y += (y - State.hand.y) * 0.3;
+            State.hand.z = z;
         } else {
+            State.active = false;
+            State.gesture = "SEARCHING";
+            hudGesture.innerHTML = `SEARCHING<span>SHOW HAND</span>`;
+            hudGesture.style.borderColor = "#555";
         }
     });
+    const cam = new Camera(videoElem, {
         onFrame: async () => {
+            frames++;
+            if(frames % CONFIG.throttleAI === 0) await hands.send({image: videoElem});
         },
+        width: CONFIG.camWidth, height: CONFIG.camHeight
     });
+    cam.start();
+    // ==========================================
+    // 6. PHYSICS ENGINE
+    // ==========================================
     const clock = new THREE.Clock();
     function animate() {
         requestAnimationFrame(animate);
+        const dt = clock.getDelta();
         const time = clock.getElapsedTime();
+        if(State.cooldown > 0) State.cooldown--;
+        // Update Size from gesture
+        mat.size = State.params.size;
+        document.getElementById('ui-size').innerText = State.params.size.toFixed(2) + "x";
+        // Global Params
+        let damping = 0.92;
+        let scale = 1.0;
+        // --- GESTURE APPLICATION ---
+        if(State.active) {
+            if(State.gesture.includes("PINCH")) {
+                // Lerp global scale
+                 // Note: we'd need a global scaler, applying it to targets for now
+            }
+            if(State.gesture.includes("FREEZE")) damping = 0.5; // High friction
         }
+        const cTheme = COLORS[State.params.colorIdx];
+        const rBase = (cTheme.base >> 16 & 255) / 255;
+        const gBase = (cTheme.base >> 8 & 255) / 255;
+        const bBase = (cTheme.base & 255) / 255;
+        for(let i=0; i<CONFIG.count; i++) {
+            const i3 = i*3;
+            let tx = tar[i3]; let ty = tar[i3+1]; let tz = tar[i3+2];
+            // Interaction Physics
+            if(State.active) {
+                const dx = pos[i3] - State.hand.x;
+                const dy = pos[i3+1] - State.hand.y;
+                const dz = pos[i3+2] - State.hand.z * 2; // Depth
+                const distSq = dx*dx + dy*dy + dz*dz;
+                const dist = Math.sqrt(distSq);
+                // 1. SHIELD (Repulsion)
+                if(State.gesture.includes("PALM") && dist < 5) {
+                    const f = (5 - dist) * 2.0;
+                    tx += (dx/dist) * f;
+                    ty += (dy/dist) * f;
+                    tz += (dz/dist) * f;
+                }
+                // 2. GRAVITY (Fist/Index)
+                if(State.gesture.includes("FIST") && dist < 12) {
+                    tx -= dx * 0.8; // Strong pull
+                    ty -= dy * 0.8;
+                    tz -= dz * 0.8;
+                } else if(State.gesture.includes("INDEX") && dist < 8) {
+                    tx -= dx * 0.2; // Weak pull
+                    ty -= dy * 0.2;
+                }
+                // 3. VORTEX (Pinky)
+                if(State.gesture.includes("PINKY")) {
+                    // Tangent force
+                    tx += -dy * 0.05;
+                    ty += dx * 0.05;
+                }
+                // 4. TURBULENCE (Victory)
+                if(State.gesture.includes("VICTORY")) {
+                    tx += (Math.random()-0.5)*2;
+                    ty += (Math.random()-0.5)*2;
+                }
+                // 5. RESET (Shaka)
+                if(State.gesture.includes("SHAKA")) {
+                    tx = (Math.random()-0.5)*50;
+                    ty = (Math.random()-0.5)*50;
                 }
             }
+            // Spring Physics
+            if(!State.gesture.includes("FREEZE")) {
+                const ax = (tx - pos[i3]) * 0.05;
+                const ay = (ty - pos[i3+1]) * 0.05;
+                const az = (tz - pos[i3+2]) * 0.05;
+                vel[i3] += ax; vel[i3+1] += ay; vel[i3+2] += az;
+                vel[i3] *= damping; vel[i3+1] *= damping; vel[i3+2] *= damping;
+                pos[i3] += vel[i3]; pos[i3+1] += vel[i3+1]; pos[i3+2] += vel[i3+2];
+            }
+            // Coloring (Speed based)
+            const speed = Math.abs(vel[i3]) + Math.abs(vel[i3+1]);
+            const hot = Math.min(speed*2, 1);
+            // Trail logic check
+            if(State.gesture.includes("TRAILS")) {
+                col[i3] = 1; col[i3+1] = 1; col[i3+2] = 1; // All white
             } else {
+                col[i3] = rBase + hot;
+                col[i3+1] = gBase + hot;
+                col[i3+2] = bBase + hot;
             }
         }
+        // Auto Rotation
+        if(State.params.autoSpin && !State.gesture.includes("PINKY")) {
+            particles.rotation.y = time * 0.15;
+            particles.rotation.z = Math.sin(time*0.2) * 0.1;
         }
+        // Camera Z-Roll for fun
+        camera.rotation.z = (State.hand.x * -0.02);
+        geo.attributes.position.needsUpdate = true;
+        geo.attributes.color.needsUpdate = true;
         renderer.render(scene, camera);
+        // FPS Counter (approx)
+        document.getElementById('ui-fps').innerText = Math.round(1/dt);
     }
     animate();
+    window.onresize = () => {
+        camera.aspect = window.innerWidth/window.innerHeight;
         camera.updateProjectionMatrix();
         renderer.setSize(window.innerWidth, window.innerHeight);
+    };
 </script>
 </body>
 </html>