ASCIImations in CS0

Niche:	CS0 course
Assumes:	Basic HTML and JavaScript familiarity.
Covers:	Interactive Web page design, event-driven programming.

For this assignment, you will design and implement an interactive Web page for entering and playing ASCIImations. An ASCIImation is a movie made up of individual frames, where each frame is a series of text lines containing ASCII-characters. For example, the following sequence of lines represents an ASCIImation with two frames, separated by the divider "=====".

  o  
 /#\ 
 _|_ 
=====
 \o/ 
  #  
_/ \_

When playing an ASCIImation, the individual frames are displayed in sequence, with a short delay in between, to achieve the appearance of motion. When the end is reached, the animation begins again with the first frame. For example, playing the above ASCIImation produces the effect of a stick figure doing jumping jacks.

Your interactive Web page should have a text area where the user can enter the frames of an ASCIImation, and another text area for playing the animation. Buttons should be provided for starting and stopping the animation. A title and your name should appear centered at the top of the page. For example, your page might look like the following:

While you are not expected to fully understand the details at this point, the following JavaScript code suffices for controlling the ASCIImation. Add this code to the HEAD of your page, embedded between SCRIPT tags. Add an ONCLICK attribute to the "Start the animation" button so that it calls the playAnimation function when clicked. Likewise, add an ONCLICK attribute to the "Stop" button so that it calls stopAnimation when clicked.

  function playAnimation() {
    frameStr = document.getElementById("frameArea").value;
    if (frameStr.indexOf("\r\n") != -1) {
      frameSeq = frameStr.split("=====\r\n");
    }
    else {
      frameSeq = frameStr.split("=====\n");
    }
    currentFrame = 0;
    showNextFrame();
  }
  
  function showNextFrame() {
    document.getElementById("displayArea").value = frameSeq[currentFrame];
    currentFrame = (currentFrame+1) % frameSeq.length;
    timer = setTimeout("showNextFrame();", 250);
  }
  
  function stopAnimation() {
    clearTimeout(timer);
  }

As part of this assignment, you must submit an ASCIImation of your own design and construction. A prize will be awarded to the student with the most creative movie.