Particle3d_v004

Running

App Files Files Community

JamesToth commited on Dec 4, 2025

Commit

c754822

verified ·

1 Parent(s): 0dbf181

Update index.html

Browse files

Files changed (1) hide show

index.html +165 -373

index.html CHANGED Viewed

@@ -3,487 +3,280 @@
 <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();
@@ -492,7 +285,6 @@
         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 Diagnostic Mode</title>
     <style>
         body {
+            margin: 0; overflow: hidden; background-color: #050505;
             font-family: 'Segoe UI', monospace; user-select: none;
         }
+        /* HUD - Top Left */
         #hud {
             position: absolute; top: 20px; left: 20px;
+            width: 280px; padding: 20px;
+            background: rgba(20, 20, 20, 0.9);
+            border-left: 4px solid #00ff88;
+            border-radius: 4px;
+            color: #fff; z-index: 10;
         }
+        .row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; color: #ccc; }
+        .val { font-weight: bold; color: #fff; }
+        .highlight { color: #00ff88; text-shadow: 0 0 10px rgba(0,255,136,0.5); }
+        #gesture-display {
+            font-size: 20px; text-align: center; margin-top: 15px;
+            padding-top: 15px; border-top: 1px solid #333;
+            color: #666; font-weight: 300;
+        }
+        /* DEBUG VIEW - Bottom Right */
+        #debug-container {
+            position: absolute; bottom: 20px; right: 20px;
+            width: 320px; height: 240px;
+            background: #000;
+            border: 2px solid #333;
+            z-index: 100;
+        }
+        #debug-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: 0.6; }
+        #debug-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(-1); }
+        #debug-label {
+            position: absolute; top: 0; left: 0; background: red; color: white;
+            font-size: 10px; padding: 2px 5px;
         }
+        #loading {
+            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+            color: #00ff88; font-size: 24px; text-transform: uppercase; letter-spacing: 4px;
+            text-shadow: 0 0 20px #00ff88;
         }
     </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/drawing_utils/drawing_utils.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
 </head>
 <body>
+    <div id="loading">Loading AI Engine...</div>
     <div id="hud">
+        <div style="font-size: 10px; color: #888; margin-bottom: 10px;">DIAGNOSTIC MODE</div>
+        <div class="row"><span>HAND TRACKING</span><span id="ui-track" class="val" style="color:red">OFFLINE</span></div>
         <div class="row"><span>SHAPE</span><span id="ui-shape" class="val">GALAXY</span></div>
+        <div class="row"><span>PARTICLES</span><span class="val">12,000</span></div>
+        <div id="gesture-display">WAITING...</div>
     </div>
+    <div id="debug-container">
+        <div id="debug-label">CAMERA FEED</div>
+        <video id="debug-video" playsinline></video>
+        <canvas id="debug-canvas" width="320" height="240"></canvas>
+    </div>
 <script>
+    // --- CONFIG ---
     const CONFIG = {
+        count: 12000,
         camWidth: 640,
+        camHeight: 480
     };
     const State = {
         active: false,
+        hand: { x: 0, y: 0, z: 0 },
         gesture: 'NONE',
+        shapeIdx: 0,
+        lastGestureTime: 0
     };
+    // --- THREE.JS SETUP ---
     const scene = new THREE.Scene();
+    scene.fog = new THREE.FogExp2(0x050505, 0.04);
     const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 100);
     camera.position.z = 10;
+    const renderer = new THREE.WebGLRenderer({ antialias: false });
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
     // 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); // Velocity
     for(let i=0; i<CONFIG.count*3; i++) {
+        pos[i] = (Math.random()-0.5)*30;
         tar[i] = pos[i];
         vel[i] = 0;
     }
     geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+    // Texture
+    const cvs = document.createElement('canvas'); cvs.width=32; cvs.height=32;
+    const ctx = cvs.getContext('2d');
+    const grd = ctx.createRadialGradient(16,16,0,16,16,16);
+    grd.addColorStop(0,'white'); grd.addColorStop(1,'transparent');
+    ctx.fillStyle = grd; ctx.fillRect(0,0,32,32);
+    const tex = new THREE.CanvasTexture(cvs);
     const mat = new THREE.PointsMaterial({
+        size: 0.15, map: tex, color: 0x00ff88,
+        transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, depthWrite: false
     });
     const particles = new THREE.Points(geo, mat);
     scene.add(particles);
+    // --- SHAPES ---
     const Shapes = [
+        (i) => { // Galaxy
+            const r = (i/CONFIG.count)*8; const a = (i/CONFIG.count)*20;
+            return {x: Math.cos(a)*r, y: (Math.random()-0.5), z: Math.sin(a)*r};
+        },
+        (i) => { // Sphere
+            const p = Math.acos(-1+(2*i)/CONFIG.count); const t = Math.sqrt(CONFIG.count*Math.PI)*p;
+            return {x: 4*Math.sin(p)*Math.cos(t), y: 4*Math.sin(p)*Math.sin(t), z: 4*Math.cos(p)};
+        }
     ];
+    function updateTargets() {
+        const func = Shapes[State.shapeIdx];
         for(let i=0; i<CONFIG.count; i++) {
+            const p = func(i);
             tar[i*3] = p.x; tar[i*3+1] = p.y; tar[i*3+2] = p.z;
         }
     }
