Online Demo – Spline Parameterization

The previous post on closed-loop Bezier splines prompted some questions regarding arc-length parameterization. A curve’s parameterization does not generally affect the way the curve is drawn (I will show a counter-example in a future post). Parameterization does affect how sprites are animated along the curve. More detail may be obtained from this TechNote.

A common misconception is that the parameter value t = 0.5 always represents one half the distance along the curve. Not only is this generally untrue for single-segment curves, it can be dramatically incorrect for composite curves.  With a common parameterization such as uniform or chord-length, a distribution of sprites along the curve at equal parameter increments (i.e. 0, 0.1, 0.2, … 1) does not necessarily result in equal distance (along the curve) between the sprites. This is the goal behind an arc-length parameterization.

The difference between uniform and arc-length parameterization can be illustrated by animating sprites along the same curve, but with different parameterizations, as shown in the following diagram.

The red sprite is animated by sampling parameter values at equal increments of ‘t’ using a uniform parameterization. The same parameter value is sampled from the same curve, but with arc-length parameterization for the green sprite. So, t=0.25 with uniform parameterization maps to one of the local cubic curves with some local parameter value in [0,1]. Arc-length parameterization maps a parameter value of 0.25 to one quarter of the length along the curve (approximately).

Both sprites begin and end at the same knot (parameter values 0.0 and 1.0). The green sprite moves at a constant velocity along the curve. The red sprite speeds up and slows down, based on knot spacing. The first three knots in the above example are closer together, so the red sprite is moving slower at the ‘snapshot’. Eventually, the red sprite moves faster and both sprites are in the same location at parameter value 1.0.

Check out the online demonstration (requires the Flash 9 player). A link to download the source code is included (requires FlexBuilder 2). I hope this demo is helpful to both Flash/Flex programmers and beginning computational geometry students.

Advertisement