How do ASCII art image conversion algorithms work?

splattne picture splattne · Dec 27, 2008 · Viewed 41.9k times · Source

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

joel.neely picture joel.neely · Dec 27, 2008

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.