Some interesting stuff

Some recent observations from the department of the new and interesting,

Colin Moock on inheritance-vs-composition in AS 3.

hxASM – Flash 9 assembler (mmmm … tasty).

Jesse Warden’s cool Flex preloader tutorial.

Ralph Hauert (Papervision 3D) FlashCulture interview.

Ted Patrick’s Flash 9 install counter.

Acress Danica McKellar on making math cool for girls.

and … the list would not be complete without something from John Grden now appearing at MAX 2007.

Catmull-Rom Spline Animation

A new online demo is now available, illustrating the animation of a Catmull-Rom spline from beginning to end.  The curve is drawn from t=0 to t=1 in an ENTER_FRAME handler.  This emulates how the spline might look if it were drawn by hand.

This demo provides a good introduction to working with C-R splines.  Studying how the drawing speed varies with knot placement is a subtle introduction to spline parameterization.

Thanks, by the way, to Mario Klingemann for helping test some of the C-R spline methods.

Check out the demo here (includes a link to download the full Singularity package).

Quadratic Bezier, 3-point interpolation

Using a quadratic bezier curve to interpolate three points is a very old algorithm, dating back to the early 1970’s. It’s been around quite some time in Flash, although in a simplified form sometimes called midpoint interpolation. This is because the parameter, or t-value, at which the curve passes through the second point is arbitrary. The formula happens to be compact when t = 0.5.  So, that is taken as the ‘interpolation formula’.  The midpoint formula has been passed around online and published in some Flash books.  The relationship of this formula to the actual parameterization of the curve is discussed in this TechNote.

Choosing a parameter value to interpolate the second point affects the placement of the middle Bezier control point. Since the control points form the set of geometric constraints for the curve, this is an example of a case where parameterization actually affects the shape of the curve.

The default parameterization for the Singularity Bezier2 class is based on chord-length. The t-value at which the quad. Bezier passes through the second point is determined by the fraction of the distance between the first and second points to the total chord length.

This online demo illustrates the difference between midpoint, chord-length, and arbitrary parameterizations. 

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.

Closed Loop Bezier Spline

I finally found a bit of free time to upgrade the cubic Bezier spline, adding arc-length parameterization and closed-loop support. Curve closure is automatic and handled by a new ‘closed’ setter function in the BezierSpline class. The new BezierClosedSpline.mxml demo is illustrated in the following diagram,

C-1 continuity is preserved through the loop by using the tangent to the angle bisector from knots n-2, 0, 1 (as knots 0 and n-1 are the same). The control cages for each cubic segment are illustrated in the following diagram.

The spline now supports arc-length parameterization. The orange markers in the above diagrams show the original knots. The green markers are generated from a default uniform parameterization. The demo illustrates the difference between uniform and approximate arc-length paramterization. This allows the spline to be used in path animation with velocity control.

The Singularity package download and a more detailed description of the AS 3 paramteric curve library may be obtained here.

Anyone interested in the methodology for generating the spline may read this TechNote.

Die Hard

I’ve been extremely busy on a gig (and handling family issues), so it’s taken me a while to finally see Die Hard 4.  I’m a die-hard Bruce Willis fan, so you would probably expect my review to be positive.  Aside from the semi-trailer/F-35 scene that was over the top, I really enjoyed the flick.  I also took away numerous tips for improving myself such as how to get additional help on a gig (dial 1-800-HENCHMEN) and how to take out a chopper with a car.  Good stuff to add to a resume 🙂