Harry Potter but as Computer Vision - A Nerd's Day Out

Ever wished you could disappear like Harry Potter?

We did too.

So instead of waiting for an owl from Hogwarts, our ABES ACM team opened our laptops and tried building an Invisible Cloak using Python and Computer Vision.

Yes, it actually worked.

And no, it didn't help any of us escape classes (sadly).

In this blog, we'll walk you through the idea behind the project, the Computer Vision concepts that make the effect possible, and how all the pieces come together to create the illusion of invisibility, all without using any real magic.

The Simple Idea Behind the Cloak

The invisibility effect is actually a smart trick.

We don't remove the person.

We simply replace the cloak region with the background, so it looks like the person disappeared.

To do that, the system needs to do four things:

1. Know what the background looks like
2. Detect the cloak based on its color
3. Create a clean mask of that cloak area
4. Replace the cloak region with the background

That's all.

Everything else is polishing the edges.

Step 1: Capturing the Background

Before you step into the frame, the system first needs to know what the "empty scene" looks like.

In Python, this is just a single frame captured from the webcam using OpenCV.

This frame is stored as the reference background.

Later, whenever the system detects your cloak, those pixels are replaced with the background pixels from this saved frame.

This simple trick is what creates the invisibility effect.

Step 2: Detecting the Cloak (Color Masking in HSV)

Since the system has no idea where you are standing, it relies on the unique color of your cloak.

OpenCV converts the video frame from BGR to HSV, because HSV makes color detection far more stable under different lighting conditions.

A specific color range (for example, blue) is defined, and OpenCV creates a binary mask of just those pixels using inRange().

This mask essentially tells the system:

"These pixels belong to the cloak."

This is the most important part, the mask is how the code knows what to remove.

Step 3: Smoothing the Mask (Gaussian Blur + Sobel Filters)

Raw color masks are messy.

Their edges look sharp, jittery, or broken.

To make the invisibility feel smooth and magical, the mask is refined using two common OpenCV techniques:

• Gaussian Blur → softens noise and uneven patches
• Sobel Filters → detects strong edges around the cloak and helps create a clean transition

These steps convert a rough mask into a polished one.

This is where the effect starts looking less like a glitch and more like a cloak.

Step 4: Replacing the Cloak Region with the Background

Once we have a smooth mask, the final step is straightforward:

• Wherever the mask is white → show the background
• Wherever the mask is black → show the live webcam frame

OpenCV blends these pixel values to create the final image.

This pixel-by-pixel replacement is what makes the cloak and part of the person wearing it seem invisible on screen.

Even though you're very much standing there, the camera displays only the background in that region.

Bringing It All Together with Flask

To make the effect run live in a browser, we wrapped the entire pipeline inside a small Flask web application.

Flask:

• starts the webcam
• processes each frame in real time
• applies the invisibility logic
• streams the output back to the browser

This turns the whole thing into a simple interactive webpage like a little "magic mirror" powered by Computer Vision.

The Final Experience

You wear your colored cloak.

You click Capture Background.

You step in front of the camera.

And the system replaces the cloak region with the saved background.

On the screen, the cloak fades away as if it was never there.

The effect feels playful, surprising, and honestly very satisfying, especially when it works smoothly for the first time.

What This Project Teaches

Even though it looks magical, every part of this project uses basic yet powerful CV concepts:

• Color-based segmentation
• HSV masking
• Edge detection with Sobel
• Gaussian smoothing
• Pixel-wise blending
• Real-time video processing
• Integrating OpenCV with Flask

Project Resources

🔗 GitHub Repository: https://github.com/acm-abes/Invisible_cape

🎬 Demo Video: https://drive.google.com/file/d/1KkdLpqZisrfPM4L2_NSYO67v3uAH-lEF/view?usp=sharing

📹 Project Walkthrough: https://drive.google.com/file/d/1QI9gjdyh95HRj-SBpOLu3I3mu_kSX4d4/view?usp=sharing

Projects like these help our team explore real-world Computer Vision techniques in a fun, creative way. We hope this inspires more students to experiment with applied AI and build magical things of their own.