Follow the Bouncing Ball: A Web Animation Project

Objective

The goal of this project is to investigate the effects of timing interval and step size on perceived animation smoothness. You will write a simple JavaScript program that will move an object around on a Web page. This project will help you create more advanced Web pages that could have any type of animation.

Introduction

This is an example of a first-time programming project. You will be writing a basic animation program that will move an object around on your computer screen, on a Web page in your browser window. The project uses JavaScript, an interpreted programming language supported by most Web browsers. You will learn how to write an HTML file containing your program, and how to load and run the file in your browser. You'll also learn how to control the motion of the object, and you will experiment with different settings to see the effect on apparent smoothness of the motion.

Preliminaries

These are things you need to know before you get started.

You'll need to write your file with a text editor, which is a program that can save plain text files. The "Notepad" program that comes with Windows will do just fine. You should not use a word processing program (e.g., Word), because word processors do not save files as plain text by default.
JavaScript is a programming language for web pages, so the HTML file you will be writing is like a simple web page. Here is the basic format of an HTML file:
[Title and JavaScript functions go here.] [The parts you want to appear on the page go here.]
HTML uses tags to designate various parts of the document. Tags are enclosed by the characters "<" (less-than sign) and ">" (greater-than sign). The first line is a comment, enclosed by "". Comments in an HTML file are ignored by the browser, so you can use them as notes to yourself. They can help you remember what the different parts of your program are supposed to do. You need the tag "" at the beginning. The document has two sections, a HEAD section, which contains general information about the document, and a BODY section which contains the displayed material. The HEAD section is where you would specify the title of the document, and also where you would put JavaScript functions used in the document. The end of the HEAD section is indicated by the end tag, "". Next comes the BODY section, with material that you wish to appear on the page. It is ended by the end tag "". Finally, the end of the document is indicated by the HTML end tag, "". The same pattern applies to all HTML tags: the end tag is made by adding "/" (the forward slash character) to the beginning of the corresponding start tag.
For practice, try using your text editor to write a very simple HTML file like the one below. (You can write it yourself, or you can copy and paste from your browser to your text editor.)

Hello, world!
Use your text editor to save the file. Call it something like "HelloWorld.html" (when choosing a name for your file, always end the name with ".htm" or ".html").
Now open your HelloWorld.html file with your browser. In your browser, use the "File" menu, and choose the option "Open..." (for Firefox, choose "Open File..."). Using the controls in the File Open dialog box that pops up, navigate to your file and select it. You should see "Hello, world!" on both the browser title bar and on the body of the page.

Getting Started with JavaScript

Now that you've succeeded with writing an HTML file and opening it with your browser, you're ready to delve into JavaScript. The following link has a step-by-step tutorial that will give you a great introduction to JavaScript programming: http://www.webteacher.com/javascript/index.html

Writing a JavaScript Animation

The rest of the Introduction will cover the pieces that you need to write an animation program in JavaScript:

a function, to control the timing and placement of the image on the page,
one or more HTML image objects to move on the page,
a JavaScript object (that is, a way to refer to the HTML object(s) in JavaScript), and
a timer, to update the page at regular intervals.

Once you have put all these together, you will be able to start exploring how changing the settings affects the appearance of the animation.

A JavaScript Function

As you learned in the tutorial, JavaScript uses functions. Functions can do nearly anything you want them to do. Your function will contain code that will run your animation. A function in JavaScript looks like this:
// This is an example of a single-line JavaScript comment. // Below is an example of a multi-line JavaScript comment. /* This function doesn't do anything useful yet, but we will add code later to make it work. function myFunction() { /* Your animation code will go here */ }

Here is how to put the JavaScript function into an HTML file. The function is included in the section of the HTML file, like this:
My Page

An HTML Image Object

Your function will need an object to animate. For this example, we will keep it simple. We will use a ball as an object. To get your object, right click on the red ball (below), and do a "Save As..." Save the ball image as ball1.gif, in the same directory as your HTML file. (Note: if you choose a different filename, you will also have to change the name in the HTML tag, below.) Here is the ball image for you to save:

Now we will add the ball to your HTML file by inserting the following text just after :

