How do ASCII art image conversion algorithms work? [closed]

StackOverflow https://stackoverflow.com/questions/394882

  •  23-08-2019
  •  | 
  •  

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@@@@@@@@@@:
Was it helpful?

Solution

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.

OTHER TIPS

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

Also you can take a look at libcaca (latest release 2014), 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)

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top