了解三次插值的实现

穆滕·罗希(Muten Roshi)

我想在JavaScript中实现三次插值,以使用画布绘制曲线。这个想法是在画布上单击以添加点,并且每次更改都会调用一个重绘函数,该函数将为给定的单击点计算要在画布中绘制的点。

我找到了一些例子,例如:

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

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

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

但我不知道如何使用此代码:/

根据这个简单的例子,有4点:

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 );
}

我没有得到的第一个是参数。我有4分,其值在0到1之间。那么我的返回值是多少?还是更好的亩?y0 ... y3仅仅是点或类似y0 [0]的点的y值是x而y0 [1]是y的点吗?我需要的是一种算法,该算法具有一些点和ax值作为参数,返回值应该是y值。

像这样的东西:

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;
}

谁能帮助我理解代码片段并将其用于我的问题?

感谢您的建议!

fang

您发布的链接中的示例代码都是4点或2点和2个导数的三次插值。

“ mu”是您要评估y值的参数。输入y0,y1,y2和y3是4个输入点的y坐标。通过将x0,x1,x2和x3传递给函数,您可以执行相同的操作来评估参数'mu'的x值。

您说过要具有一个将x值作为参数输入并取回y值作为输出的函数。仅当您以显式形式(即y = f(x))表示曲线时,才可能这样做。但是,显式形式不能表示具有相同x值的多个y值的曲线。因此,它们通常不是表示曲线的好方法。参数形式是表示曲线的更好方法。例如,将2D曲线C(t)表示为C(t)=(x(t),y(t))或将3D曲线表示为C(t)=(x(t),y( t),z(t))。用(x(t),y(t))=(r cos(t),r sin(t))表示一个完整的圆是参数形式的一个很好的例子。

如果要绘制连接一系列数据点的平滑曲线,最简单的方法是实现Catmull Rom样条曲线或Overhauser样条曲线。它们都是三次Hermite曲线的特殊形式。此处阅读有关三次Hermite曲线的Wikipedia页面,并转到同一页面中的Catmull Rom样条曲线部分,您将能够知道如何创建对数据点进行插值的Catmull Rom样条曲线,以及如何求值以获取(x,y )值以在画布上绘制样条线。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章