Cubic Bezier Using BezierSegment | ActionScript 3 (AS3)

Last Updated on Monday, 26 April 2010 12:18 Written by Nicholas Dunbar

Fast Cubic Bezier in AS3

Because we use the machine code to do the calculations instead of doing them our self in interpreted AS3 this runs very fast.

When you look up Cubic Bezier on the web you find a ton of math and a bunch of libraries for ActionScript 3 (AS3) that have more features than you can shake a cat at. Damn it! I just want a simple solution a bit of code that I can just look at understand and use. Well the simple solution to generating a Cubic Bezier Curve is not using a bunch of fancy math but using a class that is already present amoung the native libraries. Behod the fl.motion.BezierSegment class! Since it is precompiled code, it is also faster than doing your own calculations. Where do you find the fl package? In windows try adding the class path C:/Program Files/Adobe/Adobe Flash CS3/en/Configuration/ActionScript 3.0/Classes

Here is how I use the BezierSegment class to generate a curve:

public class CubicBezier extends BezierSegment {
        public function CubicBezier(anchor1:Point, control1:Point, control2:Point, anchor2:Point)
        {
            if (anchor1 == null || control1 == null || control2 == null || anchor2 == null){
                Console.error("null object in CubicBezier constructor!");
            }
            super(anchor1, control1, control2, anchor2);
        }
        
        public function drawInto(g:Graphics):void
        {//I use distance here because I want the curve to always be smooth but you may want to optimize this calculation.
            var iterations:uint = Point.distance(a,d);
            var newPoint:Point;

            for (var i:uint; i < iterations; i++)
            {
                newPoint = this.getValue(i/iterations);
                g.lineTo(newPoint.x, newPoint.y);
            }
        }
    }

I extended The BezierSegment class inorder to create my own controler class CubicBezier. Below you will see how I use this class:

var path:CubicBezier;
path = new CubicBezier(anchorPoint1, controlPoint1, controlPoint2, anchorPoint2);
 
path.drawInto(this.graphics);

If you are not familiar with what an anchor point is, it is of the class type Point (as are all the point parameters in the constructor) and it is the begining of the curved line anchorPoint2 is the end of the curve. Control points are guides to where the curve will be bent. See here for a better description.

Set as favorite

Bookmark

Email This

Comments (0) add comment

Subscribe to this comment's feed

Write comment