This project transforms your webcam into an interactive drawing canvas, allowing you to create digital art using intuitive hand gestures. Powered by MediaPipe for real-time hand tracking and OpenCV for video processing, it offers a unique and engaging way to interact with a virtual drawing board — no mouse or touchscreen needed!
I used sign_mnist_test.csv and sign_mnist_train.csv, You can easily download the data from Kaggle.
- Hand Gesture Control: Use your hand to control a virtual cursor.
- Pinch-to-Draw: Start drawing by bringing your thumb and index finger together (pinch gesture).
- Real-time Tracking: Hand landmarks and cursor update live on the webcam feed.
- Adjustable Drawing: (Fixed color and thickness in current version – easily customizable).
- Clear Canvas: Press
cto erase everything on the board. - Mirror Effect: Webcam is flipped horizontally for natural movement.
| Technology | Description |
|---|---|
| Python | Programming language |
OpenCV (cv2) |
Webcam access, image processing |
| MediaPipe | Real-time hand tracking |
| NumPy | Efficient image/numerical data operations |
- Python 3.9, 3.10, or 3.11
- A working webcam
- OS: Windows / macOS / Linux
⚠️ Python 3.13 is not fully supported by MediaPipe/TensorFlow yet.
git clone <your-github-repo-url>
cd <your-project-folder>It's highly recommended to use a virtual environment to manage project dependencies and avoid conflicts with other Python projects.
python -m venv venv_drawing_board `On Windows (Command Prompt/PowerShell):
.\venv_drawing_board\Scripts\activate `On macOS/Linux (Bash/Zsh):
source venv_drawing_board/bin/activate `✅ Your terminal prompt should now show (venv_drawing_board) indicating the environment is active.
With your virtual environment activated, install the required libraries:
pip install opencv-python mediapipe numpy `Ensure your virtual environment is activated (as shown in the "Setup and Installation" section).
Navigate to your project directory in the terminal and run the script:
python drawing_board.py `Once the application starts, a new window titled "Virtual Drawing Board" will appear, displaying your live webcam feed.
-
Position your hand clearly in front of the webcam.
-
The tip of your index finger will act as the virtual cursor.
-
Move your hand to move the cursor around the screen.
-
When you are not drawing, the cursor will appear as a white circle.
-
To start drawing, bring your thumb and index finger together in a pinch gesture.
-
The cursor will change to a red circle (or your chosen drawing_color if modified in code), indicating you are in drawing mode.
-
As you move your hand while pinching, a line will be drawn on the canvas.
-
Release the pinch gesture (separate your thumb and index finger).
-
The cursor will revert to white, and you can move your hand without drawing.
- Press the c key on your keyboard to clear all drawings from the board.
- Press the q key on your keyboard to close the application window.
-
Color Picker: Implement keyboard controls or on-screen UI to change the drawing color in real-time.
-
Thickness Adjustment: Add controls to change the line thickness.
-
Eraser Tool: Implement a specific gesture or key to switch to an eraser mode.
-
Shape Drawing: Add gestures to draw basic shapes (circles, squares).
-
Save Drawing: Functionality to save the created drawing as an image file.
-
Multi-Hand Support: Extend to use two hands for more complex interactions (e.g., one hand for drawing, one for controls).
Screenshot:
Make sure your image is saved at images/screenshot.png inside your project directory.
This project is open-source and available under the MIT License.