CODEWITHSUNDEEP
javascriptalgorithmmathinterpolation
Muten Roshi
Muten Roshi

Reputation: 513

understand implementation of cubic interpolation

I want to implement the cubic interpolation in javascript to draw a curve with canvas. The idea is to click in the canvas to add points and with each change a redraw function is called which calculates the points to draw in the canvas for the given clicked points.

I found some examples for example:

http://snipplr.com/view/727/cubic-interpolation/

http://www.paulinternet.nl/?page=bicubic

http://dzone.com/snippets/cubic-interpolation

But I don't get how to use this code :/

According to this simple example for 4 points:

float cubic_interpolate( float y0, float y1, float y2, float y3, float mu ) {

   float a0, a1, a2, a3, mu2;

   mu2 = mu*mu;
   a0 = y3 - y2 - y0 + y1; //p
   a1 = y0 - y1 - a0;
   a2 = y2 - y0;
   a3 = y1;

   return ( a0*mu*mu2 + a1*mu2 + a2*mu + a3 );
}

First one I don't get are the parameters. I have 4 points and a value between 0 and 1. So what is my return value? Or better what is mu? Are y0 ... y3 just the y-values of the points or points like y0[0] is x and y0[1] is y? What I need is a algorithm which have some points and a x value as parameters and the return value should be the y value.

Something like that:

function calculateCubic( points ){
  var pointsToDraw = [];

  getValue(p1,p2,p3,p4,xCoordinate){
    var yCoordinate;
    yCoordinate = ...
    ...
    return yCoordinate;
  }

  for(var i = 0; i<p.length-3;i++){

    var stepLen = ( p[i+1][0] - p[i][0] ) / 100;
    for( var s = p[i][0]; s <= p[i+1][0] ;s += stepLen ){
        pointsToDraw[pointsToDraw.length] = getValue(p[i],p[i+1],p[i+2],p[i+3],p[i][0]);
    }
  }

  return pointsToDraw;
}

Can anyone help me understanding the code snipets and using them for my problem?

Thanks in advice!

Upvotes: 4

Views: 4984

Answers (3)

fang
fang

Reputation: 3633

The sample codes in the links you posted are all cubic interpolations either from 4 points or from 2 points and 2 derivatives.

The 'mu' is the parameter at which you want to evaluate the y value. The input y0, y1,y2 and y3 are the y coordinates of the 4 input points. You can do the same to evaluate x value at parameter 'mu' by passing x0, x1, x2 and x3 to the function.

You said you want to have a function that will take x value as parameter input and get back y value as output. This is only possible when you represent your curve in the explicit form, i.e., y=f(x). However, explicit form is not capable of representing curves with multiple y values with the same x value. So, they are not good ways of representing curves in general. Parametric form is a better way of representing a curve. For example, a 2D curve C(t) is represented as C(t) = (x(t), y(t)) or a 3D curve can be represented as C(t)=(x(t), y(t), z(t)). Representing a full circle as (x(t), y(t))=(rcos(t),rsin(t)) is a good example of parametric form.

If you want to draw a smooth curve connecting a series of data points, the easiest way is to implement the Catmull Rom spline or Overhauser spline. Both of them are special form of cubic Hermite curve. Read the Wikipedia page about cubic Hermite curve here and go to the Catmull Rom spline section within the same page and you shall be able to know how to create a Catmull Rom spline interpolating the data points and how to evaluate it to get (x, y) value to draw the spline in your canvas.

Upvotes: 4

Salix alba
Salix alba

Reputation: 7824

mu is the parameter giving the position along the curve. To draw a set of 10 points on the curve use the same values of y0, y1, y2, y3 and values of mu 0, 0.1, 0.2, 0.3, ... 1.0.

To understand the y values here see what happens when we put mu=0 and mu=1 into the function. With mu=0 the function returns y1. With mu=1 the function returns y2. We see this sort of spline goes through the middle two control points.

As Mark say this is not the easiest spline to use. You are better using bezier splines. A really good page on them is http://pomax.github.io/bezierinfo/. There is also a bezierCurveTo function in the javascript canvas which makes them easy to use API doc.

Upvotes: 2

mark tanner
mark tanner

Reputation: 21

it looks like the code does cubic interpolation on a set of data points, what is returned is a Catmull-Rom spline.

you may be better off using a Bezier Spline, in my opinion it is far simpler to implement.

Upvotes: 0

Related Questions