the hell of a hunt…

In my first posts about vectorization, I piled up a cubic spline function to smooth the simplified shapes and as I wasn’t satisfied with the result, I started looking for another smoothing function that would actually pass though the controlPoints instead of using every third point as an anchor.

first I found a second derivative (fr) function (well yeah ; as I can’t understand maths, I have to pillage other people’s work … ) which worked fine yet only for horizontal sets of points (had to ‘x’ sort the set before processing )
you can check it hereunder:

click to respawn curve.
it can be very appropiate to draw a ‘curves’ box like photoshop.
so here’s the snippet for the example above (copy-paste into Flash)

after this sound failure, I found a series of articles by the algorithmist talking precisely about natural cubic spline:

• fisrt
• second
• third

there are plenty of explainations and it should have been enough yet, as mentioned above, I can’t understand maths.

so I kept searching and recently, katopz twitted this:

@sakri here’s the trick ;) http://actionsnippet.com/?p=1462 looking fw to blog all src

he was referring to this demo.

so I checked the actionsnippet website and fell from my chair.
when i got back on my arse, I found this article: Closed Catmull-Rom.
which seemed to be exactly what I wanted unfortunately, again, it wasn’t doing the job.
well, graphically yes, but the points are strangely sorted:

you can drag the red dots.
the alpha of the yellow dots and lines is indexed on the array’s current entry. you can see that it ‘jumps’ from a red dot to the other keeping a ‘look ahead’ incremental offset.
you can still check his work on the catmull curves here really instructive.

so finally I found a set of spline curves implementations in java by Tim Lambert
which I ported
and guess what… it works !
many thanks to him :)
check it out:

you can drag the handles around
the grren line is a closed natural cubic spline and the yellow is a simple natural cubic spline.
the red lines are the opened and closed versions of my previous method…. needless say it’s mere crap compared to the natural cubic curves.
the code for the green line is:

var nc:NaturalCubic = new NaturalCubic( controlPoints );
nc.closed = true;
nc.steps = 10;
nc.paint( this.graphics );

controlPoints is a Vector.Point containing the handles’ coordinates.
the steps var is the number of steps between two knots and the closed boolean specifies if it should be close.

the params for the yellow line are:

nc.closed = false;
nc.steps = 4;
pts = nc.curveAsPoints;
for each( p in pts )graphics.drawCircle( p.x, p.y, 2 );

steps = 4 makes the curve coarser.
by default, the nc.compute() function returns a Vector.Number containing x/y couples of values. and I’ve also put a getter : nc.curveAsPoints; to retrieve a Vector.Point instead.

now you’ll find the sources here:

• NaturalCubic.as
• Cubic.as (a dataholder, required)
• Main.as
• zipped

have fun! :)

Tags: Add new tag, bezier, curve, geometry, natural cubic, spline