If a picture is worth 1000 words, then a good animation is like a classic short story---a simple tale simply told. Animations are particularly effective in the teaching of mathematics because motion is often fundamental to the concept at hand, and a well designed animation is usually an excellent way to introduce such a concept. In this article, we describe two ways to make animations and post them on your course websites. Once you master the process, you will be surprised at how easy it is to build and post your own animations.
A QuickTime movie is a wonderful way to encapsulate an animation and export it to the web while giving the student some control over the illustration. Once the student has downloaded Apple's free QuickTime player (available for PCs running Windows and Macs) and installed it for their browser, clicking on a movie yields a web page that contains the animation along with a slider that can be used to control the action. One button starts the animation from the beginning, another single steps through the animation, and a third single steps in the opposite direction. The student can also use the slider to move in either direction at any speed.
As an example, consider the concept of arc length of a curve
in space. We define this length as a limit of sums of
lengths of line segments between points on the curve (see
Before you view this animation, you must first install Apple's free QuickTime player if you have not already done so:
Now that you have the QuickTime player, you can click on the following static image of the animation to view the real one. (Use the back button to return to this article.)
Note that, in this animation, the slider represents the number of subdivisions of the curve. Moving the slider from left to right increases the number of subdivisions. At the same time, the sum of the lengths of the line segments is updated, and an observant student will note that this approximation is 32.64 (to two decimal places) as soon as there are at least 63 line segments that approximate the curve.
What was involved in constructing this animation? The frames
of the animation were all rendered using
Mathematica®. First, we defined a few graphics functions to
handle some of the standard aspects of a three-dimensional
figure, e.g., the axes, the tick marks, and the view point
for the figure. Then we plotted the curve. Finally we added
the points, their connecting line segments, and the labels
that give the number of segments and the approximate arc
length. A Do statement was used to produce one figure for
each number of subdivisions between 10
In order to produce the QuickTime movie, we use QuickTime
Pro, which is an inexpensive upgrade to the free QuickTime
player. Lauch QuickTime Pro and select Open Image Sequence
from the File menu. Go to the folder that contains the
images and click on
Although we use Mathematica to produce our animations, this technique works with any application (such as Maple or MATLAB) that can save images in any of a number of standard graphics formats (bmp, gif, jpeg, png, tiff, ...).
In addition to the QuickTime animations available from our websites, there are many wonderful ones available at other sites. In particular, we have been inspired by those that are available at the website of Professor Louis A. Talman.
For example, consider the circular hyperboloid of one sheet shown immediately below. Put the mouse cursor on the graphic and rotate it by dragging the cursor while pressing the left mouse button.
Once rendered in Mathematica, it only takes a few minutes to export the Mathematica description of the surface into a file and post it to the web. Then the student can view the image, rotate it, resize it, and even spin it without any special software of any kind. (Click here for additional instructions regarding the manipulation of LiveGraphics3D objects.)
After you have used Mathematica to produce a three-dimensional
object that you want to post on the web, the rest of the
process is straightforward. Within Mathematica, you load the
LiveGraphics3D package.
This package provides the WriteLiveForm[]
function. Applying this function to the graphic object
produces an ASCII file that contains the Mathematica
description of the object. In the case of the circular
hyperboloid shown above, this
Graphics3D[{ Polygon[{{3.1623, 0., -3.}, {3.0883, 0.6798, -3.}, {2.8974, 0.63776, -2.7931}, {2.9667, 0., -2.7931}}], Polygon[{{3.0883, 0.6798, -3.}, {2.87, 1.3278, -3.}, {2.6925, 1.2457, -2.7931}, {2.8974, 0.63776, -2.7931}}], ... (many polygons omitted) ... Polygon[{{2.8974, -0.63776, 2.7931}, {2.9667, -7.2661*^-16,2.7931}, {3.1623, -7.7451*^-16, 3.}, {3.0883, -0.6798, 3.}}]}, {PlotRange -> Automatic, DisplayFunction :> $DisplayFunction, ... (many graphics options omitted) ... BoxStyle -> Automatic, SphericalRegion -> False} ]Basically it is a long list of polygons followed by a list of graphics options.
In addition to the file that contains the Mathematica description of the three-dimensional object, you need an html file that loads the Java applet, sets the values of a few parameters for the applet, and specifies the name of the file that contains the Mathematica description. The structure of this file is specified on Kraus's website, but the quickest way to make this file is to view the source of an html file for a LiveGraphics3D object that is already posted on the web and then change character string for the file name that contains the Mathematica description of the object. Note that this html file can contain additional html code.
Finally, the Java archive file, live.jar, with Kraus's applet must be available to the student on your web page even though the student does not have to do anything special to download it. The browser loads it automatically when the student clicks on the html file (just as it did when you read this page), but you must make sure that the browser can find the applet.
Making a LiveGraphics3D animation
is very much like making a QuickTime animation.
You produce the animation using Mathematica, but in this
case you do not
export the images. Instead you use the
WriteLiveAnimationForm[]
command from the LiveGraphics3D
package. This command produces a file that contains the
Mathematica description of the entire animation. Once again
you need an html file that loads Kraus's applet and
specifies the name of the file with the Mathematica
description, but it has the same format as any other
LiveGraphics3D html file.