How It Works

Step 1: Understanding Pixels

Every digital image is made up of tiny colored squares called pixels. Each pixel has a color made from mixing Red, Green, and Blue light (RGB).

Image Pixels (Zoom In)

These 64 pixels could be a tiny part of a photo

Step 2: Measuring Brightness

Each pixel has a brightness level from 0 (black) to 255 (white). We calculate this by looking at how much red, green, and blue light it has.

Brightness Scale

0 (Dark) 128 (Medium) 255 (Bright)

Step 3: Choosing Characters

Different characters look darker or lighter when printed. We use dark characters for dark pixels and light characters for bright pixels.

@ # * + = - : .
← Darker Lighter →

Try it: Move the slider to see which character matches different brightness levels

Dark (0) Brightness: 128 Bright (255)
+

Step 4: Converting Pixel by Pixel

We go through each pixel, check its brightness, and replace it with the matching character. This happens for every single pixel in the image!

🖼️
Image Pixel
RGB: 50,50,50
📊
Calculate
Brightness: 50
@
Choose Char
Dark = @

Step 5: Adding Color (Optional)

We can also keep the original colors! Each character gets colored with the same RGB values as its original pixel.

@
#
*
+
=

Same characters, different colors!

Step 6: The Final Result

When we put all the characters together in rows and columns, they form an ASCII art version of the original image!

Original Image

😊

ASCII Art

Live Camera Mode

In live mode, we do all these steps 30-60 times per second to convert video frames in real-time! Your device processes each frame instantly to create moving ASCII art.

Processing frames...

@

Characters update in real-time