splitting a bezier curve in actionscript3

Question

Hi

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.