add text labels beside hands

Author: stereoDrift

main.js

@@ -638,6 +638,29 @@ function onResults(results) {
             if (landmarks) {
                 drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS, { color: color, lineWidth: 2 });
                 drawLandmarks(canvasCtx, landmarks, { color: dotColor, lineWidth: 1, radius: 3 });
+                
+                // --- Draw hand function label ---
+                const wrist = landmarks[0]; // Use wrist as reference point
+                const labelText = isLeft ? "Zoom" : "Rotate";
+                
+                // Position label near but slightly offset from the wrist
+                const labelX = wrist.x * canvasElement.width - (isLeft ? -30 : 30);
+                const labelY = wrist.y * canvasElement.height - 25;
+                
+                // Draw text with shadow for better visibility
+                canvasCtx.save(); // Save the current state
+                
+                // Apply counter-transformation to make text readable (flip horizontally)
+                canvasCtx.scale(-1, 1);
+                const flippedX = -labelX; // Negate x position for proper placement after flip
+                
+                canvasCtx.font = "32px 'Courier New', monospace";
+                canvasCtx.fillStyle = "rgba(0, 0, 0, 1.0)"; // Shadow
+                canvasCtx.fillText(labelText, flippedX + 2, labelY + 2);
+                canvasCtx.fillStyle = "white"; // White text
+                canvasCtx.fillText(labelText, flippedX, labelY);
+                
+                canvasCtx.restore(); // Restore the previous state
             }
         }
 
@@ -797,7 +820,7 @@ function setupBloom() {
     // Add the UnrealBloomPass with nice default values for particles
     const bloomPass = new THREE.UnrealBloomPass(
       new THREE.Vector2(window.innerWidth, window.innerHeight), // resolution
-      1.5,    // strength (intensity of the bloom)
+      1.3,    // strength (intensity of the bloom)
       0.1,    // radius (how far the bloom extends)
       0.1,    // threshold (minimum brightness to apply bloom)
     );

styles.css

@@ -37,13 +37,13 @@
 #patternName {
     position: fixed;
     top: 25px;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 25px;
+    /* transform: translateX(-50%); */
     color: white;
     font-family: 'Courier New', Courier, monospace;
-    font-size: 32px;
+    font-size: 30px;
     pointer-events: none;
-    z-index: 100;
+    z-index: 103;
     opacity: 0;
     transition: opacity 0.5s ease;
     text-align: center;
@@ -75,8 +75,8 @@
   position: fixed;
   top: 10px;
   left: 32%;
-  width: 240px; /* Smaller size */
-  height: 135px; /* Maintain 16:9 ratio */
+  width: 256px; /* Smaller size */
+  height: 144px; /* Maintain 16:9 ratio */
   border: 1px solid white;
   z-index: 101; /* Ensure it's above the main canvas slightly */
    transform: scaleX(-1); /* Mirror flip */
@@ -87,8 +87,8 @@
   position: fixed;
   top: 10px;
   left: 32%;
-  width: 240px;
-  height: 135px;
+  width: 256px; /* Smaller size */
+  height: 144px; /* Maintain 16:9 ratio */
   z-index: 102; /* Above video */
   pointer-events: none; /* Allow clicks to go through */
    transform: scaleX(-1); /* Mirror flip to match video */