DEV Community: Madhura Ravishan

Painting the Terminal: Building a True-Color ASCII Art Generator in Python

Madhura Ravishan — Sat, 13 Jun 2026 10:53:37 +0000

Painting the Terminal: Building a True-Color ASCII Art Generator in Python

We've all seen ASCII art—those nostalgic, text-based images that hark back to the early days of computing. But usually, they are monochromatic and a bit flat. What if we could bring them into the modern era by injecting true RGB colors directly into the terminal window?

I recently built a Terminal True-Color ASCII Art Generator using Python, and I wanted to share the engineering mindset behind it. In this deep dive, we'll explore the implementation flow, the logic behind mapping pixels to text, and how we can hack the terminal using ANSI escape sequences.

If you are looking for a fun weekend project that touches on image processing, basic math, and terminal rendering, grab a coffee, and let's dive in. ☕

The Tech Stack

To keep things lightweight, I relied mostly on Python's built-in modules alongside one external library for image handling:

Python 3
Pillow (PIL) for image processing
os, sys, time (Built-in)

1. The Math: Fixing the Aspect Ratio

The very first hurdle in converting an image to ASCII is the aspect ratio. Pixels in a digital image are perfectly square (1:1). Terminal characters, however, are not. They are typically about twice as tall as they are wide.

If you map one pixel to one character directly, your resulting ASCII art will look distorted and vertically stretched—like looking in a funhouse mirror.

To fix this, we have to compress the image vertically before we even start converting it. Here is the core logic:

def resize_image(image, new_width=130):
    width, height = image.size
    # Adjusting the ratio by dividing by 2.2 to counter terminal font height
    ratio = height / width / 2.2  
    new_height = int(new_width * ratio)
    return image.resize((new_width, new_height))

By calculating the standard ratio and explicitly dividing it by 2.2 (a magic number that closely matches most default terminal line-heights), we ensure the final output retains the visual proportions of the original photograph.

2. Brightness Mapping: From Pixels to Characters

Once the image is properly sized, we need to convert the visual density of the image into text. The core idea is simple: Darker pixels become dense characters (like @), and lighter pixels become sparse characters (like .).

First, we define our palette, sorted from darkest to lightest:

ASCII_CHARS = ["@", "#", "S", "%", "?", "*", "+", ";", ":", ",", "."]

Next, we loop through every pixel in our resized image. For each pixel, we extract the Red, Green, and Blue (RGB) values and calculate its average brightness:

Brightness = (R + G + B) / 3

This gives us a grayscale value between 0 and 255. We then map this value to an index in our ASCII_CHARS array.

