Design a site like this with WordPress.com

# Calculate Catmull-Rom splines using forward differencing – UPDATE

I finally had the time to finish this post by whipping up a small JavaScript canvas example to show forward differencing in action. Not much to see there, actually, other than that the regularly drawn spline and the one drawn with forward differencing look the same. Here’s the part of the code that does the forward differencing calculation for one section of the spline:

```ctx.moveTo(points[1][0], points[1][1]);
// calculate values at point a and b
var ax = points[3][0] - 3.0 * points[2][0] + 3.0 * points[1][0] - points[0][0];
var ay = points[3][1] - 3.0 * points[2][1] + 3.0 * points[1][1] - points[0][1];
var bx = 2.0 * points[0][0] - 5.0 * points[1][0] + 4.0 * points[2][0] - points[3][0];
var by = 2.0 * points[0][1] - 5.0 * points[1][1] + 4.0 * points[2][1] - points[3][1];
// calculate 1st, 2nd, 3rd derivative between a and b
var stepsize = 1.0 / subdivision;
var stepsize2 = stepsize * stepsize;
var stepsize3 = stepsize * stepsize2;
var dx =  0.5 * stepsize3 * ax + 0.5 * stepsize2 * bx + 0.5 * stepsize * (points[2][0] - points[0][0]);
var dy =  0.5 * stepsize3 * ay + 0.5 * stepsize2 * by + 0.5 * stepsize * (points[2][1] - points[0][1]);
var d2x = 3.0 * stepsize3 * ax +       stepsize2 * bx;
var d2y = 3.0 * stepsize3 * ay +       stepsize2 * by;
var d3x = 3.0 * stepsize3 * ax;
var d3y = 3.0 * stepsize3 * ay;
// calculate points while updating derivatives
var px = points[1][0];
var py = points[1][1];
for (var j = 0; j < subdivision; j++) {
px += dx; dx += d2x; d2x += d3x;
py += dy; dy += d2y; d2y += d3y;
ctx.lineTo(px, py);
}
```

A nice addition would be to do adaptive subdivision of the spline, depending on curvature, but I haven’t gotten that right yet…