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 7, 2019

Interview with a Pornhub Web Developer

Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

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 WalshFebruary 17, 2009

Duplicate the jQuery Homepage Tooltips Using MooTools

The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using MooTools. The XHTML The above XHTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

By David WalshSeptember 26, 2008

Fix Anchor URLs Using MooTools 1.2

The administrative control panel I build for my customers features FCKEditor, a powerful WYSIWYG editor that allows the customer to add links, bold text, create ordered lists, and so on. I provide training and documentation to the customers but many times they simply forget to...