splitting a bezier curve in actionscript3 - actionscript-3

Question

I would like to "grow" a path with bezier-curves. After the path has been drawn, it should be shaking a bit: Weave-like look and feel.
visual example:
weave example
At the moment I use TweenMax.bezier, which let me move a point along this curve and at the same time (onEnterFrame) I draw lines to the current Position of the Point.
Unfortunately this approach leads to bad quality of the curve if the framerate drops(square-cut) and it is difficult to recalculate all the points in between(for the weave effect);
Recent suggestions lead me to use curves to solve the problem, but I don't know exactly how.
This example would solve my problem: split bezier
But no code-snippets.
Did anyone encounter the same problem ?
Thanks in advance

Answer 1

I often use Tweeners CurveModifiers._bezier_get to create bezier curves and retrieve points easily (I've tried a few and this one is actually fast).
... Quickly :
Set up two arrays (x,y) listing the control points.
Iterate each frame to modify the positions of the control points.
Redraw your curve with some similar code :
for(var i:Number=0; i <1; i += precision)
{
x = CurveModifiers._bezier_get(pathX[0], pathX[pathX.length - 1], t, pathX);
y = CurveModifiers._bezier_get(pathY[0], pathY[pathY.length - 1], t, pathY);
// ...graphics.lineTo(x,y)
}
Edit
Here you go :
import caurina.transitions.*;
import caurina.transitions.properties.CurveModifiers;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event)
{
modifyCurve();
drawCurve();
}
// Control points
var pathX:Array = new Array(50,200,600,850);
var pathY:Array = new Array(50,200,100,350);
// growth related
var growth:Number=0;
var growthSpeed:Number=0.01;
/**
* Grows and draws the curve
*/
function drawCurve():void {
const precision:Number = 0.001;
var cx:Number,
cy:Number;
// grow (avoid making it more than one)
if (growth<1) growth = Math.min(1, growth+growthSpeed);
graphics.clear();
graphics.lineStyle(1);
for (var t:Number=0; t <growth; t += precision) {
cx=CurveModifiers._bezier_get(pathX[0],pathX[pathX.length-1],t,pathX);
cy=CurveModifiers._bezier_get(pathY[0],pathY[pathY.length-1],t,pathY);
if (t==0) {
graphics.moveTo(cx,cy);
} else {
graphics.lineTo(cx,cy);
}
}
}
var motion_t:Number = 0;
var motionSpeed:Number = Math.PI * 0.1;
var motionRadius:Number = 10*motionSpeed;
/**
* Creates a movement by transforming the control points
*/
function modifyCurve():void
{
var len:int = pathX.length;
motion_t += motionSpeed;
for(var index:int = 1; index < len; index++)
{
// simple circular movement for each control point
pathX[index] += Math.cos(motion_t + Math.PI * 2 / index) * motionRadius;
pathY[index] += Math.sin(motion_t + Math.PI * 2 / index) * motionRadius;
}
}

Answer 2

What you're looking for is more commonly called the deCastlejau algorithm. Blossoming or polar labels are more general methods for the same thing.