Upload folder using huggingface_hub

WaveformVisualizer.js

@@ -15,6 +15,13 @@ uniform vec2 u_resolution;
 uniform vec3 u_color;
 uniform float u_breathe;
 
+// Hand-driven uniforms
+uniform vec2 u_handPos;       // -1 to 1, normalized hand position
+uniform float u_handSpread;   // 0-1 finger spread
+uniform float u_wristAngle;   // -1 to 1
+uniform float u_pitch;        // 0-1 hand height (low=bass, high=treble)
+uniform float u_fingerGlow;   // 0-1 average finger extension
+
 vec2 cmul(vec2 a, vec2 b) {
     return vec2(a.x * b.x - a.y * b.y, a.x * b.y + a.y * b.x);
 }
@@ -46,7 +53,7 @@ vec2 rot(vec2 p, float a) {
 void main() {
     vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution) / min(u_resolution.x, u_resolution.y);
 
-    // Texture breathing: subtle scale pulsation independent of audio
+    // Texture breathing
     uv *= 1.0 + 0.05 * (u_breathe - 0.5);
 
     float breathe = 1.0 + 0.15 * u_amplitude;
@@ -59,14 +66,25 @@ void main() {
         return;
     }
 
-    float rotSpeed = 0.08 + 0.05 * u_amplitude;
+    // === HAND-DRIVEN GEOMETRY WARPING ===
+
+    // Warp the disk toward hand position (Möbius transform)
+    // Hand position pulls the hyperbolic space toward where your hand is
+    vec2 handWarp = u_handPos * 0.35; // scale to stay within Poincaré disk
+    uv = mobius(uv, handWarp);
+
+    // Rotation speed driven by wrist angle + audio
+    float rotSpeed = 0.06 + 0.04 * u_amplitude + u_wristAngle * 0.15;
     uv = rot(uv, u_time * rotSpeed);
 
-    float n = 7.0;
+    // Symmetry: finger spread morphs from 5-fold to 11-fold
+    float n = 5.0 + u_handSpread * 6.0;
     float angleStep = 6.283185 / n;
 
-    float coshR = cos(3.14159265 / 3.0) / sin(3.14159265 / n);
-    float sinhR = sqrt(coshR * coshR - 1.0);
+    // Tiling scale shifts with pitch (hand height)
+    float tileScale = 3.0 - u_pitch * 1.5; // lower hand = larger tiles, higher = finer
+    float coshR = cos(3.14159265 / tileScale) / sin(3.14159265 / n);
+    float sinhR = sqrt(max(coshR * coshR - 1.0, 0.001));
     float tr = sinhR / (coshR + 1.0);
 
     vec2 z = uv;
@@ -89,27 +107,27 @@ void main() {
 
     float d = hdist(z);
 
-    // Color palette: deep purples, teals, magentas — psychedelic but dark
+    // Color palette: psychedelic, hand-tinted
     float t = mod(iter * 0.1 + u_time * 0.02, 1.0);
-    vec3 col1 = vec3(0.03, 0.01, 0.08); // deep purple-black
-    vec3 col2 = vec3(0.02, 0.10, 0.15); // dark teal
-    vec3 col3 = vec3(0.12, 0.02, 0.10); // dark magenta
+    vec3 col1 = vec3(0.03, 0.01, 0.08);
+    vec3 col2 = vec3(0.02, 0.10, 0.15);
+    vec3 col3 = vec3(0.12, 0.02, 0.10);
 
     vec3 color = mix(col1, col2, sin(iter * 0.7 + u_time * 0.1) * 0.5 + 0.5);
     color = mix(color, col3, sin(iter * 1.1 - u_time * 0.15) * 0.5 + 0.5);
 
-    // Breathe-modulated saturation
     float sat = 0.85 + 0.15 * u_breathe;
     color *= sat;
 
-    // Tint toward the hand-gesture color
-    float satBoost = 0.3 + 0.2 * u_amplitude;
-    color = mix(color, u_color * 0.15, satBoost * 0.3);
+    // Tint toward hand-gesture color (stronger when fingers active)
+    float satBoost = 0.3 + 0.3 * u_fingerGlow;
+    color = mix(color, u_color * 0.2, satBoost * 0.4);
 
-    // Edge highlights with glow from amplitude
-    float edgeThreshold = (0.04 - 0.02 * u_amplitude) * (1.0 + 0.3 * u_breathe);
-    float edgeLine = 1.0 - smoothstep(0.0, edgeThreshold, abs(fract(d * 1.5) - 0.5) - 0.45);
-    color += vec3(0.06, 0.08, 0.14) * edgeLine * (1.0 + u_amplitude);
+    // Edge highlights — glow stronger with finger extension
+    float edgeGlow = 0.04 - 0.02 * u_amplitude - 0.01 * u_fingerGlow;
+    float edgeLine = 1.0 - smoothstep(0.0, max(edgeGlow, 0.005), abs(fract(d * 1.5) - 0.5) - 0.45);
+    vec3 edgeColor = vec3(0.08, 0.12, 0.2) * (1.0 + u_fingerGlow * 2.0 + u_amplitude);
+    color += edgeColor * edgeLine;
 
     // Sector pattern
     float ang = atan(z.y, z.x);
@@ -119,13 +137,18 @@ void main() {
     // Audio reactive brightness
     color *= 0.8 + 0.25 * u_amplitude;
 
+    // Hand proximity brightening — geometry glows near your hand
+    float handDist = length(uv - u_handPos * 0.5);
+    float handGlow = 0.15 * u_fingerGlow / (1.0 + handDist * 4.0);
+    color += u_color * handGlow;
+
     // Disk edge fade
     float diskEdge = smoothstep(0.98, 0.92, r);
     color *= diskEdge;
 
     color = min(color, vec3(1.0));
 
-    gl_FragColor = vec4(color, 0.45);
+    gl_FragColor = vec4(color, 0.5);
 }
 `;
 
@@ -143,7 +166,13 @@ export class WaveformVisualizer {
             u_amplitude: { value: 0.0 },
             u_resolution: { value: new THREE.Vector2(canvasWidth, canvasHeight) },
             u_color: { value: this.currentColor },
-            u_breathe: { value: 0 }
+            u_breathe: { value: 0 },
+            // Hand-driven uniforms
+            u_handPos: { value: new THREE.Vector2(0, 0) },
+            u_handSpread: { value: 0 },
+            u_wristAngle: { value: 0 },
+            u_pitch: { value: 0.5 },
+            u_fingerGlow: { value: 0 }
         };
 
         this._createVisualizer();
@@ -169,13 +198,9 @@ export class WaveformVisualizer {
     update() {
         if (!this.analyser || !this.mesh) return;
 
-        // Interpolate color
         this.currentColor.lerp(this.targetColor, 0.05);
-
-        // Update time
         this.uniforms.u_time.value = this.clock.getElapsedTime();
 
-        // Compute RMS amplitude from analyser
         var waveformData = this.analyser.getValue();
         var sum = 0;
         for (var i = 0; i < waveformData.length; i++) {
@@ -185,10 +210,22 @@ export class WaveformVisualizer {
         this.uniforms.u_amplitude.value = amplitude;
         this.lastAmplitude = amplitude;
 
-        var breathe = 0.5 + 0.5 * Math.sin(this.uniforms.u_time.value * 2.094); // ~3 second cycle
+        var breathe = 0.5 + 0.5 * Math.sin(this.uniforms.u_time.value * 2.094);
         this.uniforms.u_breathe.value = breathe;
     }
 
+    // Called from game.js with hand tracking data
+    updateHandData(data) {
+        if (!data) return;
+        if (data.handPos !== undefined) {
+            this.uniforms.u_handPos.value.set(data.handPos.x || 0, data.handPos.y || 0);
+        }
+        if (data.handSpread !== undefined) this.uniforms.u_handSpread.value = data.handSpread;
+        if (data.wristAngle !== undefined) this.uniforms.u_wristAngle.value = data.wristAngle;
+        if (data.pitch !== undefined) this.uniforms.u_pitch.value = data.pitch;
+        if (data.fingerGlow !== undefined) this.uniforms.u_fingerGlow.value = data.fingerGlow;
+    }
+
     updateColor(newColor) {
         this.targetColor.set(newColor);
     }

game.js

@@ -1584,6 +1584,46 @@ export var Game = /*#__PURE__*/ function() {
                     this._updateBeatIndicator();
                     if (this.waveformVisualizer) {
                         this.waveformVisualizer.update();
+                        // Pipe hand data into the hyperbolic geometry
+                        var synthHand = this.hands[0];
+                        if (synthHand && synthHand.landmarks) {
+                            var palm = synthHand.landmarks[9];
+                            // Normalize hand pos to -1..1 (mirrored X)
+                            var hx = -(palm.x * 2 - 1);
+                            var hy = -(palm.y * 2 - 1);
+                            // Compute finger glow (avg distance from palm)
+                            var fglow = 0;
+                            var tipIndices = [8, 12, 16, 20];
+                            for (var ti = 0; ti < tipIndices.length; ti++) {
+                                var tip = synthHand.landmarks[tipIndices[ti]];
+                                var fdx = tip.x - palm.x, fdy = tip.y - palm.y;
+                                fglow += Math.sqrt(fdx*fdx + fdy*fdy);
+                            }
+                            var palmDist = Math.abs(synthHand.landmarks[0].y - palm.y) || 0.05;
+                            fglow = Math.min(1, (fglow / 4) / (palmDist * 2));
+                            // Pitch from Y position (0=bottom, 1=top)
+                            var pitch = 1 - palm.y;
+                            // Hand spread
+                            var tips = [synthHand.landmarks[4], synthHand.landmarks[8], synthHand.landmarks[12], synthHand.landmarks[16], synthHand.landmarks[20]];
+                            var spreadSum = 0;
+                            for (var si = 0; si < tips.length - 1; si++) {
+                                var sdx = tips[si].x - tips[si+1].x, sdy = tips[si].y - tips[si+1].y;
+                                spreadSum += Math.sqrt(sdx*sdx + sdy*sdy);
+                            }
+                            var spread = Math.min(1, (spreadSum / 4) / (palmDist * 2));
+                            // Wrist angle
+                            var wdx = palm.x - synthHand.landmarks[0].x;
+                            var wdy = palm.y - synthHand.landmarks[0].y;
+                            var wAngle = Math.max(-1, Math.min(1, Math.atan2(wdx, -wdy) / (Math.PI / 2)));
+
+                            this.waveformVisualizer.updateHandData({
+                                handPos: { x: hx, y: hy },
+                                handSpread: spread,
+                                wristAngle: wAngle,
+                                pitch: pitch,
+                                fingerGlow: fglow
+                            });
+                        }
                     }
                     if (this.mandalaVisualizer) {
                         var mandalaHands = this.hands.map(function(h) { return h.points3D || null; }).filter(Boolean);