‹ All Projects
Project Thread

Balloon Pop Game — Interactive browser game using MediaPipe Hand Tracking for gesture-based gameplay

🐙 View GitHub

Overview

A real-time computer vision game where players pop balloons using their index finger. It features advanced hand landmark tracking to trigger power-ups through specific physical gestures.

Tech Stack

MediaPipe HandsJavaScript (ES6+)HTML5 CanvasWeb Audio API

Features

  • Real-time hand tracking via MediaPipe Hands
  • Gesture-controlled power-ups (Thumbs up to freeze time, Peace sign for 2x points)
  • Shield mode triggered by a closed fist gesture
  • Dynamic object spawning and collision detection on HTML5 Canvas
  • Synthesized sound effects using Web Audio API

Key Decisions

01

Mapped the 21-point hand landmark model to a custom "Interaction Box" within the canvas to normalize coordinate scaling across different screen resolutions.

02

Developed a velocity-based collision algorithm to ensure that "popping" only occurs when the index finger tip moves at a specific speed threshold, preventing accidental triggers.

Learnings

→Mastered the math behind 3D-to-2D projection for mapping webcam-captured hand depth to a flat game environment.
→Optimized requestAnimationFrame performance to maintain a stable 60 FPS while running real-time ML inference in the client browser.
EmailGitHubLinkedInResume