r, g, b = image.getpixel((x, y))
gray = int((r + g + b) / 3)
char = ASCII_CHARS[gray * len(ASCII_CHARS) // 256]

Note: We divide by 256 to ensure our index stays perfectly within the bounds of the array length.

3. The Magic: ANSI Escape Sequences

If we stopped at the previous step, we'd have a perfectly fine grayscale ASCII image. But we promised true color.

Terminals don't process standard HTML/CSS color codes. Instead, modern terminals use ANSI escape codes—special strings of characters that tell the terminal emulator how to format the text that follows.

To print true 24-bit RGB colors in the terminal, the sequence looks like this:
\033[38;2;{r};{g};{b}m

Let's break that down:

\033[ : The escape character that tells the terminal "a formatting command is coming."
38;2; : The specific code telling the terminal we are defining a foreground true-color RGB value.
{r};{g};{b} : Our exact pixel colors injected into the string.
m : The end of the formatting sequence.

We wrap our chosen ASCII character in this sequence, and follow it up with a reset code (\033[0m) so the color doesn't bleed into the next character.

color_char = f"\033[38;2;{r};{g};{b}m{char}\033[0m"

4. The Final Implementation Flow

When we put it all together, the flow is beautifully sequential:

Load the target JPG/PNG using Pillow.
Resize the image, applying our / 2.2 math to correct the vertical stretch.
Iterate through the Y (rows) and X (columns) coordinates of the pixels.
Calculate brightness, select the character, and inject the original pixel's RGB data into an ANSI string.
Print the final string, flushing the standard output for a smooth rendering effect.

💡 Why this matters

It's easy to blindly write code ("vibe coding") without understanding what is happening under the hood. Taking the time to parse out why a terminal stretches text, or how RGB array math translates to a visual palette, makes you a better engineer. It bridges the gap between high-level logic and low-level rendering.

🇱🇰 සිංහල පැහැදිලි කිරීම (Sinhala Explanation)

මෙම ව්‍යාපෘතිය පිටුපස ඇති ඉංජිනේරුමය සංකල්පය (Engineering Mindset) සරලව තේරුම් ගනිමු:

Aspect Ratio ගැටළුව: සාමාන්‍යයෙන් අපි රූපයක් (Image) Terminal එකක මුද්‍රණය කරන්න හැදුවොත් එය දික් වෙලා (vertically stretched) පෙනෙනවා. මීට හේතුව Terminal එකේ අකුරක (character) පළලට වඩා උස වැඩි වීමයි. මෙය නිවැරදි කිරීමට අපි රූපයේ උස 2.2 න් බෙදා Aspect Ratio එක නිවැරදිව සකස් කරගන්නවා.

Pixel එකක් අකුරක් බවට පත් කිරීම: ඉන්පසු සෑම Pixel එකකම RGB අගයන්හි සාමාන්‍යය (R+G+B)/3 ගෙන, අඳුරු ස්ථාන සඳහා @, # වැනි ඝනකම් අකුරුත්, දීප්තිමත් ස්ථාන සඳහා ., , වැනි තුනී අකුරුත් ආදේශ කරනවා.

ANSI කේත මගින් වර්ණ ගැන්වීම: වැදගත්ම කොටස තමයි Terminal එකට සැබෑ වර්ණ (True Colors) ලබා දීම. මේ සඳහා සාමාන්‍ය HTML/CSS වෙනුවට ANSI escape codes (\033[38;2;R;G;Bm) භාවිතා කර, Pixel එකේ සැබෑ වර්ණයම අකුරට ලබා දෙනවා.

නිකම්ම අන්තර්ජාලයෙන් කේතයක් (code) කොපි කරනවාට වඩා, මේ ආකාරයට පසුබිම් තර්කය (underlying logic) සහ ගණිතමය සංකල්ප අවබෝධ කර ගැනීම සාර්ථක මෘදුකාංග ඉංජිනේරුවරයෙකු වීමට ඉතා වැදගත්.

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

Madhura Ravishan — Sat, 13 Jun 2026 06:56:47 +0000

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:

Grabs a single still frame from the webcam.
Wipes the canvas completely clean.
Draws the video frame, then adds a dark semi-transparent rectangle (rgba(0, 0, 0, 0.45)) over it to dim the background.
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 වෙනවා:

video frame එක change වෙලාද කියලා check කරනවා (lastVideoTime)
handLandmarker.detectForVideo() call කරලා current frame එකේ hands detect කරනවා - එකින් each hand එකට landmarks 21ක් (x, y, z) array එකක් එනවා
Canvas clear කරලා, video frame එක flip කරලා (mirror effect - scale(-1,1)) draw කරනවා
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 කෙනෙක් කරන්නේ!

DEV Community: Madhura Ravishan

Painting the Terminal: Building a True-Color ASCII Art Generator in Python

Painting the Terminal: Building a True-Color ASCII Art Generator in Python

The Tech Stack

1. The Math: Fixing the Aspect Ratio

2. Brightness Mapping: From Pixels to Characters

3. The Magic: ANSI Escape Sequences

4. The Final Implementation Flow

💡 Why this matters

🇱🇰 සිංහල පැහැදිලි කිරීම (Sinhala Explanation)

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

1. The Eyes (The Machine Learning Pipeline)

2. The Brain (The Geometry Engine)

3. The Illusion (The Render Loop)

The Takeaway

For My Sri Lankan Tech Community 🇱🇰

1. ඇස් (Machine Learning)

2. මොළය (Geometry)

3. මායාව (Render Loop)

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

🌌 Neon Gesture Bridge - Code Explained (Sinhala)

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

2. Logic & Math (Pinch Detection)

3. Cross-Hand Bridging

4. Generative Rendering (Neon Glow Effect)

Tech Stack

🧩 Code එකේ Implementation Details

Setup (Initialization)

Main Loop - render()

Detection Logic

Pinch Detection

Drawing Functions

🔄 Flow Summary

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

Main Loop - `render()`