How was it done?

The Animated Equations web site was put together in about 300 hours. Here's how we did it.

Example selection

The examples were chosen primarily from Edwards & Penney (1996). We selected examples that:

covered a wide range of differential equations,
were easy to visualise,
exhibited a range of different, and sometimes unexpected, behaviours, and
could be solved analytically.

Storyboards

For each example we listed the behaviors we wished to illustrate, then created a storyboard that described the flow of ideas. The storyboard also included a description of the animations to be produced.

Animations

The animations were produced using Haskell scripts and the Hugs 1.4 Haskell interperter. The scripts calculate a sequence of system states, and then convert the state sequence to drawing commands to produce a Computer Graphics Metafile (CGM) with 24 pictures for each second of animation. Numerical solutions to the differential equations were found using an adaptive, fourth-order Runge-Kutta scheme.

The CGM file was converted to a Postscript file using RALCGM, and then to a sequence of PPM pixmap files using GhostScript. Finally, the sequence of PPM files were converted to a movie using the Stanford MPEG encoder.

HTML markup

The HTML markup was produced using a text editor.

When the web pages were written, HTML did not support mathematical notation. Two possible ways of working around this problem were to include equations as graphic images, or to make do with text. Using graphic images introduced another problem -- how big should the images be so that they match the surrounding text? We made do with text.

Video production

The animations were designed to be shown on a computer screen and from video tape. The video was produced using a (flickerless) video camera pointed at a computer screen. Titles and captions were added later.