Please Reload

Javascript Animation

This is a Javascript script that will animate ASCII art. ASCII is an art form that is done with your keyboard. First you draw a picture and decide how you want to animate it. On each frame you change the image to create the animation effect. The only thing you will need to change in this script is the actual animation frames. Each frame will appear something like this.

"\n"+
"\\0/\n"+
"   |\n"+
"  / \\\n",

To break down those four lines of script:

"\n"+

This starts a new frame.

"\\0/\n"+

This is the first line showing the arms and head of the stick figure. The quotes start and end the line. One rule for using the character \ is that whenever you want it to print to the screen you must use 2, \\, because one \ is a javascript specific code which tells the program something else. So \\0/ Will print out as \0/. The ending, \n"+ belongs at the end of each line. The \n is a line break in javascript...similar to <br> in HTML. The end quote ends the line and the plus sign joins it to the next line.

" |\n"+

This shows the body of the stick man. The spaces before the | are there to line it up under the head. You may have to play with lining things up, because some characters take up more space than other characters, so extra spacing may be needed in some cases. This is easier to do if you build your animation a couple of frames at a time.

" / \\\n",

This is the last line showing the legs. Again a double \\ is used to show the left leg. The comma at the end of the line ends the frame of the animation. The next frame starts just as this frame did. The very last frame omits the comma.

\0/
|
/ \

This is the output of that script.

And that is basically all there is to it. You can print out this page to use as a grid guide for drawing your figures. Put a character over each vertical line, but remember, depending on the character, you may need to alter your spacing in the finished product.

The next options you can manipulate are how you want to display the animation on your page. It has to appear in a textbox. However you can change the background and text colors of the textbox. You can also make the textbox invisible so that it does not appear. Put it inside a table with a gradient background, such as the example on this page. Put an image tile in the table. Or if you don't want a tiled image, but a static one, you can use css to position the textbox over the image on your page. Here are samples for each. Source the page for the scripts.

Colored Textbox

CSS Image

LingoLinda.com