由上一篇文章得到了Cardinal曲线的矩阵表达式，下面就这个矩阵表达式就可以来对曲线进行插值了。
这里选用了JS来实现，完全是因为之前交作业的时候还不知道怎么在Xcode里建完整的C++OpenGL的项目，所以就用js在浏览器这个最大的跨平台UI上写。。
先看之前得到的Cardinal插值的样条曲线的矩阵，对每一段曲线PkPk+1来说，都可以通过拟合一个被参数化为P(u)函数（0<= u <=1）的图形的形式：
，其中
同样，M*P得到的是系数矩阵[a b c d]的转置，s是引入的表示每个连接点处曲线尖锐程度的变量－张量
所以我们现在的期望是
输入：n个控制点的xy轴坐标数组x[],y[]，张量tension，每两个控制点之间插入的密度grain
输出：插值好的样条曲线上控制点的一个数组
1.构造函数 function CSpline(x, y, grain, tension, n)
拥有的成员变量和成员函数：
function CSpline(x, y, grain, tension, n) {
var jd = new Array(100); //用户输入的控制点位置数组，临时变量存储
this.n0=n; //控制点个数
this.m = new Array(16); //Mc矩阵
this.Spline = new Array(1024); //插值好的控制点数组
CSpline.prototype.GetCardinalMatrix = function(a1) {} //通过给定的tension值生成Mc矩阵
CSpline.prototype.Matrix = function(a, b, c, d, u){} //计算P(u)的值，xy分量均相同
CSpline.prototype.CubicSpline = function(np, knots, grain, tension) {} //插值函数
//临时函数，建立曲线控制点数组jd，并调用CubicSpline函数计算插值曲线
function CSpline(x, y, grain, tension, n)
{
for(var i=1; i<=np; i++){
jd[i] = new CPT(x[i-1],y[i-1]); //内部点
}
jd[0] = new CPT(x[0],y[0]); //补上隐含的整条曲线起始点
jd[np+1] = new CPT(x[np-1],y[np-1]); //补上隐含的整条曲线终止点
np=np+2;
this.CubicSpline(np, jd, grain, tension);
}
}
这里成员变量通过构造函数分别在实例中存储，而成员函数则在对应的原型函数中存储。
2.计算Mc矩阵函数GetCardinalMatrix = function(a1)
根据输入的平滑度 tension 值计算Mc矩阵
CSpline.prototype.GetCardinalMatrix = function(a1) {
this.m[0]=-a1; this.m[1]=2.0-a1; this.m[2]=a1-2.; this.m[3]=a1;
this.m[4]=2.*a1; this.m[5]=a1-3.; this.m[8]=-a1; this.m[9]=0.;
this.m[12]=0.; this.m[13]=1.; this.m[6]=3.-2*a1; this.m[7]=-a1;
this.m[10]=a1; this.m[11]=0.; this.m[14]=0.; this.m[15]=0.;
}
这里m是一个4*4的矩阵，a1表示tension值
3.计算P(u)的值
输入4个点Pk-1,Pk,Pk+1,Pk+2的值(x分量或者y分量，以及参数化好的u值)，返回计算得到的P(u)的值
CSpline.prototype.Matrix = function(p0, p1, p2, p3, u){
//求解系数
var a, b, c, d;
a=this.m[0]*p0+this.m[1]*p1+this.m[2]*p2+this.m[3]*p3;
b=this.m[4]*p0+this.m[5]*p1+this.m[6]*p2+this.m[7]*p3;
c=this.m[8]*p0+this.m[9]*p1+this.m[10]*p2+this.m[11]*p3;
d=this.m[12]*p0+this.m[13]*p1+this.m[14]*p2+this.m[15]*p3;
return(d+u*(c+u*(b+u*a))); //au^3+bu^2+cu+d
}
4.主要绘制函数CSpline.prototype.CubicSpline = function(np, knots, grain, tension)
CSpline.prototype.CubicSpline = function(np, knots, grain, tension) {
alpha = new Array(50);
var k0, kml, k1, k2;
//获取Mc矩阵
this.GetCardinalMatrix(tension);
//对每两个关键点之间的插值点进行参数化到0～1之间
for(var i=0; i<grain; i++){
alpha[i]=i*1.0/grain;
}
//从最开始的四个点开始，给第一段曲线插值
kml = 0;
k0 = 1;
k1 = 2;
k2 = 3;
this.s = 0; //纪录总共插值后的点数
//两次循环第一次对输入的控制点遍历，第二次对每两个控制点之间插值，分别计算xy分量上得出的插值后的函数值，k值分别＋1
for(var i =1; i<this.n0; i++){
for(var j=0; j<grain; j++){
cpx = this.Matrix(knots[kml].x, knots[k0].x, knots[k1].x, knots[k2].x, alpha[j]);
cpy = this.Matrix(knots[kml].y, knots[k0].y, knots[k1].y, knots[k2].y, alpha[j]);
this.Spline[this.s] = new CPT(cpx, cpy);
this.s++;
}
kml++; k0++; k1++; k2++;
}
}
最后的结果截图如下：
完整的代码正在上传github。。