Articles Archive
Articles Search
Director Wiki

Animating With B?©zier Curve Paths and Velocity Control

March 16, 2004
by Lee Cullens

To create an animation sequence in a Director movie, one can chose any of various score based methods, and/or use process driven animation. While more than one choice may be available though, the necessity of employing process driven animation increases with the complexity and dynamics of an animation.

Consider, for example, a butterfly fluttering around a scene in a not overly obvious pattern, or an animated amusement park scene, or a much more challenging project such as a video Grand Prix game. In the first scenario a very convoluted path might be shifted and rotated randomly. In the second, multiple paths may remain fixed, but individual animations would cycle randomly. In the third, path selection, velocity, and various effects/consequences would all be keyed to user interaction.

Let's check out a small sample of the butterfly scenario. Imagine a nice summer day, hum a gentle tune, and click in the frame below to start/stop.

What these scenarios have in common, besides run time dynamics, is path and velocity complexity. The paths will likely be made up of different geometric constructs and, to control velocity, points must be calculated along the paths at intervals relative to path distance.

So let's start with path construction. A path of one or more straight lines, or of common arc defined curve types, doesn't present much of a problem. However, when a path consists of different component types and/or multiple paths have different component types, and the mathematical nature of components varies, the logic and possibly the mathematics involved is a little more complex. For example, a path made up of multiple fixed radius arcs, straight line segments, and even a few transition spirals thrown in, requires different calculation handlers and process control for each component type.

For these more elaborate paths, wouldn't it be nice if a common component could be used throughout, and be used for both path and velocity aspects? A common denominator is straight line segments equivalent to velocity intervals, but such quickly become unwieldy in terms of both memory and maintenance. Looking for a more inclusive path component, we might consider using a Bézier curve construct. They are so simple and flexible that they have become the de facto standard of vector graphics applications.

Now you may be thinking "Whoa, velocity control for a Bézier curve path is not a trivial matter" and you are correct, but it need not be an overly difficult matter either. It is true that arc distance on a Bézier curve is not a function of radius and rotation, and that finding a point on such relative to arc distance is not something you want to be doing on-the-fly during an animation process.

Bézier curves are excellent for curvilinear path construction, and for curvilinear velocity control, but do not immediately satisfy both as an entity. Ideally, though, the most comprehensive common path component would be a construct that satisfies both aspects of animation. To get from the former to the latter, one approach is to predetermine the Bézier curve parametric calculation increments that yield the velocity points, and to represent the calculation increment lists in some form of shorthand manner to avoid unwieldy lists.

Wrestling with process driven animation problems and not being able to find a tool for such, I developed an authoring tool to accomplish the above. Starting as little more than a message window argument plug and output function, it has evolved (in eight major incarnations) into a fairly professional stand alone authoring tool.

To give you a better idea of the tool, a screen shot and notes follow.

The input area is in the upper left of the screen. The tool accepts as input a previous output curve definition, or a sample curve plot request, or a Bézier curve definition with velocity control. Velocity control is explained at length in the documentation. When a curve definition is to be used, one of the four process selection buttons must also be clicked. What process to select when, is also explained at length in the tool documentation.

Below the input area, sample velocity results are displayed to help the user zero in on a desired velocity range.

Moving to the right, the dominate grid area is where process results are plotted for user evaluation. While plotted output depends on process selection, all that might be included is as follows:

1) The solid red line is the specified primary Bézier curve. Curve control points P0 and P3 are annotated.

2) The solid green lines are the tangents of the primary Bézier curve.

3) The circular point plots are the primary curve points as calculated by the tool. For a "Basic Plot" process request, they are calculated at uniform calculation increments, and otherwise are the velocity points.

4) The "+" point plots are the accumulative calculation increments. For a "Basic Plot" process request, they are the uniform calculation increments, and otherwise are the velocity calculation increments.

5) The solid gold line is the fitted "velocity curve(s)." That is, the shorthand construct for the calculation increments list. One to five curves may be used to fit the calculation increments list.

6) The "X" point plots are the resulting velocity at the velocity points, with their scale annotated to the left. The velocity units depend on the primary curve definition units. If the primary curve was defined in terms of pixels, then the resulting velocity will be the pixels moved from the preceding point.

7) The solid black line is the velocities resulting from the calculation increments extracted from the fitted "velocity curve(s)."

Plotted output doesn't translate easily to Lingo, so the tool also outputs a text file of a Lingo list definition of the velocity controlled Bézier curve that may be copied directly into your script. This text file may be used as input for the tool if a curve needs to be further worked.

There is abundant documentation with the tool, and the source module scripts and handlers are extensively commented. In addition, an accompanying sample use movie demonstrates the use of the tool output and provides a common handler for moving a sprite along a path of multiple velocity controlled Bézier curves. It even demonstrates concurrent altered use of a path with the common point positioning handler.

If you get into much animation, I hope this tool saves you considerable work and helps you go beyond previous animation projects. If nothing else, it might be a good reference for using vector members, MIAWs, MUIs and even hot help techniques.


This tool and accompanying material is provided as freeware (no donation requested) in accordance with the copyright statement under the help button of the tool.

The package includes run time and source modules of the tool, its MIAWs, and a "Sample Use" movie, all of which are zipped to about six and a half megs.

This current version (VIII) of the tool was created with Director¨ MX 2004 on a Windows¨ XP platform and has not been extensively tested in any other setting. It uses only fully functional Xtras distributed with Director. You should also be aware that the tool uses a stage size of 1024x768.

The package is available here (6.3 MB).

Lee Cullens retired early from a software engineering career to pursue artistic interests. Then, creating distributed presentations of artwork evolved into a marriage of skills and he now provides authoring assistance where Macromedia Director is the prominent tool.

Copyright 1997-2019, Director Online. Article content copyright by respective authors.