Asciify - Actionscript 3 (as3) Ascii Art class

4 Mar, 2008  BitmapData, actionscript 3, ascii art, classes

There are trends on the web (as in real world) that last days or weeks and there are things that became a classic form of expression of the geek culture and are still interesting to explore after 20+ years.

Ascii Art is one of these things. If you don’t know what ascii art is you’re probably reading the wrong blog, however for the one or two that doesn’t know about it, here you can learn more about it: Ascii art on wikipedia.

I always had in mind the idea to create an actionscript class to render ascii art from pictures and now with as3 this is going to be possible at decent speed.

My class is called Asciify and it can actually “ascii-fy” every DisplayObject instance on the display list.

Usage is very simple and it’s actually REALLY fast.
Didn’t think AVM2 could asciify a video in real time but I was wrong. You cannot go further certain resolutions but if you stay on small videos with decent detail 30fps are guaranteed.

This is the constructor method:

public function Asciify(targetClip:DisplayObject, tformat:TextFormat, pixelSize:Number=8, negative:Boolean=false) {

and this is a sample usage:

var asciifyInstance:Asciify=new Asciify(picture, textFormat, 16);
addChild(asciifyInstance);

Demos & download

See a working demo here:
Asciify class test demo 1
Pictures demo

Another demo applied to a video (see original video here)… this demo uses a glow effect too that make you loose a couple o fps but I couldn’t resist:

Asciify class test demo 2
Video demo

You can offcourse apply it to an animated movieclip or anything else.
In this demos I use ProggyCleanTT font, but you can use any monospaced font that must be imported into the library and have a linkage (in this case I gave it “Font1″ linkage name).
Then just play a little with size, leading and kerning of the textformat to achive the desired effect.

Here is the class:

Asciify class download

Just extract it to [your custom classes folder]/com/oaxoa/fx/

Here is the code for the video demo:

import fl.controls.Button;
import flash.events.Event;
import flash.text.TextFormat;
import flash.filters.GlowFilter;
import fl.controls.CheckBox;
import com.oaxoa.fx.Asciify;
import com.oaxoa.components.FrameRater;
 
var glow:GlowFilter=new GlowFilter(0xffff00);
 
/*******************************************/
 
// setup the TextFormat object to use
var font:Font=new Font1();
var textFormat:TextFormat=new TextFormat();
textFormat.font=font.fontName;
textFormat.size=16;
textFormat.leading=-9;
textFormat.color=0xffff00;
 
// create an istance of the class and add a nice glow filter
var asciifyInstance:Asciify=new Asciify(video, textFormat, 6);
asciifyInstance.y=30;
asciifyInstance.filters=[glow];
addChild(asciifyInstance);
 
// update asciifyInstance at every frame
addEventListener(Event.ENTER_FRAME, onframe);
 
function onframe(event:Event):void {
	asciifyInstance.render();
}
 
/*******************************************/
 
// just add some interface for the demo
// you don't really need stuff below this line
 
var interfaceFormat:TextFormat=new TextFormat();
interfaceFormat.color=0xffffff;
interfaceFormat.size=12;
 
var cb:CheckBox=new CheckBox();
cb.label="Glow active";
cb.y=4;
cb.x=260;
cb.setStyle("textFormat", interfaceFormat);
cb.selected=true;
addChild(cb);
 
cb.addEventListener(Event.CHANGE, oncb);
 
function oncb(event:Event):void {
	cb.selected ? asciifyInstance.filters=[glow] : asciifyInstance.filters=[];
}
 
var button:Button=new Button();
button.label="Copy frame to clipboard";
button.y=4;
button.x=70;
button.width=170;
button.setStyle("textFormat", interfaceFormat);
addChild(button);
 
button.addEventListener(MouseEvent.CLICK, onclick);
 
function onclick(event:MouseEvent):void {
	asciifyInstance.copyContentsToClipboard();
}
 
var fr:FrameRater=new FrameRater(0xffffff);
fr.x=10;
fr.y=4;
addChild(fr);

28 Comments so far »

  1.  

    Fardeen said

    am March 4 2008 @ 11:17 pm

    Great !

  2.  

    Web 2.0 Announcer said

    am March 5 2008 @ 5:18 pm

    Asciify - Actionscript 3 (as3) Ascii Art class…

    […]There are trends on the web (as in real world) that last days or weeks and there are things that became a classic form of expression of the geek culture and are still interesting to explore after 20+ years.[…]…

  3.  

    Mczaicki said

    am March 5 2008 @ 11:05 pm

    Gooooood Job!
    Thanks!

  4.  

    jvc said

    am March 9 2008 @ 7:26 am

    very cool - one question

    is there a reason you create the bitmapdata in the render function instead of the constructor? I would think putting it in the constructor would use less memory.

  5.  

    Pierluigi Pesenti said

    am March 9 2008 @ 10:06 am

    The reason was that I initially wanted the class being able to draw target clips that could change size runtime, like a movieclip, so I needed to recreate the bitmap at every frame.

    Then I realized this was quite unuseful and fixed the target size in the constructor method but forgot to move the bitmap creation code.

    EDIT:
    —————

    There was another reason I forgot… movieclips with transparent background. If you only apply a draw method at every frame on a movieclip containing a bouncing ball or some moving element, the draw method doesn’t draw the trasnparency so what you get is a tail of the moving element. So when you render you have to clean the bitmapdata and have two options:

    - with fillrect (with all the transparency problems and 32 bit colors to manage and sample):

    - or simply recreate the bitmapData (that is better so you don’t need to specify a bg color).
    These problems just applies when you have a movieclip containing moving object with no bg at all.

    However I profiled the memory usage and fps for the first and the second option, and the results are almost identical. A little less memory usage with the second option.

    p.s.: I just reinitialize the _bd var… I don’t create a new bitmapdata var every frame, so it shouldn’t have memory issues.

  6.  

    jvc said

    am March 9 2008 @ 12:05 pm

    yeah, I see your reasoning with the transparency. i just noticed it when I was trying to reuse the bitmapdata in another class to create a thumb window of the video being processed. It would work for the first frame but the reference was lost after that. Moving it to the constructor solved that.

    The other reason I was asking was that I wasn’t sure if reinitializing left the old bitmapdata floating if you didn’t use BitmapData.dispose. Thanks for profiling it

  7.  

    Pierluigi Pesenti said

    am March 9 2008 @ 12:12 pm

    The var _bd is a class variable so the reference to it should be always present in every function.
    For the same reason if you reinitialize it at every frame you are not creating a new bitmapdata, just updating the same one.

  8.  

    jvc said

    am March 9 2008 @ 8:21 pm

    Here is the code I was using to create the thumb. I don’t know if the blog will let me post code in the comments so I linked my URI to a text file if it gets posted incorrectly.

    addEventListener(Event.ENTER_FRAME, onframe);

    // Asciify class is modified so _bd is public
    // this works with _bd created in constructor
    // if _bd is reinitialized in render thumb is unable to update
    //
    var thumb:Bitmap = new Bitmap(asciifyInstance._bd);
    addChild(thumb);
    thumb.width=150;
    thumb.scaleY = thumb.scaleX;

  9.  

    Pierluigi Pesenti said

    am March 10 2008 @ 9:31 am

    Yes I got the point, even if the class was not thought to have a public thumbnail. You have the target clip on the root or where you placed it… you can just create yourself another bitmapdata and use it for the thumb.

    You even know the pixelSize parameter (multiplier) because you pass it to the asciify instance… etc.

    You could be much more free without using the class bitmapdata at the cost of a little extra memory usage.
    You could even do a resizable or filtered thumbnail, which you will never be able to do reusing the internal _bd instance.

    Or you could simply set targetClip.visible=true (which overrides the opposite rule in the asciify class and set targetClip.scaleX=targetClip.scaleY=1/pixelSize to resize it… and you have done the thumb. (even if scaling clips give never as smoother results as using bitmapdatas).

    =)

  10.  

    Ajaxian » Asciify: said

    am March 14 2008 @ 3:33 pm

    […] Asciify is a new library that draws ASCII art for you, so it had “Friday” written all over it: […]

  11.  

    Ajax Girl » Blog Archive » Asciify: ASCII art library said

    am March 14 2008 @ 4:31 pm

    […] Asciify is a new library that draws ASCII art for you, so it had “Friday” written all over it: […]

  12.  

    John Allen said

    am March 14 2008 @ 5:31 pm

    THAT IS PHAT!

  13.  

    Asciify: ASCII art library « outaTiME said

    am March 14 2008 @ 5:32 pm

    […] Asciify is a new library that draws ASCII art for you, so it had “Friday” written all over it: […]

  14.  

    Javascript News » Blog Archive » Asciify: ASCII art library said

    am March 14 2008 @ 5:36 pm

    […] Asciify is a new library that draws ASCII art for you, so it had “Friday” written all over it: […]

  15.  

    Metaholic » Asciify - Actionscript 3 (as3) Ascii Art class - Oaxoa Blog said

    am March 14 2008 @ 5:49 pm

    […] [view original post] [source: Delicious] Previously - More than 100 Free Places to Learn Online - and Counting | Mission to Learn Next - […]

  16.  

    well said

    am March 14 2008 @ 6:34 pm

    the movie doesn’t work for me in Flash 9 on FF2

  17.  

    Asciify - Actionscript 3 (as3) Ascii Art class - Oaxoa Blog said

    am March 14 2008 @ 10:03 pm

    […] rest of the story is right over here Share and Enjoy: These icons link to social bookmarking sites where readers can share and […]

  18.  

    blog.2grafic.com » Blog Archive » Asciify - Clase realizada con AS3. Arte con ASCII said

    am March 15 2008 @ 12:12 am

    […] más en: blog.oaxoa.com […]

  19.  

    AsciifyCam: Real time ASCII webcam « CodeWreck said

    am March 15 2008 @ 12:29 am

    […] The Original Asciify […]

  20.  

    Asciify: Ascii Art class library » D' Technology Weblog: Technology, Blogging, Tips, Tricks, Computer, Hardware, Software, Tutorials, Internet, Web, Gadgets, Fashion, LifeStyle, Entertainment, News and more by Deepak Gupta. said

    am March 15 2008 @ 6:42 am

    […] Asciify […]

  21.  

    Ascii Art…ancora di moda? | HeavyTrader said

    am March 15 2008 @ 7:38 am

    […] Asciify è una nuova libreria javascript che consente di fare disegni in ASCII a dir poco eccezionali. Provate a guardare l’esempo. Sembra essere anche molto semplice da usare. Un altro incredibile tuffo nel passato. […]

  22.  

    Simon said

    am March 16 2008 @ 6:47 pm

    Great idea and implementation. Thumbs up!

    … reminds my of one of my unfinished projects: http://kolchose.org/simon/excelart/

  23.  

    Milan Cole said

    am March 17 2008 @ 6:44 am

    What a fun idea… it used to take hours and hours to make this stuff.

  24.  

    Vyper said

    am March 19 2008 @ 8:09 pm

    This is absolutely brilliant!!! Why has no one done this before!!! Looking at the class, I can see quite a few places where the code could be streamlined but as it is this is great. Keep up the good work!

  25.  

    links for 2008-03-20 « toonz said

    am March 21 2008 @ 12:18 am

    […] Asciify - Actionscript 3 (as3) Ascii Art class - Oaxoa Blog (tags: ascii flash art as3) […]

  26.  

    Milestone 01 - 70+ High-End Components for Web Designers and Developers : DevKick Blog said

    am May 13 2008 @ 9:56 pm

    […] Asciify / Actionscript […]

  27.  

    Zu said

    am June 18 2008 @ 8:21 am

    WOW - real nice! Thanks for sharing the code :D

  28.  

    Eugene said

    am July 9 2008 @ 11:47 am

    Hi

    just wanted you to know that i created ASCII Screensaver based on your idea of representing images in ASCII style.

    http://www.inspirit.ru/exchange/ascii_saver/

    thanx for sharing and keep cool!

Comment RSS · TrackBack URI

Leave a comment

Name: (Required)

eMail: (Required)

Website:

Comment: