Demystifying "Vibe Coding": How I Built a Real-Time Neon Gesture Tracker in the Browser

I'm a first-year IT undergrad at the University of Moratuwa, and lately, I've been diving into the world of AI-assisted development (often called "vibe coding"). It's incredibly powerful to prompt an AI and watch it generate a complex application. But there's a trap: if you don't understand the code it generates, you can't debug it, optimize it, or truly call yourself its creator.

Recently, I built Neon Bridge, a real-time web app that tracks my hands through my webcam and draws glowing neon lines connecting my fingertips. It even detects when I "pinch" my fingers together and turns the neon red.

A quick look at the Neon Bridge in action.

It looks like magic, but I wanted to break down exactly how it works under the hood so I (and hopefully you!) can understand the actual computer science behind the visual effects.

Here is how you build a real-time gesture tracker in the browser, broken down into three core concepts: The Eyes, The Brain, and The Illusion.

1. The Eyes (The Machine Learning Pipeline)

Browsers can't inherently "see." To make the app recognize hands, I used Google's MediaPipe. It's a pre-trained machine learning model that analyzes a video frame and outputs an array of 21 specific 3D coordinates (landmarks) for each detected hand.

The biggest challenge? Running a neural network in JavaScript 60 times a second will usually freeze the browser.

The solution in the code is using WebAssembly (Wasm) and explicitly offloading the processing to the device's graphics card:

delegate: "GPU",
runningMode: "VIDEO",

This ensures the heavy tensor operations happen on the GPU, leaving the main JavaScript thread free to keep the UI smooth.

2. The Brain (The Geometry Engine)

How does the app know when I am "pinching"? It doesn't. Machine learning just gives us dots; the rest is pure mathematics.

MediaPipe assigns an index number to every joint. The tip of the thumb is Landmark 4, and the tip of the index finger is Landmark 8. To detect a pinch, the code extracts the X and Y coordinates for those two points and calculates the distance between them using the Pythagorean theorem (Euclidean distance).

JavaScript has a highly optimized function for this:

function thumbIndexDistance(landmarks) {
  const thumb = landmarks[4];
  const index = landmarks[8];
  return Math.hypot(thumb.x - index.x, thumb.y - index.y);
}

If that distance drops below a specific threshold (e.g., 0.06), a boolean flag flips to true, and the app registers a pinch! No complex AI needed for the gesture—just high school geometry.

3. The Illusion (The Render Loop)

The glowing neon effect isn't a continuous video. It's an illusion created using the HTML5 <canvas> API and requestAnimationFrame.

Sixty times a second, the application does this:

1. Grabs a single still frame from the webcam.
2. Wipes the canvas completely clean.
3. Draws the video frame, then adds a dark semi-transparent rectangle (rgba(0, 0, 0, 0.45)) over it to dim the background.
4. Draws the lines connecting the calculated coordinates.

To get that cyberpunk neon glow, I drew every line twice: first as a thick, colored line with a heavy shadowBlur (the glow), and then a thinner, pure white line directly on top of it (the hot core of the neon tube).

The Takeaway

Using AI to prototype is an incredible accelerant. It helped me build the skeleton of this project in a fraction of the time it would normally take. But digging into the code, understanding the Wasm delegation, and tracing the geometry is what actually makes you a better developer.

Don't just vibe code—read the code, break it, and figure out why it works.

