Archived Forums
 Sources & Experiments

I made this into a blog post here.
——————-
Here’s the list with all examples posted so far.

[list]
[*]Bezier controlpoint demonstration as1.0 lookup table and source
[*]JelloWave.html and source
[*]Globb_a.html and source
[*]Globb_b.html and source
[*]donut and source
[*]Globbor and source
[*]trailer.html and source
[*]wheeler.html and source
[*]sketcher.html and source
[*]Bezier3D.html and source
[/list]

For the other Bezier controlpoint demonstrations you can find them down this post (this one is the fastest implementation).

If you have any questions about any of these examples, about the actionscript or math,  let me know. I’ll gladly help.

———————
NOTE: the time measurements are pretty old, with player 9 for example *all* versions have become blasting fast. Still, the principle of a lookup table still apply to very heavy repetitive math duty.

Hi guys,

I was doing some personal research in Bezier curves and was interested in finding way to draw Bezier curves through a dynamic number of controlpoints. The problem was, everywhere I looked for some information it was always about Bezier curves up to 5 controlpoints, which were calculated with an optimized formula for exactly that amount of controlpoints (a simplified version of the general formula for n+1 controlpoints). So I wrote my own take on it; one that can handle an unlimited amount of controlpoints added dynamically, that still retains enough speed and also lets you control how smooth the curves are.

To get some background information on Bezier curves, quadratic and cubic curves, visit Bezier, cubic Bezier curves in flash and flash drawing methods. There are also some threads on Bezier curves here on Ultrashock, including one by Robert Penner.

——-

empty setup preview, source.fla
Here I go. Take a look at this fla. The only code in it is to create the draggable controlpoints and the empty drawBezierCurves function that is being called when a controlpoint has changed (because you dragged it, or added new ones). The buttons at the bottom reset the movie with a number of controlpoints, and the buttons below that change how smooth the line should be. The textfield in the upper right corner indicates how fast the Bezier curve was drawn. We’ll add more to this movie as we go along.

Now take a look at this Bezier formula.

Converted into actionscript, this is

[as]
(factorial(N) / (factorial(k) * factorial(N - k))) * Math.pow(u, k) * Math.pow(1 - u, N - k);

// where factorial ‘!’ is our custom recursive function

function factorial(x:Number):Number {
return (x <= 1) ? 1 : x * factorial(x - 1);
}
[/as]
To actually calculate x and y, consider the following example, where we have 5 controlpoints, and thus N is 4 (the formula says N+1 controlpoints). The controlpoints are the movieclips that you can drag.

[as]
var stepsize:Number = 1/30;
var N:Number = 4;
for (var u = 0; u <= 1; u += stepsize) {
  x = y = 0;
  for (var k = 0; k <= N; k++) {
  var blend:Number = (factorial(N) / (factorial(k) * factorial(N - k))) *
Math.pow(u, k) * Math.pow(1 -  u, N - k);
  x += this[“controlPoint” + k]._x * blend;
  y += this[“controlPoint” + k]._y * blend;
  }
  this.lineTo(x, y);
}
[/as]
First of, u is the ‘lifetime’ variable of the Bezier curve. For example u = 1 is all the way to the end of the curve on the last controlpoint, u = 0 is at the beginning at the first controlpoint, and u = 0.5 is exactly in the middle of the line. The smaller the steps you take, the smoother the line is going to be, because you use smaller intervals. Also, the stepSize has to be at least as big as the number of controlpoints. Otherwise, the line won’t even reach the controlpoints on the end.

This is what the movie does with this code
example1, source.fla

Cool huh, this works for every N. Try it at 15 controlpoints in overkill mode; it now is doing (15 controlpoints * 6 smoothmodifier) steps * 15 = 1350 cycles of Bezier calculations on *each* update. See the speed at around 220ms in standalone player? As you can imagine, this is rather heavy duty for the cpu, as it has to do three factorials, two powers and some multiplications for every x,y point we calculate each cycle. That’s why most examples you find don’t use this method and use an formula that is optimized for (and limited to) up to 5 controlpoints. For example this document shows special cases for exactly 2 and 3 controlpoints. This greatly increases speed, but you are limited to 2 and 3 controlpoints. There is another way however to speed things up: Lookup tables.

For those who don’t know what lookup tables are; they are tables that have heavy-duty calculations done forehand so that you can later on just fetch the value instead of doing the calculation. I also wrote something about lookup tables here, that basically is an as2 class that automates the lookup tables for you. But for this example, I’ll keep it short and simple and stick to as1 timeline apple pie. First, we’ll create a lookup table for the factorial calculations.

[as]
var factorialTable:Array = new Array();

for (var k = 0; k <= N; k++) {
factorialTable[k] = factorial(k);
}
[/as]
You see, we only calculate the values that we’ll need for the Bezier curves. No more, no less. However, this means we have to update the lookup table every time we add or remove a controlpoint.

Now the lookup table for power.

[as]
var powerTable:Array = new Array();

for (var u = 0; u <= 1; u += stepsize) {
if (powerTable == undefined) {
  powerTable = new Array();
}
if (powerTable[1 - u] == undefined) {
  powerTable[1 - u] = new Array();
}
for (var k = 0; k <= N; k++) {
  powerTable[k] = Math.pow(u, k);
  powerTable[1 - u][k] = Math.pow(1 - u, k);
}
}
[/as]
Now, our method to calculate the Bezier curves looks like this: