Virtual Painter banner

Virtual Painter

Created by: Khaled Wael
3 devlogs
5h 4m 26s

AI Virtual Painter is a computer vision application that turns your webcam into a canvas. Using Python, OpenCV, and MediaPipe, the project tracks hand landmarks in real-time. It allows users to 'paint' in the air by raising their index finger (Dra…

AI Virtual Painter is a computer vision application that turns your webcam into a canvas. Using Python, OpenCV, and MediaPipe, the project tracks hand landmarks in real-time. It allows users to ‘paint’ in the air by raising their index finger (Drawing Mode) or select colors and tools from a custom UI header by raising two fingers (Selection Mode). It features a smooth drawing engine, multiple colors, and a dedicated eraser mode, all rendered on a transparent digital canvas layered over the live video feed.

This project uses AI

i have used my Favorite LLM for helping in writing README file, and devlogs that present the project in the best way.

Demo Repository

README

Loading README...
Khaled Wael
Khaled Wael worked on Virtual Painter
17 days ago
0h 34m logged

New feature:

  • A slider button that control the font thickness.
  • Supports the Selection mode that makes you control the thickness with your hand gestures in the selection mode.
Attachment
0
Khaled Wael
Khaled Wael worked on Virtual Painter
about 1 month ago
0h 48m logged

What’s new in the lab? 🧪 “Guess who just gave Python a ‘see you later’ and jumped straight into the JavaScript ocean? 🌊 I’ve officially ported the entire project logic to the web!

Honestly, translating the logic to JavaScript felt like trying to explain a movie to someone who speaks a completely different language, but we made it. I built the site using the holy trinity: HTML, CSS, and JS. I went for a ‘Simple but Sexy’ vibe—Navy Blue theme with some Blurry Glow effects because, let’s be real, everything looks 10x more professional when it glows. 😎”

The “Aha!” Moments: 💡

The Mirror Struggle: Finally fixed the ‘move left, go right’ mirror trauma. Now the brush actually follows your hand like a loyal pet. 🐕

Real Erasing: The eraser no longer just paints in black (shhh, don’t tell the Python version); it now actually clears the canvas using some destination-out magic. 🪄

The Glow Up: Added a status text that glows so much it might actually light up my room at night.

Current Mood: 🕺 “If you see me waving my hands at my screen like a crazy person, just know I’m not losing it—I’m just ‘testing the UI.’ Next stop: Hosting this masterpiece on GitHub Pages so the whole world can draw invisible mustaches on themselves!”

Attachment
0
Khaled Wael
Khaled Wael worked on Virtual Painter
about 1 month ago
3h 42m logged

What’s been cooking? 🍳 “I’ve spent the last few hours fighting a war against Python indentations and OpenCV color logic—and guess what? I won! 🏆

I finally nailed the core logic of the project. Now, the webcam actually understands my hand gestures! It can switch between ‘Drawing Mode’ (one finger up) and ‘Selection Mode’ (two fingers up) without having a mental breakdown. I also spent way too much time designing the UI headers—calculating pixel coordinates for each brush and the eraser felt like doing high-school math all over again, but hey, it looks sleek now! (And no, I’m not counting the design time because my ego can’t handle how long I spent picking the right shade of blue 😅).”

Current Status: ✅

Hand tracking? Smooth.

Color switching? Instant.

Eraser? Actually erases.

My sanity? Barely there, but holding on.

What’s next? 🌐 “Moving from the local Python environment to the big world of the web! My next mission is to translate all this Python logic into JavaScript (wish me luck, I’m going in). The goal is to build a full website so you can have a Live Demo right in your browser. No more ‘Run Code’ buttons—just open the link and start painting in the air like a digital Picasso!”

Attachment
0