Update index.html

Author: ToniBloney23

index.html

@@ -459,84 +459,94 @@ <h1>Wall Ball Rep Tracker (Chrome)</h1>
       }
 
       async function detect() {
-          let poses = [];
-          try {
-              // Get video frame data
-              ctx.clearRect(0, 0, canvas.width, canvas.height);
-              ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-              
-              // Get image data to analyze pixels
-              const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-              const data = imageData.data;
+        try {
+          // Get video frame data
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          
+          // Get image data to analyze pixels
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const data = imageData.data;
+          
+          // Track stick
+          let stickX = 0;
+          let stickY = 0;
+          let matchingPixels = 0;
+          
+          // Get selected color
+          const selectedColor = document.getElementById('stick-color').value;
+          
+          // Scan for matching colored pixels
+          for (let i = 0; i < data.length; i += 4) {
+              const r = data[i];
+              const g = data[i + 1];
+              const b = data[i + 2];
 
-              // Track black stick
-              let stickX = 0;
-              let stickY = 0;
-              let blackPixels = 0;
+              let isMatch = false;
+              if (selectedColor === 'black') {
+                  // Check for black pixels (RGB values close to 0)
+                  isMatch = r < 50 && g < 50 && b < 50;
+              } else if (selectedColor === 'white') {
+                  // Check for white pixels (RGB values close to 255)
+                  isMatch = r > 200 && g > 200 && b > 200;
+              }
 
-              // Scan for black pixels (RGB values close to 0)
-              for (let i = 0; i < data.length; i += 4) {
-                  const r = data[i];
-                  const g = data[i + 1];
-                  const b = data[i + 2];
+              if (isMatch) {
+                  const pixelIndex = i / 4;
+                  const x = pixelIndex % canvas.width;
+                  const y = Math.floor(pixelIndex / canvas.width);
 
-                  // Check if pixel is black (allowing some tolerance)
-                  if (r < 50 && g < 50 && b < 50) {
-                      const pixelIndex = i / 4;
-                      const x = pixelIndex % canvas.width;
-                      const y = Math.floor(pixelIndex / canvas.width);
-                      
-                      // Accumulate position for averaging
-                      stickX += x;
-                      stickY += y;
-                      blackPixels++;
-                  }
+                  // Accumulate position for averaging
+                  stickX += x;
+                  stickY += y;
+                  matchingPixels++;
               }
+          }
+          
+          // If we found enough matching pixels, calculate stick position
+          if (matchingPixels > 100) {
+              stickX = Math.round(stickX / matchingPixels);
+              stickY = Math.round(stickY / matchingPixels);
 
-              // If we found enough black pixels, calculate stick position
-              if (blackPixels > 100) {
-                  stickX = Math.round(stickX / blackPixels);
-                  stickY = Math.round(stickY / blackPixels);
-                  
-                  // Draw stick tracking point
-                  ctx.fillStyle = '#00FF00';
-                  ctx.beginPath();
-                  ctx.arc(stickX, stickY, 8, 0, 2 * Math.PI);
-                  ctx.fill();
-                  
-                  // Show stick coordinates
-                  ctx.fillStyle = 'white';
-                  ctx.font = '16px Arial';
-                  ctx.fillText(`Stick: (${stickX}, ${stickY})`, 10, 20);
-                  
-                  // Track rep based on stick movement
-                  const currentTime = Date.now();
-                  const timeSinceLastRep = currentTime - lastRepTime;
-                  
-                  // Ready position: Stick must be high
-                  if (stickY < canvas.height / 3) {
-                      stickStage = 'ready';
-                  }
-                  
-                  // Follow through: Stick must move down with minimum time between reps
-                  if (stickY > canvas.height * 2/3 && 
-                      stickStage === 'ready' && 
-                      timeSinceLastRep > REP_COOLDOWN) {
-                      reps++;
-                      stickStage = 'down';
-                      lastRepTime = currentTime;
-                      document.getElementById('reps').textContent = `Reps: ${reps}`;
-                  }
-                  
-                  // Show current stage
-                  ctx.fillText(`Stage: ${stickStage || 'none'}`, 10, 40);
+              // Draw stick tracking point
+              ctx.fillStyle = '#00FF00';
+              ctx.beginPath();
+              ctx.arc(stickX, stickY, 8, 0, 2 * Math.PI);
+              ctx.fill();
+              
+              // Show stick coordinates and color
+              ctx.fillStyle = 'white';
+              ctx.font = '16px Arial';
+              ctx.fillText(`${selectedColor.charAt(0).toUpperCase() + selectedColor.slice(1)} Stick: (${stickX}, ${stickY})`, 10, 20);
+              
+              // Track rep based on stick movement
+              const currentTime = Date.now();
+              const timeSinceLastRep = currentTime - lastRepTime;
+              
+              // Ready position: Stick must be high
+              if (stickY < canvas.height / 3) {
+                  stickStage = 'ready';
+              }
+              
+              // Follow through: Stick must move down with minimum time between reps
+              if (stickY > canvas.height * 2/3 && 
+                  stickStage === 'ready' && 
+                  timeSinceLastRep > REP_COOLDOWN) {
+                  reps++;
+                  stickStage = 'down';
+                  lastRepTime = currentTime;
+                  document.getElementById('reps').textContent = `Reps: ${reps}`;
               }
 
-          } catch (error) {
-              console.error('Detection error:', error);
+              // Show current stage
+              ctx.fillText(`Stage: ${stickStage || 'none'}`, 10, 40);
           }
 
-          requestAnimationFrame(detect);
+      } catch (error) {
+          console.error('Detection error:', error);
+      }
+      
+      requestAnimationFrame(detect);
       }
 
       // Initialize variables