From Pixels to Characters, from Characters to Pixels
or: two new tools, one core principle, and the delightful irony of ASCII art meeting QR codes
Imagine you take a photo - let's say, Alice's cat Mimimi1) - and turn it into a grid of characters. Every pixel becomes a letter. Dark becomes @, bright becomes a space, the midtones land somewhere in between. The result is recognizably Mimimi, but built from characters.
Now flip that around: you type a text - let's say, a URL - and turn it into a grid of black and white squares. Every bit becomes a pixel. The result is a QR code that any smartphone can read.
Image to characters. Characters to image. Those are the two new tools I am adding to my small offline browser toolbox today. The theme is the conversion between media: how do we get from image data to text, and from text to machine-readable image data. Admittedly, the first part is purely a gimmick - ASCII art is not really a thing anymore in an era of high-resolution displays with more colors than we have names for. But fun has to be had.
ASCII Art: Character Set as Brush
ASCII art is old. As old as computers that can display text. In the early days of so-called bulletin boards, Usenet, or the early email era, there was no easy way to send images. So people built images out of characters. Laborious, creative, and with an aesthetic that remains genuinely appealing today. There are even dedicated sub-disciplines: inline ASCII art like @}-`-,-'-- (a rose), and the early emoticons :-) also count as ASCII art. From Japan we know the ASCII shrug ¯\(ツ)/¯ or the (^_^).
The ASCII Art Creator I am releasing as a tool today deals with full-scale images, meaning multi-line ASCII art. The principle is simple: every character has a visual density. @ or # look heavy and dark, . looks light, spaces almost disappear. If you break an image into a grid and replace each grid point with the matching character, a recognizable ASCII rendering emerges. It works best in a monospace font, where every character has the same width.
The Asciifile-Creator does exactly that. You upload an image, choose the width (40, 80, 120 characters or a custom number), the character set, and whether the result should be inverted. Three character sets are available:
| Character set | Characters |
|---|---|
| Dense | @%#*+=-:. |
| Blocks | █▓▒░ |
| Simple | @#. |
For brightness, the tool uses the ITU-R BT.601 luminance formula, an industry standard that describes how the human eye perceives color as brightness. Red, green, and blue are not treated equally: green appears brightest to us, blue darkest. The result is visually much more coherent than a naive average of the three channels.
Output is either plain text for copying and pasting, or colored HTML that wraps the original color of each pixel in <span style="color:…"> tags, enabling colored output. The result can be downloaded directly. And as with all my tools, everything happens in your browser. No data upload to any server, no tracking, no dependency on external scripts or libraries. Everything runs in the browser, offline if you prefer.
QR Codes: Characters as Pixels
Far more practical and frequently requested is the second tool launching today: the QRcode-Generator. A QR code is essentially the same thing, just in reverse. Where ASCII art turns an image into text, here text becomes an image. Characters become pixels. A URL becomes a pattern of black and white squares that a camera can read and decode in milliseconds. This bridges the gap - we see QR codes everywhere today, on billboards, on rental e-scooters, or in restaurants to load the menu on a smartphone. But how do you generate your own QR codes? There are tools on the internet for that. But!
Almost everywhere you are asked to create an account, bombarded with ads, or worse, tracked with tracking pixels. Read my blog post Don't Feed the Kraken on that. All of that for a two-dimensional barcode, an open standard from the nineties. No provider has ever explained to me why I need my email address for that. Why I should pay with my data for something my browser can handle for me.
Features:
- Text, URL or any other string
- Optional logo overlay via drag-and-drop
- Configurable quiet zone
- Invertible - white code on black background
- Download as PNG
And you know the trick: the tool can be downloaded as an offline file and runs without an internet connection.
What Both Have in Common
Pretty obvious really - turn information into a QR code, render that as ASCII art as a cross-stitch pattern on fabric, and hang it on the wall. Or something like that.
Peace out Alexander
1) The image of Alice's cat Mimimi may contain messages hidden via steganography - these will be irretrievably lost when converting to ASCII art.
