ASCII-animations

Maybe you would like to really examine that bird as it is singing. You can make the bird start, stop, and go in slow motion with buttons.

Here is a template you can copy and paste into a text document. (Please note that I did not write the JavaScript. I copied the script from an unknown artist's Javascript animation and hope that that person doesn't mind my broadcasting it about.) Many thanks to miK for altering the line endings so that it can be viewed on most platforms. Also thanks go to Shimrod for explaining the buttons.

<html>
<head>
<title>your title here</title>
</head>
<body bgcolor="#fff6e9" text="#660000" link="#3366cc" alink="llizard" 
vlink="#333399" onload="tick()">

<b>bird singing</b> --ejm
<script type="text/javascript" language="javascript">
<!--hide from older browsers
    var agt=navigator.userAgent.toLowerCase();
    if (agt.indexOf("mac") != -1) { var a="\r"; } else { var a="\n"; }
    var max=0;    
function tlist(){ max=tlist.arguments.length;
        for(i=0;i<max;i++) this[i]=tlist.arguments[i];
    }
    tl = new tlist(

"   \<\") "+a,
"   \>\") "+a


    );
    var x=0;
    var repeat=1;
    var stop=0;
    var delay=70;

function tick()
{
        document.f.t.value=" "+a+
        tl[x]+
        "   ( \>\\"+a+   
        "    \" \\\\"+a+
        "       \\  ejm"+a;
        if(repeat==1) {
                if (tl[++x] == null) x=0;
                if (stop==0) setTimeout("tick()",delay);
        }
        else {
                if (tl[++x] != null) {
                  if (stop==0) setTimeout("tick()",delay);
                }
                else
                  x=0;
        }
}

    //--></script>

<form name="f" action="self"><textarea name="t" rows="6" cols="15">
</textarea>

<input type="button" name="display" value="play" onclick="delay=70; 
if(stop==1){stop=0;tick();}">
<input type="button" name="display" value="stop" onclick="stop=1">
<input type="button" name="display" value="slow motion replay" onclick="delay=300; 
if(stop==1){stop=0;tick();}">
</form>

<p><b>to <a href="https://llizardakaejm.wordpress.com/gallery/ascii-animations/">
llizard's Javascript ASCII-animations</a></b></p>

</body>
</html>

Erase the above birds and insert your frames there. Please review the lesson on optimization if you are having trouble inserting your own animations into this template.

You can change the speed of the play and slow motion by changing the numbers after "delay". Your buttons can say whatever you want them to say. Just change the words after "value".


                     \ 
                      \,^^%---
                      <\/  \ See? It's easy when you know how....
                      >
                      >^^
                     /| 
ejm                  | \

I hope these instructions were detailed enough and/or not too detailed and that you can now go nuts making your own animations. Have fun and be forewarned; it's really time consuming.

One final reminder, Javascript animations can only be viewed with Netscape3, Opera 3.2b2 and Microsoft Explorer 4 (or higher) that have the Javascript enabled. When you have made your Javascript ASCII-animation, please tell people about it. Put your animation onto your website and post the URL in the newsgroup alt.ascii-art.animation. Generally, Javascript ASCII-animations have a LOT of text so take up a tremendous amount of room (not to mention the distortion) in the newsgroup. Please do not post your whole animation there.



To first part of animation lesson
To second part of animation lesson
To third part of animation lesson
To fourth part of animation lesson
To fifth part of animation lesson
To sixth part of animation lesson