Real-Time ASCII Art Rendering

Transform an input image/frame (human faces included) into printable ASCII characters using a single decision tree.

N. Markus, M. Fratarcangeli, I. S. Pandzic and J. Ahlberg, "Fast Rendering of Image Mosaics and ASCII Art", Computer Graphics Forum, 2015, <dx.doi.org/10.1111/cgf.12597>

Live test on:

Implementation details:

ASCII Camera is now available on Unity Asset Store - assetstore.unity.com/packages/slug/165558.

Input Image

Automatically resized to fit this column

Output ASCII Glyphs

Download full resolution PNG

Output ASCII Text

Fetch as plain text file

````````````````````````````.)-`````````````````
```````````````````````\)`:-)~,`.```````````````
```````````````.....,->^'_\^\/.>'```````````````
```````````````..,-;-~~<\)~,```````````````
```````````````..;"~~~"~-|;>>~>\|```````````````
```````````````.~:::::":-:::~-^~)_,`````````````
```````````````~::::::::::::~~:-^((`````````````
`````````````<((::::::::::::::~:(;(',.``````````
`````````...`|(;::::':::::::::::-~^;/..`````````
`````````...(--:::;;':::::::,::::~|\,..`````````
`````````..;~:::jaMFgawwwqagdgu/:~~~~..`````````
`````````..;:~:jFMFM4ggd4W4FDM&M_::~/..`````````
`````````.`;:::dFW2QbWgZgMFFFQbd4;:~"..`````````
`````````.`~::jFFFbbFdZg&M&4QM&QQ1::~..`````````
`````````.`;::dF4AWWgggZ&FM464bdg&:::..`````````
`````````..:::dM24WQWdZZ552&&MWQgZ:_|..`````````
`````````..:::QgW4WgdgMMM5WFMWdMQ$:_'..`````````
`````````..":_QF!??*MgggMF$M7!?!Q$:~...`````````
`````````..::vMdF4wu__MMMP__jaMQd$:`,..`````````
`````````.w1:?MFTT^7TTQgQPTT??7XZ$:,p_.`````````
`````````.w4:vZb#[~?dLdZMp%s|>#!ZM:_4l.`````````
`````````.Um`_MMdFjjFygMM&yM_jFdZF'?dL.`````````
`````````.T*[_5MMF&4ddQddQgdgbMQZ4;jbI.`````````
`````````.7LFd5MF4M&bQQZFMdF2bMQZ$LLP'.`````````
`````````..T*T$gFMFMFMdZdQFFMb2gZFU*]..`````````
`````````...5jdg&F&MQFddgFFFbF2dZ&a[...`````````
````````````YFdggFMWbd*QM&&44&bd$4F'````````````
````````````~ITgF&bQFMyyydgQW4MQF[^`````````````
``````````````VgMF4FFdQFFWgFFdgg*~``````````````
``````````````~MgggbdQQMMdFMbdQ4*```````````````
```````````````TdMggPT***PTd&dMD(```````````````
```````````````.TgMgMMM*MM$WddF[.```````````````
```````````````.>MggMdMadMMbMFP'.```````````````
```````````````..?MgggggggggFK'..```````````````
```````````````..,?T$ggggggM*:...```````````````
```````````````..""LT*gWgFTLz:...```````````````
```````````````..;,tyywTywyyI:...```````````````
```````````````..~::~7yyyyp!,;",.```````````````
```..........,.;;::;:~?gg!,:;:'~-;,,.........```
```.......,.,-~;;:::;-:t$;::::,:~;~-;.,......```
```.....-;-~:::-:;,:;;;JR;;:::::::::~"::.....```
```...;-~:::::::-~;;;`:TQ~:',::::::::::~-:;..```
```./~:::::::::~:~;;;;',:;;;;;::::::::;;;/~;.```
```-;;;;;:::::::/~;;;;;;;;;;;;:::::~::-;;:;;.```
````;;:;;::::::-:~~~;;;;;;;";;::::::::;;;,;".```
```/;;~;;::::::-:~~~;;;;;;;";;::::::::;;;';;/```
```:;;:;;::::::-:~~~;;;;;;;";;::::::::;;;";;;```

Test on some images!

Rendering is explicitly set to 30 frames per second plus the poor performance of the Javascript memory allocator so expect small lag depending on your CPU/Browser configuration.

Webcam/Camera Stream

Output Stream

How the algorithm works

ASCII art is a related (and older) graphic design technique for producing images from printable characters.

Given an input image or video frame, perform the following steps:

Divide the input image into rectangular grid of equal size. The grid size correspond to the height and width of a single tile (i.e. font glyph) obtained form the codebook used during the training phase.
For each cell, a font glyph is selected from the codebook to replace the raw pixels in this cell. The glyph is obtained by feeding the raw pixels into a decision tree where the output of the tree is the index of the target tile in the codebook.
The tree is learned by first converting a large set of images to ASCII art with SSIM index and then using the obtained data as a training set.

You are invited to take a look at the original paper for a detailed overview of the whole process: