베지어 구성하기

파스칼 삼각형을 이용하여 차수에 대한 계수를 구할수 있습니다.
0 ~ 1사이 값으로 t라는 값을 설정하고 1-t 의 값을 tRes라고 설정합니다.
다음은 tRes 와 t의 값을 차수에 따라 교차계산해 값을 구합니다.

예제는 다음과 같습니다.

getPascalTriangleRecursive : function(nDegree,orgArray) {
var result = null;
if (orgArray == null || nDegree < 0) {
return result;
}
var size = orgArray.length;
result = [];
result.push(1);
for ( var i = 1; i < size; i++ ) {
result.push(orgArray[i-1]+orgArray[i]);
}
result.push(1);
if ( size < nDegree ) {
return this.getPascalTriangleRecursive(nDegree,result);
} else {
return result;
}
},
getPascalTriangle : function(nDegree) {
var result = null;
if (nDegree < 0) {
return result;
}
result = [];
if ( nDegree < 2 ) {
for ( var i = 0; i <= nDegree; i++ ) {
result.push(1);
}
return result;
}
for ( var i = 0; i <= 1; i++ ) {
result.push(1);
}

return this.getPascalTriangleRecursive(nDegree,result);
},

getBezierCoef : function(nDegree,t) {
var result = [];
var tRes = (1.0-t);
var pascalArray = this.getPascalTriangle(nDegree);
for ( var i = nDegree; i >=0; i-- ){
var j = nDegree-i;
result.push(Math.pow(tRes,i)*Math.pow(t,j));
}
return result;
}

위의 예에서 구성한데로 계수가 구해지면 t 와 tRes 관계를 차수에 해당하는
위치에서 승수를 구해 각각을 곱해준 값을 더하면 해당 t의 베지어 값을 확일 할 수 있습니다

아래는 호출한 영역입니다.

this.drawBezierLine = function(ownerObj,xArray,yArray) {
// error handler -- check args ...
var nDegree = xArray.length-1;
var minX = xArray[0];
var maxX = xArray[0];
// check x order ... skip
for ( var i = 1; i <= nDegree; i++ ) {
if ( minX > xArray[i] ) {
minX = xArray[i];
}
if ( maxX < xArray[i] ) {
maxX = xArray[i];
}
}

var gap = maxX-minX;
var bx = -1;
var by = -1;
var pArray = getPascalTriangle(nDegree);
//alert( pArray + " : " + gap );

for ( var x = 0; x <= gap; x++ ) {
var t = (x/gap);
var bArray = getBezierCoef(nDegree,t);
//alert ( bArray );
var tX = 0.0;
var tY = 0.0;
for ( var i = 0; i <= nDegree; i++ ) {
var calc = pArray[i]*bArray[i];
tX += xArray[i]*calc;
tY += yArray[i]*calc;
}
if ( x == 0 ) {
bx = tX;
by = tY;
} else {
this.drawLine(ownerObj,bx,by,tX,tY,5,"#000080");
//alert ( bx + ":" + by + " : " + tX + " : " + tY );
bx = tX;
by = tY;
}

if ( x % 100 == 0){
//alert ( bArray + "\n" + bx + " : "+ by );
}
}

....


var xArray = [];
var yArray = [];
xArray.push(100);
yArray.push(100);
xArray.push(200);
yArray.push(250);

xArray.push(300);
yArray.push(50);

xArray.push(400);
yArray.push(100);

graphicObj.drawBezierLine(document.body,xArray,yArray);
for ( var i = 0; i < xArray.length ; i++){
graphicObj.drawPoint(document.body,xArray[i],yArray[i],10,10,"#FF0000");
}