MooTools ASCII Art

By  on  
David Walsh Blog

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.

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.

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
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    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...

Incredible Demos

  • By
    MooTools 1.2 Image Protector: dwProtector

    Image protection is a hot topic on the net these days, and why shouldn't it be? If you spent two hours designing an awesome graphic, would you want it ripped of in matter of seconds? Hell no! That's why I've created an image...

  • By
    jQuery UI DatePicker:  Disable Specified Days

    One project I'm currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI's DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the...

Discussion

  1. Fresh as a fruit salad, hi David.

  2. Hi David, it happens, after turning the image in AsciiArt, we have no more an image, our result is lost, what you think about?
    P.S.
    How can we set the size of the converted image? It seems to me smaller than original.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!