Drawing a cubic bezier curve using actionscript 3

Recently I came up with an idea for a project to work on and where I plan to write about soon on this blog. As a part of this project I need to draw curved lines. I thought it would be a good idea to make this similar as the curves which you can draw with the pen tool in Flash and Illustrator. An example of this kind of curve is on the left. I expected this would be really simple and it was just a standard drawing API which I had to use to draw this kind of curve…
Adobe’s documentation shows the following image which suggests we have the option to draw a quadratic bezier and a cubic bezier.

It’s quite simple to make these curves. There’s just a simple formula to calculate the exact x and y position on a position of the curve between 0 and 1:

• B represents the curve
• Px represents one of the four points which makes the curve. P0 and P3 are points which we know as anchor points, where P1 and P2 are the control points.
• u is the position of the curve which we want to calculate.

In actionscript this would look like the following:

``` posx = Math.pow(u,3)*(anchor2.x+3*(control1.x-control2.x)-anchor1.x)
+3*Math.pow(u,2)*(anchor1.x-2*control1.x+control2.x)
+3*u*(control1.x-anchor1.x)+anchor1.x;

posy = Math.pow(u,3)*(anchor2.y+3*(control1.y-control2.y)-anchor1.y)
+3*Math.pow(u,2)*(anchor1.y-2*control1.y+control2.y)
+3*u*(control1.y-anchor1.y)+anchor1.y;```

Note that you have to calculate this for x and y separately.

When we need to draw a curved line, we need to calculate this for let’s say in a 100 steps between 0 and 1 to see the curve:

As you can see this is almost the curve! If we divide the curve up in 1000 steps instead of 100, we will in this case see a perfect curve! But as you can imagine calculating this a 1000 times might be a little heavy, especially when you want that a interactive curve which we can change on the fly. Beside that when you want to draw a huge curve, 1000 steps might again be to little.
It’s better to connect each point with another so there won’t be any white-space in the curve and it seems fluent.

```var line:Shape = new Shape();
line.graphics.lineStyle(2,0x000000);
line.graphics.moveTo(anchor1.x,anchor1.y);

// store values where to lineTo
var posx:Number;
var posy:Number;

//loop through 100 steps of the curve
for (var u:Number = 0; u <= 1; u += 1/100) {

posx = Math.pow(u,3)*(anchor2.x+3*(control1.x-control2.x)-anchor1.x)
+3*Math.pow(u,2)*(anchor1.x-2*control1.x+control2.x)
+3*u*(control1.x-anchor1.x)+anchor1.x;

posy = Math.pow(u,3)*(anchor2.y+3*(control1.y-control2.y)-anchor1.y)
+3*Math.pow(u,2)*(anchor1.y-2*control1.y+control2.y)
+3*u*(control1.y-anchor1.y)+anchor1.y;

line.graphics.lineTo(posx,posy);

}

//Let the curve end on the second anchorPoint

line.graphics.lineTo(anchor2.x,anchor2.y);