How do ASCII art image conversion algorithms work?

Question

There are some nice free "image to ASCII art" conversion sites like this one: ASCII-art.org

How does such an image conversion algorithm work?

                         ,                     
                     .   W    ,                
                     W   W    @                
                     W  ,W    W                
                  ,  W, :W*  .W  .             
                  #  WW @WW  WW  #             
                  W  WW.WWW  WW: W             
                  W. WW*WWW# WW@ W             
               * :WW.WWWWWWW@WWW@W  #          
              +* #WW#WWWWWWWWWWWWW# W          
              W# @WWWWWWWWWWWWWWWWW W          
              WW WWWWWWWWWWWWWWWWWW W          
              WW WWWWWWWWWWWWWWWWWW@W#         
             ,WW.WWWWWWWWWWWWWWWWWWWWW         
              WW@WWWWWWWWWWWWWWWWWWWWW         
            : WWWWWWWWWWWWWWWWWWWWWWWW :       
            @ WWWWWWWW@WWWWWWW@@WWWWWW.        
            W*WWWWWW::::@WWW:::::#WWWWW        
            WWWWWW@::   :+*:.   ::@WWWW        
            WWWWW@:*:.::     .,.:.:WWWW        
            @WWWW#:.:::.     .:: #:@WWW        
            :WWW@:#. ::     :WWWW:@WWWW        
             WWW#*:W@*@W     .   W:#WWW        
            #WWWW:@      ::   ::  *WWWW        
            W@WW*W  .::,.::::,:+  @@WW#,       
            WWWW## ,,.: .:::.: .  .WWW:,       
            @WWW@:   W..::::: #.  :WWWW        
             WWWW::  *..:.  ::.,. :WWWW        
             WWWW:: :.:.:   :  :: ,@WW@        
             WWWW:  .:,  :  ,,     :WW,        
             .: #         :  ,     : *         
              W +    .,  :::  .,   : @         
              W ::                .: W         
           @,,,W:.  ,, ::*@*:,  . :@W.,,@      
         +.....*: : : .#WWWWW:  : .#:....+,    
        @...:::*:,, : :WWWWWWW, ,  *::::..,#   
      :...::::::W:,   @W::::*W.   :W:::::...#  
     @@@@@@@@@@@W@@@@@W@@@@@@W@@@@@W@@@@@@@@@@:

Answer 1

aalib is an open source ASCII art library that's used in applications like mplayer. You may want to check out it's source code to see how it does it. Other than that, this page describes in more detail about how such algorithms work.

Answer 2

Also you cant take a look at libcaca which acording to their website has the following improvements over aalib:

• Unicode support
• 2048 available colours (some devices can onlyhandle 16)
• dithering of colour images
• advanced text canvas operations (blitting, rotations)

Answer 3

       ___                  _     _           _                    _
      |_ _| __ __ _____ _ _| |_  | |_ ___    (_)__ ___ ____ _   __| |___
       | |  \ V  V / -_) ' \  _| |  _/ _ \   | / _` \ V / _` |_/ _` / -_)
      |___|  \_/\_/\___|_||_\__|  \__\___/  _/ \__,_|\_/\__,_(_)__,_\___|
                                          |__/

and wasted loads of time...

Answer 4

I found this CodeProject article written by Daniel Fisher containing a simple C# implementation of a image to ASCII art conversion algorithm.

These are the steps the program/library performs:

1. Load the Image stream to a bitmap object
2. Grayscale the bitmap using a Graphics object
3. Loop through the image's pixels (because we don't want one ASCII character per pixel, we take one per 10 x 5)
4. To let every pixel influence the resulting ASCII char, we loop them and calculate the brightness of the amount of the current 10 x 5 block.
5. Finally, append different ASCII characters based for the current block on the calculated amount.

Quite easy, isn't it?

BTW: In the comments to the article I found this cool AJAX implementation: Gaia Ajax ASCII Art Generator:

[...] I felt compelled to demonstrate it could easily be done in a standardized set of web technologies. I set out to see if I could find some libraries to use, and I found Sau Fan Lee's codeproject article about his ASCII fying .NET library.

P.S.: Lucas (see comments) found another CodeProject article.

Answer 5

The big-picture-level concept is simple:

1. Each printable character can be assigned an approximate gray-scale value; the "at" sign @ obviously is visually darker than the "plus" sign +, for example. The effect will vary, depending on the font and spacing actually used.

2. Based on the proportions of the chosen font, group the input image into rectangular pixel blocks with constant width and height (e.g. a rectangle 4 pixels wide and 5 pixels high). Each such block will become one character in the output. (Using the pixel blocks just mentioned, a 240w-x-320h image would become 64 lines of 60 characters.)

3. Compute the average gray-scale value of each pixel block.

4. For each pixel block, select a character whose gray-scale value (from step 1) is a good approximation of the pixel block average (from step 3).

That's the simplest form of the exercise. A more sophisticated version will also take the actual shapes of the characters into account when breaking ties among candidates for a pixel block. For example, a "slash" (/) would be a better choice than a "backward slash" (\) for a pixel block that appears to have a bottom-left-to-upper-right contrast feature.