Save your HTML file and open it in the Web browser. You should see the little red ball on your Web page. The ball should be 10 pixels wide. It should be located 200 pixels from the top of the Web page and 200 pixels from the left edge of the page. You can try changing the way your ball looks by changing the value of left, top, width, and height. For example, if you want a bigger ball, you can change the width and height from 10 to 50. Prove to yourself that it works. Try changing some of these values, saving the HTML file, and opening the file in a browser.

An Object in JavaScript

The object from step 2 is an HTML image object. We need to be able to use this object in JavaScript, so we have to create a JavaScript variable to represent the ball. Add this variable on the line before myFunction.

var myBall;

The statement above creates the variable, next we have to assign a value to the variable. That is, we have to tell JavaScript that myBall should represent the HTML object "ball." To do this, we use a built-in JavaScript object called document. We can use document to get an HTML object by its ID. To do this, replace the last line you added with:

var myBall = document.getElementById("ball");

This line tells JavaScript to look in the HTML document and find the object, or element, with the ID "ball," and assign it to the JavaScript variable myBall. You will notice in the HTML our ball has the ID of "ball." Now JavaScript knows about the ball in the Web page.

The Time

Animation requires that we change something on an interval. For example, we may want to change the position of the ball every five seconds, or change the color every ten seconds. We will tell JavaScript to call our function, on an interval so we can change something. To accomplish this add the following call to the built-in JavaScript method, "setInterval" (add this line before the code for myFunction()):

setInterval("myFunction()", 200);

This line tells JavaScript to run myFunction every 200 milliseconds. Right now, myFunction does not do anything. So let's add animation code to myFunction.

Writing a Simple Animation Function in JavaScript

For the first animation example, we will have the ball keep moving down the screen. First we need another variable to keep track of our current location. Add this variable after the myBall variable:

var loc = 200;

Add this code between the braces of myFunction:

loc += 10; // This adds 10 to the value of loc myBall.style.top= loc; // This moves the ball

In this case we are changing one of the properties of the ball. The property is style.top. We can change this property to make the ball move up or down.

Now save your HTML file, and open it in your Web browser. You should see your ball keep moving down the screen. You have just created an animated Web page! If your page is not working, here is the entire HTML file:
My Page

Improving the Animation Function: A Bouncing Ball

Just having a ball move down of you Web page may not be very exciting. We can make the ball move up and down by using a variable to determine the direction the ball is moving. Once it reaches an upper limit or a lower limit, we will make it turn around. Add the variable direction to the line above myFunction:

var direction = 0;

We will use this variable called direction so we know which way the ball is moving. 0 means the ball is moving down, and 1 means the ball is moving up. Try replacing myFunction with this new myFunction (to keep your previous work, save the HTML file with a new name):

function myFunction() { if(0 == direction) { /* move down */ loc += 10; if(loc >= 500) { /* reached lower limit, change direction */ direction = 1; } } else { /* move up */ loc -= 10; if(loc < direction =" 0;" top =" loc;">

Going Further

The goal of this project is to determine the best settings for the timer interval and ball step size in order to produce the smoothest animation. You can make the project even better by going further with your investigation of animation. The Variations section, below, has some suggestions to get you thinking.

Note for JavaScript files with Internet Explorer:
If you experience difficulty running your JavaScript code in Internet Explorer, we strongly suggest that you install the Firefox web browser and use it instead of Internet Explorer. For more information or to download the Firefox installer, see: http://www.mozilla.com/firefox/.

If you want to continue to use Internet Explorer, try adding the following line at the beginning of your file:

This line will cause Internet Explorer to run your file according to the security rules for the Internet zone on your computer. In our experience this may work, or it may not. For more information see: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/motw.asp and http://www.phdcc.com/xpsp2.htm.

Terms, Concepts and Questions to Start Background Research

To write a simple program in JavaScript, you should do research that enables you to understand the following terms and concepts:

HTML concepts: start tags and end tags, comments, the section, the How about making it even more realistic, and have it lose some height with each bounce, and eventually stop? For a multiple image animation, you could try animating a stick figure. From your ball animation you may have an idea how much an arm or leg should move with each time step, and what the time interval should be. Try it and see if the motion looks realistic! For a fairly advanced animation, how about two stick figures bouncing the ball back and forth between them? Another idea would be to try to relate your findings to the human visual system. What is the typical frame rate for displaying movies on a screen? How does this relate to the best timer intervals for your animation? Can you think of ways to measure visual response times? Persistence of vision? Computer monitor response times?