beanz Magazine

Create ASCII Art

Windell Oskay on Flickr

It's fun and easy to create ASCII art with your computer keyboard, a text editor, and your imagination. Here are ideas to get started.

Creating artwork with a computer keyboard is called ASCII art. You probably do not know ASCII stands for American Standard Code for Information Interchange. It is a set of characters (letters, numbers, punctuation) originally based on the English alphabet that encodes 128 specified characters: the numbers 0-9, the letters a-z and A-Z, some basic punctuation symbols, and a few other characters. Only 95 of the ASCII characters actually print, however, and they’re all on your computer keyboard.

While ASCII characters are used to transmit, store, and display data, people have found another use for them: create art.

My first encounter with ASCII art was on The Well, an online forum. Someone had created a really beautiful signature file, the bit of text under their name, out of letters, numbers, spaces, and punctuation. It was (and is) amazing to see. Not least because the artwork has at least two levels of perception, the image created and the everyday characters you recognize when you look closely at the image.

There are lots of resources online to help you create your own ASCII art, as well as be inspired by work created by others. You also can cheat and use an online service to generate your artwork. HOWEVER, I assume you’ll want to learn how to create your own projects.

Ideas to Get Started

There are guidelines to follow as you create ASCII artwork:

  • Used a fixed-width (mono-spaced) font like Courier. Proportional fonts make spaces more narrow and fat letters like M and W wider which makes it difficult to create an image with keyboard characters.
  • Use thin letters for light areas where you want lots of white to come through.
  • Use fat letters like M and W for dark areas of your image. Other letters like E, F, R, give you an in-between option for filling in spaces in your artwork.
  • As you create an image, pay attention to the edges of the letter forms. You might find the round edges of J or G or P help define parts of your image, for example, by adding a touch of dark with the rest of the letter area adding white.
  • If you want to add color, first create the image with your keyboard then color individual characters and lines of characters, as needed.
  • There are at least two ways to create ASCII art, character by character as you type left to right then line after line OR create a canvas of empty spaces and lines of these empty spaces then place your cursor to type a character in a precise spot.

You create ASCII art with a text editor, for example, Notepad or Notepad++, with the image you want to copy next to your computer. Or you can use Microsoft Word if you format your picture to wrap behind the text and do not move the object (image) with text. On my version of Word, you right mouse-click on an image and select Format Picture from the popup, then select Layout to set the image to wrap behind text, then click the Advanced button on the Layout area to un-check the Move object with text option.

However, Word can create problems if you do not select a fixed width font like Courier. But it does make it easy to draw with your keyboard and print out your result.

To get you started, here is the simplest possible example of ASCII art, an emoticon:

@}-;-‘—

It’s a rose, if you have not guessed, with the flower on the left and ; and ' as thorns. Creating this emoticon is a great way to start to play with the possibilities of letters, numbers, and punctuation to create images.

Here are a few more easy examples, from the Wikipedia article on ASCII art:

 (\_/)
(='.'=)
(")_(")

and this more complicated example:

  |\_/|
 / @ @ \
( > º < )
 `>>x<<´
 /  O  \

These examples might make you think ASCII art is not real art, or not serious art. However, creating these images does do one thing serious art does, it forces you to see what you create. You might see a rose, a bunny, and a cat. Recreating these images makes you see, for example, the use of \_/ to define the area between the top ears, as well as the use of @ for eyes in one image and ' in the other image.

For me, at least, all art is fun, challenging, and makes me see what I otherwise ignore. ASCII art meets all three criteria.

The projects we'll do recreate art created by others, especially Joan Stark whose work I find very approachable. But there are many other examples. Definitely check out the tutorials section below for Stark's website and others. You WILL get lost for hours, maybe days.

A Simple ASCII Art Project

The first art project is from Daniel Au, whose tutorial is linked at the bottom of this article:

                     __.ii,
                    (__," |
                        | |
                        | |
                        | |
                        | |
                        | |
                        | |------------,
                       /               \\
                       |                |\
                       |,._  |,______\ |||
                       || //'     ||  || |
                       || ((      ||  || |
                       || `\\     ||  || M
                       ||   \\    ||  ||
                      /_|   /_|  /_| /_|

It's a fun image. But it also can be created easily with either a canvas of blank spaces and lines, where you place your cursor to type characters, or by typing spaces and characters line by line.

Here's what Au came up with for the final image with his giraffe:

              O  )    __.ii,           \ | /
       O          )  (__," |%         - (_) -
  O              )       | #%          / | \
                )        | |%
   O          )          | #%
          O )            # |%
        ,~               | |%
