https://vijay.eu/tags/hand-tracking/Recent content in Hand-Tracking on Vijay KodamHugo -- gohugo.ioenSun, 11 Jan 2026 00:00:00 +0300https://vijay.eu/projects/car-concept/Sun, 11 Jan 2026 00:00:00 +0300https://vijay.eu/projects/car-concept/<div class="car-concept-container"> <header class="car-header"> <div class="car-header__content"> <h1 class="car-header__title">Hand-Gesture 3D Car Viewer</h1> <p class="car-header__subtitle"><strong>Uses your camera to detect hand gestures</strong> - Open hand to rotate, make a fist and move to zoom</p> </div> <div class="car-header__status"> <span class="status-badge" id="statusHand">Hand: Not detected</span> <span class="status-badge status-badge--muted" id="statusGesture">Use mouse or enable hand tracking</span> </div> </header> <div class="viewer-container"> <canvas id="threeCanvas"></canvas> <div class="loading-overlay" id="loadingOverlay"> <div class="loading-spinner"></div> <p>Loading 3D model...</p> </div> </div> <div class="webcam-preview" id="webcamPreview"> <div class="webcam-preview__stack"> <video id="webcam" playsinline autoplay muted></video> <canvas id="overlay2d"></canvas> </div> <button class="webcam-btn" id="btnWebcam" type="button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="16" height="16"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" /> </svg> Enable Hand Tracking </button> <div class="webcam-error hidden" id="webcamError"></div> </div> <div class="instructions" id="instructions"> <div class="instructions__item"> <span class="instructions__icon">🖱️</span> <span>Drag to rotate, scroll to zoom</span> </div> <div class="instructions__item"> <span class="instructions__icon">✋</span> <span>Open hand: rotate car</span> </div> <div class="instructions__item"> <span class="instructions__icon">✊</span> <span>Fist + move: zoom in/out</span> </div> </div> </div>https://vijay.eu/projects/cricket-bowling/Sat, 10 Jan 2026 10:00:00 +0300https://vijay.eu/projects/cricket-bowling/<div class="cricket-bowling-container"> <header class="cricket-header"> <div class="brand"> <div class="brand__title">Hand-Gesture Cricket</div> <div class="brand__subtitle"><strong>Uses your camera to detect hand gestures</strong> - Grip, bowl, and hit the wickets with real hand motions!</div> </div> <div class="status" aria-live="polite"> <span class="badge badge--phase" id="statusPhase">Ready</span> <span class="badge" id="statusSpeed">Speed: --</span> <span class="badge" id="statusBallType">--</span> <span class="badge badge--score" id="statusScore">Wickets: 0/0</span> <span class="badge badge--muted" id="statusFps">FPS: --</span> </div> </header> <main class="cricket-layout"> <section class="panel"> <div class="panel__header"> <h2 class="panel__title">Camera</h2> <div class="panel__actions"> <button class="btn btn--primary" id="btnWebcam" type="button">Enable webcam</button> <button class="btn" id="btnOverlay" type="button" aria-pressed="true">Overlay: On</button> </div> </div> <div class="media"> <div class="media__stack"> <video id="webcam" playsinline autoplay muted></video> <canvas id="overlay2d" class="overlay2d" aria-hidden="true"></canvas> </div> <div class="hint" id="gameHint"> <strong>How to play:</strong><br> 1. Show your hand to the camera<br> 2. Make a bowling motion (arm forward/down)<br> 3. Release naturally at the end<br> 4. Try to hit the wickets! </div> <div class="result-display hidden" id="resultDisplay"> <div class="result-icon" id="resultIcon"></div> <div class="result-text" id="resultText"></div> <div class="result-details" id="resultDetails"></div> <div class="result-hint">Show hand to bowl again</div> </div> <div class="error hidden" id="cameraError" role="alert"></div> </div> <div class="game-stats"> <div class="stat-row"> <span class="stat-label">Fast balls:</span> <span class="stat-value" id="statFast">0</span> </div> <div class="stat-row"> <span class="stat-label">Spin balls:</span> <span class="stat-value" id="statSpin">0</span> </div> </div> <div class="debug-panel hidden" id="debugPanel"> <div class="debug-header"> <strong>DEBUG MODE</strong> <div> <button class="btn btn--small" id="btnDebugClear" type="button">Clear Recording</button> <button class="btn btn--small" id="btnDebugClose" type="button">X</button> </div> </div> <pre id="debugOutput" style="font-size: 11px; margin: 0; white-space: pre-wrap;"></pre> </div> <button class="btn btn--small" id="btnDebug" type="button" style="margin-top: 8px;">Show Debug</button> </section> <section class="panel"> <div class="panel__header"> <h2 class="panel__title">3D Scene</h2> <div class="panel__actions"> <button class="btn" id="btnReset" type="button">Reset Game</button> </div> </div> <div class="scene"> <canvas id="threeCanvas"></canvas> </div> <footer class="cricket-footer"> <span class="muted">Tip: Good lighting helps hand tracking. Works best on Chrome/Safari.</span> </footer> </section> </main> </div>