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

By David WalshOctober 9, 2013

5 Awesome New Mozilla Technologies You’ve Never Heard Of

My trip to Mozilla Summit 2013 was incredible. I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out. MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

By David WalshApril 15, 2015

fetch API

One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for. We've done well to create elegant APIs around XHR but we know we can do better. Our effort to...

Incredible Demos

By David WalshJune 14, 2010

Prevent Page Zooming in Mobile Browsers

Ever since I got my iPhone, I've been more agreeable in going places that my fiancee wants to go. It's not because I have any interest in checking out women's shoes, looking at flowers, or that type of stuff -- it's because my iPhone lets...

By David WalshMay 31, 2010

Rotate Elements with CSS Transformations

I've gone on a million rants about the lack of progress with CSS and how I'm happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations...