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 WalshJune 2, 2015

7 Essential JavaScript Functions

I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...

Incredible Demos

By David WalshAugust 28, 2008

PHP IMDB Scraper

It's been quite a while since I've written a PHP grabber and the itch finally got to me. This time the victim is the International Movie Database, otherwise known as IMDB. IMDB has info on every movie ever made (or so it seems). Their...

By David WalshJanuary 14, 2015

CSS Vertical Center with Flexbox

I'm 31 years old and feel like I've been in the web development game for centuries. We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior. Whether it turns out that way remains to be seen but flexbox does easily...