🔗 Live Demo: [https://madhuravishan.github.io/Neon-gesture-bridge/]

💻 Source Code: [https://github.com/Madhuravishan/Neon-gesture-bridge]

---

For My Sri Lankan Tech Community 🇱🇰

AI පාවිච්චි කරලා ලොකු ලොකු දේවල් විනාඩි කිහිපයකින් හදන්න පුළුවන් කාලෙක අපි ඉන්නේ (මේකට Vibe Coding කියලත් කියනවා). ඒත් ඒ හැදෙන code එක ඇතුළේ ඇත්තටම මොකද වෙන්නේ කියලා අපි දන්නේ නැත්නම්, අපිට කවදාවත් හොඳ Software Engineer කෙනෙක් වෙන්න බෑ.

මම මෑතකදී හදපු මේ Neon Bridge app එකේ ප්‍රධාන කොටස් 3ක් තියෙනවා:

1. ඇස් (Machine Learning)

අපේ අත් දෙක අඳුරගන්න මම පාවිච්චි කළේ Google MediaPipe කියන AI model එක. මේකෙන් අපේ අතේ තියෙන points 21ක් (landmarks) හරියටම අඳුරගන්නවා. Web browser එකේ AI model එකක් run කරනකොට browser එක හිරවෙන්න පුළුවන් නිසා, මම WebAssembly සහ GPU එක පාවිච්චි කරලා ඒ බර සම්පූර්ණයෙන්ම Graphics Card එකට දුන්නා.

2. මොළය (Geometry)

App එක කොහොමද මම ඇඟිලි දෙක එකතු කරනවා (Pinch කරනවා) කියලා අඳුරගන්නේ? මෙතනදි AI නෙවෙයි, පිරිසිදු ගණිතය තමයි තියෙන්නේ.

මහපට ඇඟිල්ලේ තුඩ (Landmark 4) සහ දබර ඇඟිල්ලේ තුඩ (Landmark 8) අතර තියෙන දුර, පයිතගරස් ප්‍රමේයය (Pythagorean theorem) පාවිච්චි කරලා හොයනවා. JavaScript වල තියෙන Math.hypot function එකෙන් මේක ලේසියෙන්ම කරන්න පුළුවන්. ඒ දුර අඩුවෙනකොට, ඒක Pinch එකක් විදිහට අඳුරගෙන ලස්සන රතු පාට Neon ආලෝකයක් දෙනවා.

3. මායාව (Render Loop)

මේ ලස්සන Neon glow එක හදන්නේ HTML5 <canvas> එකක් පාවිච්චි කරලා. තත්පරේට වාර 60ක් අලුත් රූප අඳිනවා. මේ Neon ආලෝකය ගන්න මම එක line එකක් උඩින් තව line එකක් ඇඳලා shadowBlur පාවිච්චි කළා.

දැන් වැඩිදුර විස්තර කිරීමකට යමු

🌌 Neon Gesture Bridge - Code Explained (Sinhala)

මේ project එක webcam එකෙන් hand tracking කරන web app එකක්. README එකේ තියෙන විස්තරය අනුව, ක්‍රමය මෙහෙමයි:

1. Vision & Mapping (දැකීම සහ Mapping)

Webcam feed එක Google's MediaPipe Hand Landmarker library එකට pass කරනවා. MediaPipe කියන්නේ "eyes" එක වගේ - එක එක hand එකේ 21 landmark points (X, Y, Z coordinates) detect කරනවා. මේක WebAssembly + GPU delegation use කරන නිසා browser එක ඇතුළෙම fast (high-framerate) run වෙනවා.

2. Logic & Math (Pinch Detection)

Landmark 4 (Thumb Tip) සහ Landmark 8 (Index Finger Tip) කියන points දෙක continuously monitor කරනවා. Math.hypot() use කරලා Pythagorean theorem එකෙන් මේ point දෙක අතර pixel distance එක calculate කරනවා. ඒ distance එක threshold එකකට වඩා අඩු වුණොත්, "Pinch" gesture එකක් ලෙස detect කරනවා - UI එකේ "Gesture: PINCH" කියලා පෙන්වනවා, neon colors red වෙනවා.

3. Cross-Hand Bridging

Hands දෙකක් detect උනොත්, corresponding fingertips (thumb-to-thumb, index-to-index, etc.) අතර glowing lines draw කරනවා.

4. Generative Rendering (Neon Glow Effect)

HTML5 Canvas API use කරලා, fingertip points [4, 8, 12, 16, 20] isolate කරලා, multi-layered strokes draw කරනවා shadowBlur සහ shadowColor properties use කරලා - ඒකෙන් neon tube look එක create වෙනවා, dark video background එක උඩින්.

Tech Stack

• Vanilla JavaScript + HTML5 Canvas
• MediaPipe Hand Landmarker (v0.10.14)
• Vite build system

---

🧩 Code එකේ Implementation Details

Setup (Initialization)

• initLandmarker() - MediaPipe CDN එකෙන් HandLandmarker model එක load කරනවා, GPU delegate එක්ක VIDEO mode එකේ run වෙන විදියට configure කරනවා, max hands 2ක්.
• startCamera() - webcam access ගන්නවා (getUserMedia), video element එකට stream කරනවා, canvas size එක video size එකට set කරනවා.
• main() - මේ දෙකම call කරලා, ඉවර උනාම render() loop එක start කරනවා.

Main Loop - render()

මේක requestAnimationFrame එක්ක continuously run වෙනවා:

1. video frame එක change වෙලාද කියලා check කරනවා (lastVideoTime)
2. handLandmarker.detectForVideo() call කරලා current frame එකේ hands detect කරනවා - එකින් each hand එකට landmarks 21ක් (x, y, z) array එකක් එනවා
3. Canvas clear කරලා, video frame එක flip කරලා (mirror effect - scale(-1,1)) draw කරනවා
4. Video උඩින් semi-transparent black overlay එකක් දානවා (rgba(0,0,0,0.45)) - background dark කරන්න, neon glow visible වෙන්න

Detection Logic

• multiHandLandmarks = detect කරපු hands array
• Hand එකක් හරි detect උනොත් status update කරනවා ("1 hand(s) detected" etc.)
• Hand දෙකක්ම detect උනොත් drawCrossHandFingertipLines() call කරනවා (cross-hand bridge lines)

Pinch Detection

• thumbIndexDistance() - landmark 4 (thumb tip) සහ landmark 8 (index tip) අතර Math.hypot(dx, dy) use කරලා normalized distance (0-1 range) calculate කරනවා.
• isPinchGesture() - ඒ distance එක PINCH_THRESHOLD = 0.06ට වඩා අඩුනම් true return කරනවා → pinch detected.

Drawing Functions

• drawFingertipLines(landmarks, isPinch) - එක hand එකේ fingertips 5ම (FINGERTIPS = [4,8,12,16,20]) එකිනෙකට connect කරන neon lines draw කරනවා (nested loop එකෙන් සියලුම combinations). Pinch නම් red color, නැත්නම් cyan/magenta/green palette එකෙන්.
• drawNeonLine() - canvas එකේ shadowBlur + shadowColor use කරලා double-layer line draw කරනවා (thick glow layer + thin white core layer) → neon tube effect.
• drawNeonDot() - fingertip එක උඩින් glowing dot එකක් draw කරනවා.
• drawCrossHandFingertipLines(hand0, hand1) - hands දෙක ඇතුළේ matching fingertip pairs (thumb-thumb, index-index, etc.) connect කරනවා, finger එකකට වෙනම color එකක් (CROSS_HAND_COLORS).
• drawGestureLabel(isPinch) - top center එකේ "Gesture: PINCH" හෝ "Gesture: OPEN" text එක draw කරනවා, glow effect එක්ක.

---

🔄 Flow Summary

Webcam → MediaPipe → 21 landmarks per hand → fingertips extract කරනවා 
→ distance calculate කරලා pinch check 
→ canvas මත video + neon lines/dots draw කරනවා → loop repeat

මේකෙන් ගත යුතු දේ....

AI පාවිච්චි කරලා කේත ලිවීම (Vibe coding) ගොඩක් හොඳ දෙයක්. ඒත් ඒ ලියවෙන කේතය තේරුම් ගන්න එක තමයි අපිව සාර්ථක Developer කෙනෙක් කරන්නේ!