viernes, 29 de enero de 2016
Curva bezier y ruta de curvas.
Una curva bezier es aquella que se construye a través de cuatro puntos, usando los puntos primero y último como orillas de la curva y los pontos intermedios como controladores de la misma.
Primero presento el constructor de la curva bezier que luego nos devolverá la posición de un punto dentro de la curva según un tiempo que le pasemos (es decir, un tiempo que va de 0 a 1 que sirva como puntero). La he tomado de la siguiente página: http://www.13thparallel.org/archive/bezier-curves/
function fnBizier(pA,cA,cB,pB){
var B=[
function(x){ return x*x*x; },
function(x){ return 3*x*x*(1-x); },
function(x){ var x1=(1-x); return 3*x*x1*x1; },
function(x){ var x1=(1-x); return x1*x1*x1; }
],
C=[pA,cA,cB,pB],
Ax=3*(C[0][0] - 3*C[1][0] + 3*C[2][0] - C[3][0]),
Bx=2*(3*C[1][0] - 6*C[2][0] + 3*C[3][0]),
Cx=(3*C[2][0] - 3*C[3][0]),
Ay=3*(C[0][1] - 3*C[1][1] + 3*C[2][1] - C[3][1]),
By=2*(3*C[1][1] - 6*C[2][1] + 3*C[3][1]),
Cy=(3*C[2][1] - 3*C[3][1]),
getPoint=function(t){
var B0=B[0](t),
B1=B[1](t),
B2=B[2](t),
B3=B[3](t),
x = pA[0]*B0 + cA[0]*B1 + cB[0]*B2 + pB[0]*B3,
y = pA[1]*B0 + cA[1]*B1 + cB[1]*B2 + pB[1]*B3,
t2=t*t,
mx= t2*Ax + t*Bx + Cx,
my= t2*Ay + t*By + Cy;
return [x,y,t,mx,my];
};
return getPoint;
}
y se usa por ejemplo. Le paso cuatro coordenadas: punto A, controlador A, controlador B, punto B.
fnGetPoint=fnBizier([0,0],[1,2],[3,1],[3,0]);
for(i=0; i<1; i+=0.1) console.log(fnGetPoint(i));
Una vez teniendo esto es fácil crear un caminito, una ruta construida con segmentos bezier.
Enseguida muestro un constructor que une varias curvas y devuelve la posición del punto según un tiempo dado. Donde, por ejemplo, el segmento 1 está entre el tiempo 0 y 1, el 2 entre el 1 y el 2, el n, entre el n-1 y el n;
function bizierPath(){
var pointsPath=[], i,j,k;
for(i=0; i<arguments.length; i++)
if(arguments[i] instanceof Array) pointsPath.push(arguments[i]);
if(pointsPath.length>3 && (pointsPath.length-4)%3!=0 ) return false;
var eqBizier=[];
for(i=0, j=~~(pointsPath.length/3); i<j; i++)
eqBizier.push(fnBizier(
pointsPath[k=i*3],
pointsPath[k+1],
pointsPath[k+2],
pointsPath[k+3]));
this.getPoints=function(time){
i=~~time, j=time-i;
if(time<0 || ~~i>=~~(pointsPath.length/3)) return false;
return eqBizier[i](j);
}
}
y se usa por ejemplo. Le paso ocho coordenadas, correspondientes a dos curvas, cuatro por curva.
b=new bizierPath([0,0],[1,2],[2,-1],[3,0],[5,2],[6,1],[6,0]);
for(var i=0;i<=2;i+=0.1) console.log(b.getPoints(i));
Puedo pasárle cantas curvas necesite, en este caso use dos pero podrían ser 12 parámetros para 3 curvas o 28 parámetros para 7 curvas.
Desarrollado por
Cincibeles
a las
5:21 p.m.

Enviar esto por correo electrónicoBlogThis!Compartir en XCompartir en FacebookCompartir en Pinterest
Las Etiquetas:
biziér,
funciones,
JavaScript,
Matemáticas
Suscribirse a:
Comentarios de la entrada (Atom)
No hay comentarios.:
Publicar un comentario