🚀 Quick Start • ✨ Features • 🎮 Controls • ⚙️ Configuration • 📖 Documentation

---

🔮 What is Air Canvas?

Air Canvas is an innovative computer vision application that transforms your webcam into a touch-free digital drawing tablet. By leveraging the power of MediaPipe for precision hand tracking and Depth-Anything V2 for intelligent depth perception, Air Canvas can distinguish between you hovering your hand over the canvas versus actually touching it — just like a real pen on paper! Whether you're sketching, prototyping, or just having fun, Air Canvas makes digital art accessible without any physical touch.

╔═══════════════════════╗ ║ 🖐️ YOUR HAND ║ ║ ↓ ║ ║ 📷 WEBCAM ║ ║ ↓ ║ ║ 🧠 AI PROCESSING ║ ║ ↓ ║ ║ 🎨 CANVAS ║ ╚═══════════════════════╝

---

✨ Features

Feature	Description
🖐️ AI Hand Tracking	Ultra-responsive finger detection using MediaPipe with Kalman filtering for silky-smooth cursor movement
🧠 Depth Perception	Depth-Anything V2 integration enables hover vs. draw distinction — lift to pause, lower to draw!
✏️ Free Draw	Smooth strokes with Catmull-Rom spline interpolation for natural, flowing lines
📐 Shape Tools	Instant geometric primitives: Lines, Rectangles, and Circles
🧽 Eraser	Multiple eraser sizes for precise corrections
🎨 Dynamic Palette	Real-time color and brush size selection via virtual UI
🔤 OCR Integration	Convert handwritten air-drawings to digital text using Tesseract
📸 Screenshot Export	Save your artwork instantly with a single keystroke
🔧 Live Config Reload	Modify config.yaml and apply changes without restarting

---

🛠️ Tech Stack

flowchart TD
    subgraph Input["📹 Input Layer"]
        A[Webcam Feed]
    end
    
    subgraph Processing["🧠 AI Processing"]
        B[MediaPipe Hands]
        C[Depth-Anything V2]
        D[Kalman Filter]
    end
    
    subgraph Logic["⚡ Application Logic"]
        E[Gesture Detection]
        F[Drawing Engine]
        G[UI Manager]
    end
    
    subgraph Output["🖥️ Output Layer"]
        H[Canvas Window]
        I[Depth Visualization]
        J[Webcam Preview]
    end
    
    A --> B --> D --> E
    A --> C --> E
    E --> F --> H
    E --> G --> J
    C --> I
    
    style Input fill:#4f46e5,color:#fff
    style Processing fill:#7c3aed,color:#fff
    style Logic fill:#a855f7,color:#fff
    style Output fill:#c084fc,color:#fff

Loading

---

🚀 Quick Start

Prerequisites

Important

Make sure you have the following installed before proceeding:

• Python 3.8+ with pip
• CUDA-capable GPU (recommended for depth estimation)
• Webcam connected to your system

Step 1: Clone the Repository

git clone https://github.com/Rcidshacker/Air-canvas-new.git
cd Air-canvas-new

Step 2: Create Virtual Environment

🪟 Windows

python -m venv .depthv2
.\.depthv2\Scripts\activate

🐧 Linux / 🍎 macOS

python3 -m venv .depthv2
source .depthv2/bin/activate

Step 3: Install Dependencies

pip install -r requirements.txt

Step 4: Install Tesseract OCR

📦 Click to expand installation instructions

Platform	Installation Command
Windows	Download from UB-Mannheim/tesseract
Linux	sudo apt-get install tesseract-ocr
macOS	brew install tesseract

[!NOTE] Windows Users: Ensure the path in depthtrack.py (line 18) matches your Tesseract installation path. Default: C:\Program Files\Tesseract-OCR\tesseract.exe

Step 5: Download Model Weights

Caution

This step is mandatory! The depth model weights are too large to include in the repository.

1. Visit the Depth-Anything V2 Repository
2. Download depth_anything_v2_vits.pth
3. Create a model_weights/ folder in the project root
4. Place the .pth file inside:

📦 Air-canvas-new/
 ┗ 📂 model_weights/
   ┗ 📜 depth_anything_v2_vits.pth  ← Place here!

Step 6: Run the Application! 🎉

python depthtrack.py

---

🎮 Controls & Shortcuts

✋ Hand Gestures

Gesture	Visual	Action
Point	☝️	Move cursor (hover mode)
Pinch	🤏	Draw / Select (thumb + index finger close)
Release	✋	Stop drawing (fingers apart)

⌨️ Keyboard Shortcuts

Key	Icon	Function
R	🗑️	Reset — Clear the entire canvas
S	📸	Screenshot — Save current canvas as PNG
O	🔤	OCR — Read text from canvas
U	🔄	Update — Reload config without restart
B / V	☀️	Brightness — Increase / Decrease
C / X	🎚️	Contrast — Increase / Decrease
ESC	❌	Quit — Exit application

---

⚙️ Configuration

Customize every aspect of Air Canvas by editing config.yaml:

# 🖼️ Display Settings
window_width: 1280
window_height: 800

# 🧠 AI Settings
use_depth: true           # Toggle depth estimation
depth_threshold: 0.6      # Sensitivity for "touch" detection
device: 'cuda'            # Use 'cpu' if no GPU available

# 🎨 Drawing Tools
brush_sizes: [5, 10, 15]
eraser_sizes: [20, 40]
colors:
  - [255, 255, 255]       # White
  - [0, 0, 0]             # Black
  - [255, 0, 0]           # Red
  - [0, 255, 0]           # Green
  - [0, 0, 255]           # Blue
  - [255, 255, 0]         # Yellow

# 🎯 Gesture Sensitivity
multi_pinch_threshold: 60
multi_separation_threshold: 50

# 📏 Smoothing (Kalman Filter)
kalman_process_noise: 1e-3
kalman_measurement_noise: 0.1

Tip

Press U while running to reload config changes without restarting the app!

---

📂 Project Structure

📦 Air-canvas-new
 ┣ 📂 model_weights/          # ⚠️ Place depth model here
 ┃  ┗ 📜 depth_anything_v2_vits.pth
 ┣ 📜 depthtrack.py           # 🚀 Main application entry point
 ┣ 📜 config.yaml             # ⚙️ User configuration
 ┣ 📜 requirements.txt        # 📦 Python dependencies
 ┣ 🖼️ cursor.png              # 🎯 UI Cursor asset
 ┣ 🖼️ draw.png                # ✏️ Draw tool icon
 ┣ 🖼️ eraser.png              # 🧽 Eraser tool icon
 ┣ 🖼️ line.png                # 📏 Line tool icon
 ┣ 🖼️ rectangle.png           # ⬛ Rectangle tool icon
 ┣ 🖼️ circle.png              # ⭕ Circle tool icon
 ┗ 📜 README.md               # 📖 This file!

---

📖 Documentation

How It Works

sequenceDiagram
    participant User as 👤 User
    participant Cam as 📷 Webcam
    participant MP as 🤚 MediaPipe
    participant DA as 🧠 Depth-Anything
    participant App as 🎨 Air Canvas
    
    User->>Cam: Wave hand in air
    Cam->>MP: Video frame
    MP->>App: Hand landmarks (21 points)
    Cam->>DA: Same frame
    DA->>App: Depth map
    App->>App: Calculate pinch gesture
    App->>App: Check depth threshold
    alt Pinching + Close to camera
        App->>App: Draw on canvas
    else Not pinching OR far from camera
        App->>App: Move cursor only
    end
    App->>User: Display canvas + UI

Loading

Key Algorithms

Algorithm	Purpose	Benefit
Catmull-Rom Spline	Smooth curve interpolation	Natural, flowing brush strokes
Kalman Filter	Position prediction & smoothing	Reduces hand-tracking jitter
Multi-Distance Pinch	Precise gesture detection	Prevents accidental draws

---

🤝 Contributing

Contributions make the open-source community an amazing place to learn, inspire, and create.
Any contributions you make are greatly appreciated!

1. Fork the project
2. Create your feature branch: git checkout -b feature/AmazingFeature
3. Commit your changes: git commit -m 'Add some AmazingFeature'
4. Push to the branch: git push origin feature/AmazingFeature
5. Open a Pull Request

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

👨‍💻 Author

Ruchit Das

Computer Vision Enthusiast • Creative Developer

---

⭐ Star this repository if you found it helpful! ⭐

Made with ❤️ and lots of ☕