Archives

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.

Demos & download

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.

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.

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

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.

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;

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).

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!

This is very exciting. Thank you for sharing your code. I am a relative newbie to AS3. I’ve spent several nights trying to get Asciify to work for a video clip. Can anyone share a simple .fla and support .as that has this working? Thanks in advance.

Oh got it ! Font MUST be imported from library … This is a great work, but I´m getting a lot of work to “fine tune” my Asciify instance. As an example, my initial images stretches too much in vertical axis, then a have to change the leading of the textformat … I think the code need improvements . but it´s a great job, no doubt

Then remember to lower the leading of the textformat to see the effect correctly. To answer to another previous comment about leading and fine tuning the reason about a missing default leading is that the leading you need for a good effect differs from font to font. And personally I think the cool thing of this class is that you can simply pass whatever TextFormat you want, so the fine tuning is just prepare it.

Ya, actually 6 months ago i found this useful class but not working due to font embedding so i left my comments and didn’t check back after a long time now i want to do some extra stuff other than facebook apps so this is cool class i want to play around, anyway thanx for the answer , cheers !!

Hi same code as 007 in my .as + suggested mod, a movieclip named pics with a few shapes inside it, on my timeline. Font embedded as “font1″ and font specified as courier. Asciify.as in [custom class folder] \com\oaxoa\fx\Asciify.as

Not getting any errors, just see the blocks of the “pics” movieclip. Any ideas? would really like this to work!

my problem is that the outcome ascii image was not pretty like what i had expected (i could not distinguish the outlines of it).the way i see it,it was a mess of ascii characters and not related to the original image..

You are using Arial font which is a proportional font so the “i” is much thinner than the “w”, since you dont know which char Asciify is creating to resemble that pixel you dont know the width. So you have to use a non-proportional or monospaced font as Courier new or Consolas etc. and everything will go ok.