Catmull-Rom Spline

Splines are a mathematical means of representing a curve. The curve can be defined by series of "Control Points" and a defining a function that allows additional points within an interval to be calculated. There are various functions available to approximate a curve, the Catmull-Rom spline is one of them. What makes the Catmull-Rom spline interesting if that the specified curve will pass through all of the control points - this is not true of all types of splines.

//default setting will just draw a straight line
var _hermiteValues = [ 0, 0, 1, 0 ];

//...

function setResolution( value )
{
    var resolution = 1 / value;

    _hermiteValues = [];

    for( var t = resolution; t <= 1; t += resolution )
    {
        var h00 = (1 + 2 * t) * (1 - t) * (1 - t);
        var h10 = t * (1 - t) * (1 - t);
        var h01 = t * t * (3 - 2 * t);
        var h11 = t * t * (t - 1);

        _hermiteValues.push( h00, h10, h01, h11 );
    }
}

                    

function drawSpline( context, segmentStart, segmentEnd, prevSegmentEnd, nextSegmentStart )
{
    if( !prevSegmentEnd )
    {
        prevSegmentEnd = segmentStart;
    }

    if( !nextSegmentStart )
    {
        nextSegmentStart = segmentEnd;
    }

    var m1 = { x: (segmentEnd.x - prevSegmentEnd.x) / 2, y: (segmentEnd.y - prevSegmentEnd.y) / 2 };
    var m2 = { x: (nextSegmentStart.x - segmentStart.x) / 2, y: (nextSegmentStart.y - segmentStart.y) / 2 };

    var n = _hermiteValues.length;

    for( var i = 0; i < n; i += 4 )
    {
        var h00 = _hermiteValues[ i ];
        var h10 = _hermiteValues[ i + 1 ];
        var h01 = _hermiteValues[ i + 2 ];
        var h11 = _hermiteValues[ i + 3 ];

        var px = h00 * segmentStart.x + h10 * m1.x + h01 * segmentEnd.x + h11 * m2.x;
        var py = h00 * segmentStart.y + h10 * m1.y + h01 * segmentEnd.y + h11 * m2.y;

        context.lineTo( px, py );
    }
}