Muhammad Rafi Arsya
Back to All Projects
AI / Computer Vision · 2024

Hand Gesture

Draw on screen with just your finger — a real-time hand gesture drawing app built with Python, MediaPipe, and OpenCV. Switch colors, clear canvas, all hands-free through your webcam.

Python MediaPipe OpenCV Computer Vision Real-Time Machine Learning
Status
Completed
Year
2024
Role
Solo Developer
Language
Python
Type
Computer Vision
Overview

HandGesture is a real-time hand gesture drawing app that lets you draw on screen using just your index finger — no mouse, no stylus, no touch required. Point your finger at the webcam and start painting.

Built entirely in Python, the project combines OpenCV for video capture and canvas rendering with MediaPipe Hands for accurate 21-point hand landmark detection. It can track up to 4 hands simultaneously, and all controls — color switching, start/stop, clear — are triggered purely through on-screen gesture interaction.

The project demonstrates practical human-computer interaction through computer vision, showing how a simple camera feed can replace traditional input devices entirely.

Key Features
Finger Drawing
Draw freely on screen by raising only your index finger. The app tracks your fingertip and draws a continuous line in real time.
Color Switching
Hover your fingertip over on-screen color buttons to instantly switch brush color — choose from Blue, Green, Red, or Pink.
Gesture-Based Controls
All controls are on-screen buttons activated by your fingertip — Start drawing, Stop drawing, and Clear canvas. No keyboard or mouse needed.
Multi-Hand Support
Detects and tracks up to 4 hands at once in the same frame — enabling collaborative or multi-finger drawing.
Real-Time Processing
Processes live webcam feed at 30+ FPS with minimal latency, powered by MediaPipe's optimised landmark model.
How It Works

1. Video Capture — OpenCV opens the default webcam and reads frames in a continuous loop, mirroring the feed so movement feels natural.

2. Preprocessing — Each frame is flipped horizontally and converted from BGR to RGB colour space as required by MediaPipe before processing.

3. Landmark Detection — MediaPipe Hands processes the RGB frame and returns normalised (x, y, z) coordinates for 21 hand keypoints per detected hand — covering every joint from wrist to fingertip.

4. Writing Gesture Check — A rule-based function checks whether only the index finger is raised (tip above MCP knuckle) while other fingers are folded. If true → drawing mode is active for that hand.

5. Canvas Drawing — When in drawing mode, the app draws a line between the current and previous index fingertip position on a persistent canvas layer using OpenCV's drawing functions.

6. Button Interaction — On-screen buttons (Start, Stop, Clear, colour pickers) are fixed regions on the frame. When a fingertip enters a button's bounding box, the corresponding action triggers automatically — no click needed.

7. Overlay & Display — The canvas layer is composited onto the live video frame and displayed in real time. Press Q to quit.

Usage Flow
1
Launch the App
Run python handgesture.py in your terminal. Make sure your webcam is plugged in and the room is well-lit before running.
2
Show Your Hand to the Camera
Hold your hand in front of the webcam. MediaPipe will detect it instantly and overlay the 21 landmark skeleton on screen.
3
Hover Fingertip Over Start
Raise only your index finger and move it to the Start button on screen. Once your fingertip enters the button area, drawing mode activates automatically.
4
Draw with Your Index Finger
Keep only your index finger raised and move your hand around — the app draws a line following your fingertip in real time on the canvas overlay.
5
Switch Colors
Hover your fingertip over the color buttons (Blue, Green, Red, Pink) to instantly change your brush color. No pause in drawing needed.
6
Stop or Clear
Hover over Stop to pause drawing (hand tracking stays active). Hover over Clear to wipe the canvas and start fresh. Press Q to quit the app.
💡
Pro tip: Use a plain, contrasting background behind your hand and make sure your room is well-lit for best detection accuracy.
Controls Reference
Button Action
Start Enable drawing mode — fingertip starts tracing lines
Stop Disable drawing mode — hand tracked but nothing drawn
Clear Wipe the entire canvas clean
Blue Green Red Pink Switch brush color instantly
Q Quit the application
Project Timeline
1
Week 1 · 2024
Research & Setup
Studied MediaPipe documentation, set up Python environment with OpenCV and MediaPipe dependencies.
2
Week 2 · 2024
Landmark Detection
Integrated MediaPipe Hands, validated 21-point detection accuracy across different lighting conditions and skin tones.
3
Week 3 · 2024
Gesture Classifier
Built the rule-based classifier, defined landmark thresholds for each gesture, iteratively tested and refined classification logic.
4
Week 4 · 2024
Overlay & Polish
Added visual overlays, gesture label display, and performance optimisation. Cleaned up the codebase and wrote documentation.
Build Progress
Completed
MediaPipe Integration100%
Finger Drawing Engine100%
Gesture-Based Controls100%
Multi-Hand Support100%
Tech Stack
Python MediaPipe OpenCV NumPy Real-Time CV Landmark Model
By the Numbers
21
Hand Landmarks
30+
FPS Real-Time
4
Colors Available
4
Hands Tracked
Links
GitHub
Demo Video

See it live — HandGesture in action.

The clip below shows the full experience: MediaPipe detecting hand landmarks in real time, the index-finger drawing engine tracing strokes on the canvas overlay, and gesture-based button interactions switching colors and clearing the board — all running at 30+ FPS directly from a webcam feed, with zero external hardware.

Detection
21 hand landmarks tracked per hand, covering every joint from wrist to fingertip.
Performance
Runs at 30+ FPS on a standard laptop webcam with no GPU required.
Input
No mouse, stylus, or touch — just your hand and a webcam is all it takes.
Want to try it yourself?
Clone the repo, install the dependencies, and run python handgesture.py. A webcam and a well-lit room is all you need.
View on GitHub