Las curvas de Bézier convierten interpolaciones lineales encadenadas en trayectorias suaves y controlables. Son esenciales en dibujo vectorial, animación, tipografía, interfaces y movimiento 2D.
Una línea recta queda determinada por dos extremos. Para construir una curva necesitamos además puntos que controlen la dirección y la intensidad con que la trayectoria se aparta del segmento.
Una curva de Bézier interpola los extremos, pero normalmente no pasa por los controles interiores. Estos actúan como imanes que moldean la curva.
El caso de grado uno coincide con la interpolación lineal:
Al variar t se recorre el segmento desde P₀ hasta P₁.
Una Bézier cuadrática usa dos extremos P₀, P₂ y un control P₁:
La curva comienza orientada hacia P₁ y termina llegando desde la dirección P₁→P₂.
La fórmula cuadrática puede construirse mediante tres interpolaciones:
Este algoritmo es geométrico, estable y se generaliza a cualquier grado.
La curva más usada posee extremos P₀ y P₃, y controles P₁ y P₂:
Dos controles permiten ajustar de manera independiente la salida y la llegada.
La derivada de una cúbica es:
En los extremos: B'(0)=3(P₁−P₀) y B'(1)=3(P₃−P₂). Normalizar la derivada produce la dirección de movimiento.
Con la derivada D=(dx,dy), el ángulo visual es:
En pantalla, donde y crece hacia abajo, la fórmula coincide con las coordenadas visuales si la curva también fue definida en ese sistema.
De Casteljau permite dividir una curva en t sin alterar su forma. En una cuadrática, los controles de las dos mitades son:
La subdivisión se usa para recorte, aproximación, edición y renderizado adaptativo.
La longitud de una Bézier general no posee una fórmula elemental sencilla. Se aproxima tomando muestras:
Más muestras mejoran la precisión. La subdivisión adaptativa concentra trabajo donde la curvatura es mayor.
Incrementar t uniformemente no garantiza velocidad espacial constante. En zonas muy curvas o con controles desiguales, distancias iguales de t pueden recorrer longitudes diferentes.
Para velocidad uniforme se construye una tabla que relaciona t con longitud acumulada y luego se busca el t correspondiente a cada distancia.
Para continuidad visual entre dos cúbicas:
Alinear el control anterior, el punto de unión y el control siguiente evita una esquina visible.
Modifica los controles y el parámetro t. Se muestran el polígono de control, las interpolaciones intermedias, la curva y su tangente.
function bezierCuadratica(p0,p1,p2,t) {
const u=1-t;
return {
x:u*u*p0.x+2*u*t*p1.x+t*t*p2.x,
y:u*u*p0.y+2*u*t*p1.y+t*t*p2.y
};
}
const punto=bezierCuadratica(
{x:0,y:0},{x:5,y:8},{x:10,y:0},0.5
);
console.log(punto); // {x:5,y:4}La función calcula directamente los pesos de Bernstein para el valor de t.
function bezierCubica(p0,p1,p2,p3,t) {
const u=1-t;
return {
x:u**3*p0.x+3*u*u*t*p1.x+3*u*t*t*p2.x+t**3*p3.x,
y:u**3*p0.y+3*u*u*t*p1.y+3*u*t*t*p2.y+t**3*p3.y
};
}
function tangenteCubica(p0,p1,p2,p3,t) {
const u=1-t;
return {
x:3*u*u*(p1.x-p0.x)+6*u*t*(p2.x-p1.x)+3*t*t*(p3.x-p2.x),
y:3*u*u*(p1.y-p0.y)+6*u*t*(p2.y-p1.y)+3*t*t*(p3.y-p2.y)
};
}
const puntos=[{x:0,y:0},{x:3,y:7},{x:8,y:-2},{x:12,y:4}];
console.log(bezierCubica(...puntos,0.4));
console.log(tangenteCubica(...puntos,0.4));La tangente puede normalizarse para orientar un sprite o calcular una normal perpendicular.
function bezierCubica(p0,p1,p2,p3,t) {
const u=1-t;
return {
x:u**3*p0.x+3*u*u*t*p1.x+3*u*t*t*p2.x+t**3*p3.x,
y:u**3*p0.y+3*u*u*t*p1.y+3*u*t*t*p2.y+t**3*p3.y
};
}
function longitudAproximada(evaluar,pasos=100) {
let total=0,anterior=evaluar(0);
for(let i=1;i<=pasos;i++) {
const actual=evaluar(i/pasos);
total+=Math.hypot(actual.x-anterior.x,actual.y-anterior.y);
anterior=actual;
}
return total;
}
const evaluar=t=>bezierCubica(
{x:0,y:0},{x:3,y:7},{x:8,y:-2},{x:12,y:4},t
);
console.log("Longitud:",longitudAproximada(evaluar).toFixed(2));El bloque es autocontenido. Aumentar los pasos reduce el error a cambio de más evaluaciones.
Una nave recorre una red formada por dos curvas cúbicas unidas con tangentes alineadas. La orientación sigue la derivada y una estela revela la continuidad.
Las curvas de Bézier aparecen en tipografías, iconos, editores vectoriales, carreteras, cámaras, trayectorias, interfaces, gráficos, pinceles y animación de propiedades.
Recuerda: los extremos pertenecen a la curva, los controles moldean sus tangentes, De Casteljau construye y subdivide, y la derivada proporciona orientación y velocidad paramétrica.
En el próximo tema integraremos estas herramientas en aplicaciones de animación, interfaces y videojuegos 2D.