CricFreak

We were inspired by the idea of playing cricket without a bat or ball, using just hand gestures. Cricket is a sport we love, and gesture recognition fascinated us — we wanted to combine the two into a fun, interactive game that anyone could play with just a webcam. The goal was to create something novel, social, and hackathon-ready, with real-time interaction that grabs attention instantly.## Inspiration

CricFreak is a gesture-based cricket game:

Players score runs by raising specific finger combinations.

The computer randomly generates a number between 1–6 to simulate the bowler.

If the player’s gesture matches the computer’s number, they are OUT!

Runs are assigned as follows:

Index → 1 run

Index + Middle → 2 runs

Index + Middle + Ring → 3 runs

Index + Middle + Ring + Pinky → 4 runs

Index + Middle + Ring + Pinky + Thumb → 5 runs

Thumb only → 6 runs

The game samples gestures every 3 seconds, updating score and displaying the random number in real-time.

Technologies Used:

ml5.js HandPose for real-time hand keypoint detection

p5.js for drawing, video capture, and game UI

JavaScript for gesture mapping, game logic, and random number generation

Gesture Detection:

Finger tips were compared to MCP joints to detect which fingers were raised.

The thumb’s horizontal movement was handled separately due to its sideways motion.

Game Mechanics & UI:

Score, last run, and computer number are displayed side-by-side.

A 3-second sampling interval ensures gestures are read accurately and prevents multiple runs from being counted in rapid succession.

Challenges we ran into

Detecting Fingers Accurately: Especially tricky for thumb and combination gestures.

Timing Gestures: Without a proper cooldown, the program would register multiple runs per second.

Game Balance: Ensuring random numbers felt fair while keeping gameplay exciting.

UI Layout: Making the webcam feed, score, and random number readable in a single canvas.

Accomplishments that we're proud of

Built a fully playable cricket game using just hand gestures.

Integrated real-time hand tracking with dynamic score updates and random computer numbers.

Created a novel interaction experience — cricket without a bat or ball.

Designed a hackathon-ready demo that is intuitive, interactive, and visually engaging.

What we learned

Real-time gesture recognition and how to map gestures to meaningful actions.

How to design gameplay mechanics that balance randomness and fairness.

UI/UX considerations for live webcam-based games.

Debugging timing and detection issues in continuous frame-based video analysis.

What's next for CricFreak

Multiplayer Mode: Allow players to compete in turns.

Sound Effects: Add auditory feedback for scoring and outs.

Mobile Support: Optimize for mobile devices and touchless gameplay.

Extended Gestures: Introduce more complex gestures for bonus runs or special moves.

Built With

• ml5js
• p5js