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>

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.

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:

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>