ASCII-animations

This is the third part to this lesson in Javascript ASCII-animation: how to place more than one animation on one page. So far I only know that this multiple animations on one page aspect works for MSIE 4 and Netscape Navigator 3.04, but I'm assuming that it will work for anyone who can view JavaScript ASCII-animations.

Many thanks to CJRandall for writing the JavaScript code and miK for altering the line endings so that it can be viewed on most platforms.

I have just been doing some reading about JavaScript. Apparently some bozos have decided that <script language="JavaScript"> is deprecated. They prefer script type="text/javascript" language="javascript"> now. I have altered the template to reflect that change.

You'll see that while this bears similarities to the basic template, it is rather different.

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

<script type="text/javascript"  language="javascript">
<!--// ::: main ::: there's no real reason for the scripts to be separate

    var agt=navigator.userAgent.toLowerCase();
    if (agt.indexOf("mac") != -1) { var a="\r"; } else { var a="\n"; }
function animation()
{
        tick_1();
        tick_2();
}

//--></script>

<p><b>animation #1 title</b></p>

<script type="text/javascript"> 
<!--// ::: anim one ::: there's no real reason for the scripts to be separate
    var max_1=0;  // this is frame_max
    var x_1=0;    // this is frame_counter

    function tick_1()
    {
        document.form_1.text_1.value="1st line (that remains identical)"+a+
        tl_1[x_1]+
        " 3rd line (that remains identical)"+a+
        " 4th line (that remains identical)"+a+
        " 5th line (that remains identical)"+a;

        x_1++; if ( x_1 == max_1 ) x_1=0;

        //if(confirm('continue?'))
            setTimeout("tick_1()",70);
    }

    function tlist_1()
    {
        max_1=tlist_1.arguments.length;
        for (i=0; i < max_1; i++)  this[i]=tlist_1.arguments[i];
    }

    tl_1 = new tlist_1(

" 2nd line"+a,

" 2nd line"+a;

);

//--></script>

<form name="form_1" action="self"><textarea name="text_1" rows="6" cols="15">
</textarea></form>

<p><b>animation #2 title</b></p>

<script type="text/javascript" language="javascript">
<!--// ::: anim two ::: there's no real reason for the scripts to be separate
    var max_2=0;
    var x_2=0;

    function tick_2()
    {
        document.form_2.text_2.value=tl_2[x_2]+
        "4th line (that remains identical)"+a+
        "5th line (that remains identical)"+a+
        "6th line (that remains identical)"+a+
        "7th line (that remains identical)"+a;

        x_2++; if ( x_2 == max_2 ) x_2=0;

        //if(confirm('continue?'))
            setTimeout("tick_2()",250);
    }

    function tlist_2()
    {
        max_2=tlist_2.arguments.length;
        for (i=0; i < max_2; i++)  this[i]=tlist_2.arguments[i];
    }

    tl_2 = new tlist_2(

" 1st line"+a+
" 2nd line"+a+
" 3rd line"+a,

" 1st line"+a+
" 2nd line"+a+
" 3rd line"+a,

" 1st line"+a+
" 2nd line"+a+
" 3rd line"+a

    );

//--></script>

<form name="form_2" action="self"><textarea name="text_2" rows="8" cols="27">
</textarea></form>

<p>Many thanks to <a href="http://www.shieldwolf.demon.co.uk/art-glry.htm#ascii-anim"
target="_top">CJRandall</a> for writing the Javascript code and miK for altering the
line endings so that it can be viewed on most platforms.</p>

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

</body>
</html>

As you can see, you could continue on with a third, fourth, fifth, etc, etc. animation, if you wanted.

Please review the lesson on optimization if you are having trouble inserting your own animations into this template.

You may not want your animation to loop incessantly. Please go to Part 4 of my Javascript ASCII-animation lesson.


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

Oh, yes, and remember, 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 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