+    updateTargets();
+    // --- GESTURE LOGIC (RELAXED) ---
+    function detectGesture(lm) {
+        // Tips: 8(Idx), 12(Mid), 16(Rng), 20(Pnk) | PIPs: 6, 10, 14, 18
+        // 0 = Wrist
+        // Helper: Is finger extended? (Tip higher than PIP)
+        const idxUp = lm[8].y < lm[6].y;
+        const midUp = lm[12].y < lm[10].y;
+        const rngUp = lm[16].y < lm[14].y;
+        const pnkUp = lm[20].y < lm[18].y;
+        // Helper: Distance
         const pinchDist = Math.hypot(lm[4].x - lm[8].x, lm[4].y - lm[8].y);
+        const fistDist = Math.hypot(lm[0].x - lm[12].x, lm[0].y - lm[12].y); // Wrist to mid-tip
+        let g = "UNKNOWN";
+        // Logic Tree
+        if (fistDist < 0.25 && !idxUp) g = "FIST (GRAVITY)"; // Relaxed threshold
+        else if (pinchDist < 0.08) g = "PINCH (ZOOM)";
+        else if (idxUp && pnkUp && !midUp) g = "ROCK (TRAILS)";
+        else if (idxUp && midUp && !rngUp) g = "PEACE (CHAOS)";
+        else if (idxUp && !midUp && !pnkUp) g = "INDEX (CURSOR)";
+        else if (!idxUp && !midUp && pnkUp) g = "PINKY (VORTEX)";
+        else if (idxUp && midUp && rngUp && pnkUp) g = "OPEN (SHIELD)";
         return g;
     }
+    // --- MEDIAPIPE SETUP ---
+    const videoElem = document.getElementById('debug-video');
+    const debugCanvas = document.getElementById('debug-canvas');
+    const debugCtx = debugCanvas.getContext('2d');
+    const uiTrack = document.getElementById('ui-track');
+    const uiGesture = document.getElementById('gesture-display');
+    function onResults(results) {
         document.getElementById('loading').style.display = 'none';
+        // Debug Draw
+        debugCtx.save();
+        debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
+        if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
             State.active = true;
+            uiTrack.innerText = "ONLINE";
+            uiTrack.style.color = "#00ff88";
             const lm = results.multiHandLandmarks[0];
+            // DRAW SKELETON (Crucial for Debug)
+            drawConnectors(debugCtx, lm, HAND_CONNECTIONS, {color: '#00ff00', lineWidth: 2});
+            drawLandmarks(debugCtx, lm, {color: '#ff0000', lineWidth: 1, radius: 2});
+            // Map Position
+            const x = (1 - lm[9].x) * 16 - 8;
+            const y = -(lm[9].y - 0.5) * 12;
+            State.hand.x += (x - State.hand.x) * 0.2;
+            State.hand.y += (y - State.hand.y) * 0.2;
+            // Detect
+            const g = detectGesture(lm);
+            if(g !== State.gesture) {
+                State.gesture = g;
+                uiGesture.innerHTML = `<span class="highlight">${g}</span>`;
+                // Swipe Logic
+                if(g === "INDEX (CURSOR)" && Math.abs(x - State.hand.x) > 0.5) {
+                    // Simple logic for swipe
+                }
+            }
         } else {
             State.active = false;
+            uiTrack.innerText = "NO HAND";
+            uiTrack.style.color = "red";
+            uiGesture.innerText = "SHOW HAND";
         }
+        debugCtx.restore();
+    }
+    const hands = new Hands({locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`});
+    hands.setOptions({maxNumHands: 1, minDetectionConfidence: 0.5, minTrackingConfidence: 0.5});
+    hands.onResults(onResults);
     const cam = new Camera(videoElem, {
+        onFrame: async () => { await hands.send({image: videoElem}); },
+        width: 320, height: 240
     });
     cam.start();
+    // --- ANIMATION LOOP ---
     function animate() {
         requestAnimationFrame(animate);
+        // Physics
         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];
             if(State.active) {
                 const dx = pos[i3] - State.hand.x;
                 const dy = pos[i3+1] - State.hand.y;
+                const dist = Math.sqrt(dx*dx + dy*dy);
+                if(State.gesture.includes("FIST") && dist < 10) {
+                    tx -= dx*0.5; ty -= dy*0.5; // Suck
+                } else if(State.gesture.includes("SHIELD") && dist < 6) {
+                    tx += dx*0.5; ty += dy*0.5; // Push
                 }
             }
+            vel[i3] += (tx - pos[i3])*0.05;
+            vel[i3+1] += (ty - pos[i3+1])*0.05;
+            vel[i3+2] += (tz - pos[i3+2])*0.05;
+            vel[i3] *= 0.9; vel[i3+1] *= 0.9; vel[i3+2] *= 0.9;
+            pos[i3] += vel[i3]; pos[i3+1] += vel[i3+1]; pos[i3+2] += vel[i3+2];
         }
         geo.attributes.position.needsUpdate = true;
         renderer.render(scene, camera);
     }
     animate();
         camera.updateProjectionMatrix();
         renderer.setSize(window.innerWidth, window.innerHeight);
     };
 </script>
 </body>
 </html>