Cool Ascii Animation using an Image Sprite, Canvas, and Javascript

Egypt Urnash

Oh man that long string of ifs in the number-to-character function makes me weep.

Here is something that will give SLIGHTLY different results but is a TON more succinct:

in the variables section:
var greys = “@@WWWW#*:` “;

replace all those “if (gray > n) character = ‘x’” lines with:
character = greys.charAt(Math.floor(gray/25));

This will give you a SLIGHTLY different balance of : versus ‘. If you were really persnickety you could make the ‘greys’ string 51 characters long, and repeat the characters so that you get the exact same results. Or have a much wider set of characters!

LazerFX

Nice article… this HTML5 stuff is really, really cool.

I didn’t like the way things repeated constantly, so I added a couple of new variables (
var waiting = 0;
var rndWait = Math.floor(Math.random()*11);) at the start, and modified the player function to:

if(current_ml == frame_width*(frames-1)*-1 || waiting < rndWait)
if (waiting < rndWait) {
ascii.style.marginLeft = ’0′;
waiting++;
}
else {
waiting = 0;
rndWait = Math.floor(Math.random()*100);
ascii.style.marginLeft = “0″;
}
else
ascii.style.marginLeft = (current_ml – frame_width) + “px”;

And basically, it generates a random number, gets to the end of the animation loop, sets the animation keyframe back to 0 and waits for that randomly set amount of loops, and then starts again. Other options would be to add a minimum and maximum time to wait, playing random frames, etc… but this was good enough for 5 minutes :D

Sonja

Thanks for sharing, this is really inspiring.

Unfortunately my asci animation always disappeared (in Firefox) after the first loop and did not reset to marginLeft = 0.

I fixed it by changing the operator here:
if(current_ml == frame_width*(frames-1)*-1)
into:
if(current_ml <= frame_width*(frames-1)*-1)

Sonja

less than

Clement

Sweet! I never imagined it was possible to decompose an image (sprite here) into pixels and into characters (never actually looked on how ascii art was done thought).
Thanks for sharing :)