-- ~| ~   `O>            | |------------,
    |  ||_</)__         / ###  #####    \\
    | //'/""            |####   """" ### |\
    //                  |,._  |,_###__\ |||     A quick sketch of a
    |                   || //'     ||  || |     tree, bird, and giraffe
D   |                   || ((      ||  || |        by Daniel C. Au (dcau)
 C  |                   ||  \\     ||  || M
  A |                   ||   \\    ||  ||
   U \_,,,,,,,,,,,,,,,,/_|,,,/_|,,/_|,/_|,,,,,,,,,,,,,,

Pretty neat, if you ask me. Notice on the bottom left he has added DCAU to sign his artwork. You can and should do the same for your creations.

A More Complicated ASCII Art Project

This image comes from Joan Stark, apparently the first big artwork she created. You might find it easier to create if you start with a canvas of empty spaces then add characters. Notice the wonderful use of (( and @@ for the fire coming out of the dragon. Her work is extremely clever and resourceful.

~ Fire-Breathing Dragon ~  7/96
                                                          ___
                                                       .~))>>
                                                      .~)>>
                                                    .~))))>>>
                                                  .~))>>             ___
                                                .~))>>)))>>      .-~))>>  
                                              .~)))))>>       .-~))>>)>
                                            .~)))>>))))>>  .-~)>>)>
                        )                 .~))>>))))>>  .-~)))))>>)>
                     ( )@@*)             //)>))))))  .-~))))>>)>
                   )[email protected](@@               //))>>))) .-~))>>)))))>>)>
                 (( @[email protected]).              //))))) .-~)>>)))))>>)>
               ))  )@@*[email protected]@ )          //)>))) //))))))>>))))>>)>
            ((  ((@@@[email protected]@             |/))))) //)))))>>)))>>)>
           )) @@*. )@@ )   (\_(\-\b  |))>)) //)))>>)))))))>>)>
         (( @@@([email protected](@ .    _/`-`  ~|b |>))) //)>>)))))))>>)>
          )* @@@ )@*     (@) (@)  /\b|))) //))))))>>))))>>
        (( @. )@( @ .   _/       /  \b)) //))>>)))))>>>_._
         )@@ (@@*)@@.  (6,   6) / ^  \b)//))))))>>)))>>   ~~-.
      ( @[email protected]@. @@@.*@_ ~^~^~, /\  ^  \b/)>>))))>>      _.     `,
       ((@@ @@@*.(@@ .   \^^^/' (  ^   \b)))>>        .'         `,
        ((@@).*@@ )@ )    `-'   ((   ^  ~)_          /             `,
          (@@. (@@ ).           (((   ^    `\        |               `.
            (*[email protected]*              / ((((        \        \      .         `.
                              /   (((((  \    \    _.-~\     Y,         ;
                             /   / (((((( \    \.-~   _.`" _.-~`,       ;
                            /   /   `(((((()    )    (((((~      `,     ;
                          _/  _/      `"""/   /'                  ;     ;
                      _.-~_.-~           /  /'                _.-~   _.'
                    ((((~~              / /'              _.-~ __.--~
                                       ((((          __.-~ _.-~
                                                   .'   .~~
                                                   :    ,'
                                                   ~~~~~

Final Thoughts

What else would you want to create with your keyboard, a simple text editor, and your imagination?

As you can see, ASCII art projects also feel like puzzles you sit with for hours to piece together on a table. You type characters on your keyboard instead of fish out pieces from a box to match an empty spot in your puzzle.

If you want to share your artwork, the easiest way is to create a screenshot and paste it into an email or save as an image you can send or upload to a web page. Unfortunately, even modern web browsers do not respect mono-spaced fonts needed by ASCII artwork. Microsoft Outlook has not supported mono-spaced fonts since the late 1990s.

If you want to post your image in a web page, as code, you'll need to convert all your spaces to the HTML non-breaking space tag and use the BLOCKQUOTE and PRE tags to preserve your mono-spaced formatting.

Learn More

ASCII

http://en.wikipedia.org/wiki/ASCII

ASCII Art

http://en.wikipedia.org/wiki/ASCII_art
http://www.geocities.com/spunk1111/history.htm

The Lost Ancestors of ASCII Art

Examples from the 1890s of art created with characters.
http://www.theatlantic.com/technology/archive/2014/01/the-lost-ancestors-of-ascii-art/283445/

Joan Shark's ASCII Art Collection

Some clever and amazing examples, plus tutorials and images kids might find fun to recreate.
http://www.geocities.com/spunk1111/

ASCII Art Tutorials

http://www.geocities.com/spunk1111/dcau.htm
http://www.geocities.com/spunk1111/soviatt.htm
http://www.geocities.com/spunk1111/rowtutor.htm
http://www.geocities.com/spunk1111/tutornv.htm
http://www.geocities.com/spunk1111/targontutor.htm
http://www.geocities.com/spunk1111/faq.htm

Artwork Collections

http://www.incredibleart.org/links/ascii.html
http://www.chris.com/ascii/

ASCII Art Newsgroup

https://groups.google.com/forum/#!forum/alt.ascii-art

ASCII Art Generators

Do you really want to cheat?
http://www.network-science.de/ascii/
http://www.glassgiant.com/ascii/
http://picascii.com/

Also In The June 2014 Issue

Codea

Codea is an app designed to make it easy to create games and software. Here are tutorials and links to online resources.

Raspberry Pi Projects

Here's a quick introduction to Raspberry Pi, how to find one, get set up, and then do all sorts of neat projects. With links for each step.

Summer Tech Camps and Local Groups

Summer is a great time to get outdoors, learn technology, and meet people in summer tech camps and local tech groups.

Github Basics

Github is an important tool used by programmers to manage their code projects. Here are Github tutorials with links to learn more.

Create ASCII Art

It's fun and easy to create ASCII art with your computer keyboard, a text editor, and your imagination. Here are ideas to get started.

If you’re not failing 90% of the time, then you’re probably not working on sufficiently challenging problems.

June 2014 Learn More Links

Links from the bottom of all the June/July 2014 articles, collected in one place for you to print, share, or bookmark.

June 2014 News Wire

Interesting stories about computer science, software programming, and technology for the months of June/July 2014.

Robots!

Mindstorms, Sphero, and Robot Turtles engage kids (and families) in playing while also teaching computer science and programming.

Describe an Object, Multiplying Numbers

Computational thinking projects help you to solve problems in ways used to create software, as well as problems in real life.

Count Dots, The Orange Game, Santa’s Dirty Socks

These hands on projects teach computer science concepts without a computer. Plus links to many more projects.