How I made these animations

A lot of folks send me e-mail asking how these animations were made. The process I use is a laborious one that I can't really recommend if you want to do this regularly.

My technique evolved from an experiment with my CAD program.  I'd just purchased Building the Atkinson Cycle Engine² and was having a difficult time visualizing how the engine's unique linkage worked.  Once I saw the GIF file in motion, I thought it was so cool I got carried away and made a bunch more.  Then, of course, I had to show them off.  ...So the Animated Engine pages were born.

Since then, maintaining this site has blossomed into a rewarding hobby in its own right.

But now, I'm looking into alternatives to reduce the work load so I can get more pictures published faster.  If you really want to do it my way, here's an outline.  Please understand that this not a complete tutorial.

Here are the steps:

The CAD program takes center stage. A CAD (Computer Aided Design) program is a computerized drafting board.  DesignCAD is the one I use, but I think any decent CAD program would do, as long as it has the ability to export images.  Most of the work has to do with using the CAD program itself, so I'll defer to the user's manual for that part.

Note:

You should be very handy with your CAD program before attempting to create an animation this way... and CAD programs all seem to have a fairly steep learning curve.  If you're brand-new to this, plan on spending a few weeks just learning how to use the CAD tool.  If you learn how to write macros for your CAD program you'll be ahead of the game, but it's not absolutely necessary.

Once the basic drawing is complete, combine or 'group' all the lines and curves that form each moving part.  Then combine all the remaining, non-moving lines into a 'background' group.  This makes it easier to manipulate individual parts without disturbing other things in the drawing.  In the above drawing, the groups are also distinguished by their color: red, green, blue and the black background group.

Duplicate the entire drawing several times to create the individual frames.  The number of frames varies depending on the detail you want, etc. This example uses 16 frames, which seems to be about the minimum.  I've written a macro for my CAD program to make this task easier.

Now comes the most laborious part... each moving part is moved just a smidge for each frame. This takes a little practice and planning to make sure the animation works smoothly.

Usually I start with the crankshaft and adjust the rest of the parts to match.  If you have 16 frames, then your crank should rotate 22.5 degrees for each frame (360/16 = 22.5).  I have another macro to duplicate and rotate parts, since this is such a common operation.  The illustration below shows the drawing duplicated with the crankshaft already rotated.

If there are spoked wheels or gears in your drawing, you have to be extra careful with the number of frames you choose, or the parts might appear to be rotating too fast, two slow, or backwards--like wagon wheels in an old western movie. My solution is to make sure the gears rotate exactly 1/2 tooth (or some odd multiple) per frame.  This might mean you have to re-arrange the number of frames or gear teeth.

Parts like connecting rods and pistons must be manipulated 'by hand' to correspond to the  new position of the crank.  I usually have to draw a few lines & arcs to figure out the new position of each part.  Here's a typical sequence of operations:

Next I add the 'gas bubbles' and other effects.  This makes the illustration much easier to understand, but it's so tedious I've skipped it on a number my animations, including this one... sorry, that's just too much work!

Then each frame is 'exported' to a separate image file.  It's important to make sure the images are all the same size and orientation so the frames align correctly.  Another macro accomplishes this task.

Finally I combine the separate frames into an animated GIF file. I use PolyView (a terrific shareware image utility) for this step. An animated GIF is an image file that contains several frames intended to be played back in sequence.  It's probably the simplest type of animation available on the web. Most browsers have built-in support for displaying them.

Here's the result:

I'm sure there are better tools out there for doing this sort of thing. If you decide to try doing it my way, let me know.  I'll try to answer any questions you might have, but as you can see, this is a complicated process so I can't make any promises!

Good luck!

-Matt

Copyright 2001, Matt Keveney. All rights reserved.