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…

Published by HorstBaerbel

Software developer by trade and interest, but I venture into the electronics- and diy-world from time to time.

3 thoughts on “Calculate Catmull-Rom splines using forward differencing – UPDATE

  1. Hi,Thanks for sharing this! I've been looking for a solution such as this as I'd like to use it in a small game i'm working on. But, I suck at math. I was wondering if you could tell me what the variable 'points' is referring to. I'm assuming it's a 4×4 matrix. But can you please state how you have it defined in your code?Thanks in advance for any insight you can provide.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website at WordPress.com
Get started
%d bloggers like this: