Multi Bézier Curve

keita — Thu, 12 Mar 2009 01:56:37 +0000

What is Bezier?
Simply explaining for dummy AS programmers, is what graphics.curveTo method does.
If you want to learn more, here is the Wikipedia article.

Basically, the curveTo method uses a quadratic bézier, so you need a control point and a anchor point.
But it’s difficult to find the precise control point for a curve you want, because the control point is not inside the curve.
Also, you just can create a curve with just one control point, or if you want to use many curveTo methods in sequence, sometimes the curve doesn’t became as straight as you want.

So, I created a class that calculates the control points with multiple values bézier.
You can also get the position in this curve.

Here goes the examples. (you can click and drag the points)

This is an example using 7 positions, the start and the end anchors and 5 control points.
In the class, there’s a method that returns me an array with the approximated quadratic bézier values, so I’m using this values to draw the green line.
You see that it still hard to draw a path that you want.

This is the same example, but now the positions are inset in the curve.
Now, it became easier to create a curve line.

And here, a animation over the curve.

Sorry for lack of explanation, actually I’m in vacation now, but I wanted to post this class.
Later I’ll try to post more examples and uses.

I will try to update my svn with these classes, commented, after I came back from vacation.
So, for now, here is the source code.

Vote

labs.hellokeita.com » Bézier

Multi Bézier Curve