Easy Animations

Paul Blanchard
Boston University
Department of Mathematics and Statistics
http://math.bu.edu/people/paul

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.

Making a simple QuickTime® movie

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 Figure 1 below). As the number of points increases and they become more closely spaced, the sum of the lengths of the segments approaches a limiting value, and this value is the arc length of the curve.

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.)


Figure 1 - Approximating arc length

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 and 100. The result was 91 images within Mathematica. The images were animated within Mathematica to get some sense of what the final animation would look like, and then they were exported as individual gif files, one file for each image. (Click here to download the Mathematica notebook that produced this sequence of images.)

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 Image 1. Next a frame rate is selected. We usually use 6 or 10 frames per second. Finally one saves the movie by selecting Save As. We always click the box to make the movie self-contained, and voilà the animation is saved to disk ready for posting to the appropriate course web page.

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.

LiveGraphics3D

For animations involving three-dimensional objects, there is another approach that gives the student even greater control. Martin Kraus, a postdoctoral fellow at Purdue University, wrote and maintains a Java 1.1 applet that gives the student the ability to manipulate three-dimensional graphics directly within any browser that supports Java 1.1, and this applet can be used without charge for noncommercial purposes. The graphic image is produced using Mathematica, but the student does not need Mathematica or any special software to view and manipulate it. (Note added on July 27, 2006: In May 2006, Jonathan Rogness and Martin Kraus published a more detailed article about LiveGraphics3D in the Journal of Online Mathematics and Its Applications.)

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 100K file resembles

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.

Animations with LiveGraphics3D

LiveGraphics3D can also render an animation that can be rotated and spun as well. The animation below includes a curve in the form of a trefoil knot along with a tangent vector that moves along the curve according to its parametrization. The student is able to control the animation just like a QuickTime animation by moving the mouse left and right over the image while the right mouse button is pressed.

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.

More examples

We have produced a number of QuickTime and LiveGraphics3D animations intended for the multivariable calculus and differential equation courses. There is a
web page which links to many of them available on our website, and you can see how we use these animations by visiting the demo sections of the websites for our multivariable calculus (MA 225 Fall 01) and differential equations (MA 226) courses.

The hard part

By now, it should be clear that the hard part of producing QuickTime and LiveGraphics3D animations is designing the animation and producing it within Mathematica. Once you have an animation there, making it available to your students either in QuickTime format or using the LiveGraphics3D applet is easy.