Home > Flex, Math > Closed Loop Bezier Spline

## Closed Loop Bezier Spline

July 12, 2007

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.

Categories: Flex, Math
1. July 13, 2007 at 5:15 am

This is some excellent work! Bravo! But where is the link to the online demo? And please allow me translate your article, so even an animator can understand it: With this class you can finally do PROPER easing along a bezier paths. No more automatic speeding up along straight segments and slowing down in tight curves. This class also allows you to align text to a path and maintain correct letter spacing.

I’m now curious to see how you’ve implemented it and how fast it is in practice, since this stuff usually requires a lot of calculations.

2. July 13, 2007 at 5:31 am

Ouch – I better should have read your TechNote before posting: “Note that this code is only useful for fast animation – not static drawing or animating a sprite
along the composite curve. The arc-length parameterized Catmull-Rom spline is better suited for the latter task.”

3. July 13, 2007 at 6:38 am

Mario – the original spline was oriented towards fast animation, not highly accurate static drawing. Based on several requests, I’ve added arc-length parameterization and closed loop support. It is possible to sample the curve and do highly accurate static drawing and I could add support for higher levels of subdivision so that the drawing could be done more accurately and relatively fast with curveTo()’s. That would kind of defeat the ‘fast animation’ purpose, though.

The reason I added arc-length parameterization is to eventually support 3D path animation in Papervision 3D. This particular spline is easy to add closed-loop support (with consistent tangent generation so there are no ‘kinks’ as a camera or other object loops through the original knot) and the variable tension allows an animator to control how close the spline ‘hugs’ the line segments between knots.

The velocity control is important. The curve would not be drawn in such cases, it would be sampled to move a camera or other object along a 3D path at constant velocity. Arc-length parameterization is more compute intense, but my experience with AS3/F9 is that it’s no big deal. The Singularity package contains a couple path animation demos using the arc-length parameterized Catmull-Rom spline.

There are no online demos at this time – I may add some in the future.

thanks!

– jim armstrong

1. July 17, 2007 at 5:58 pm