MooTools ASCII Art

By David Walsh on January 3, 2011

I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create. ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous; ASCII art is good for a few giggles but that seems to be it. A new MooTools class has hit the Forge: MooAsciiArt. Let's have some fun by turning images and DOM nodes into glorious, character-driven ASCII art.

View Demo

Sample HTML

To illustrate how awesome this MooTools resource is, let's set up both an H2 tag and IMG tag to convert to beautiful ASCII art:

<h2>David Walsh Blog</h2>
<img src="/wp-content/themes/2k11/images/homeLogo.png" id="logoImage" alt="David Walsh Blog" />

These basic elements will be converted to glorious ASCII art! The anticipation should be viagra to your geeky mind!

The MooTools JavaScript

There are two ways to use MooAsciiArt: images or basic DOM nodes. Using MooAsciiArt on images is simple; simply use the toAsciiArt method to convert your image to ASCII art:

document.id("logoImage").toAsciiArt(true);

You may also use MooAsciiArt's convertTags method to convert DOM nodes to ASCII art:

MooAsciiArt.fontPath = "MooAsciiArt/Demo/fonts/"
MooAsciiArt.convertTags({ h2:"Doom" });

The string that accompanies the tag name is the "flf" font file which represents the character representation for every letter. The following is a snippet of the "Doom.flf" file:

       @@
 ______@
|___  /@
  $/ / @
  / /  @
./ /___@
\_____/@
       @
       @@
 ___ @
|  _|@
| |  @
| |  @
| |  @
| |_ @
|___|@
     @@
__     @
\ \    @
 \ \   @
  \ \  @
   \ \ @
    \_\@
       @
       @@
 ___ @
|_  |@
  | |@
  | |@
  | |@
 _| |@
|___|@
     @@
 /\ @
|/\|@
  $ @
  $ @
  $ @
  $ @
    @
    @@
        @
        @
        @
        @
        @
    $   @
 ______ @
|______|@@
 _ @
( )@
 \|@
 $ @
 $ @
 $ @
   @
   @@
       @
       @
  __ _ @
 / _` |@
| (_| |@
 \__,_|@
       @
       @@
 _     @
| |    @
| |__  @
| '_ \ @
| |_) |@
|_.__/ @
       @
       @@

The FLF file allows you to create your own font formats, so creating your own fonts can be super easy.

View Demo

You could be the next great artist. The next ~~Picasa~~ Webcasso. In all seriousness, ASCII art is pretty fucking cool. It's our way to rebel against the hippie artists that don't understand that our code is art. If you like ASCII art like I do, you'll love this awesome MooTools class.

Recent Features

Create Namespaced Classes with MooTools

MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event,...

9 Mind-Blowing WebGL Demos

As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...

Incredible Demos

Sexy Album Art with MooTools or jQuery

The way that album information displays is usually insanely boring. Music is supposed to be fun and moving, right? Luckily MooTools and jQuery allow us to communicate that creativity on the web. The XHTML A few structure DIVs and the album information. The CSS The CSS...

CSS Circles

A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape...