Dados dos puntos, hay infinitos tipos de funciones y formulas para llegar de un punto a otro. Partiendo de una recta, esta se podria “curvar” en todas direcciones y formas.
En aplicaciones practicas, como arquitectura, diseño grafico, diseñno industrial, siempre se necesito definir objetos, trayectorias, perimetros, etc. Estas formas luego debian poder ser luego reproducidas (armadas, construidas, impresas, etc). El problema es que era muy complejo decir “esta curvatura quiero representarla con una funcion cuadratica, esta otra con una exponencial, etc”. Un ilustrador con un pulso maravilloso podria dibujar exactamente lo que tenia en la cabeza, pero luego no podia traducirse exactamente a un objeto fisico, un diseño etc.

Para solucionar este problema, Pierre Bézier decidio crear las curvas que llevan su nombre.

(Pierre claramente se inspiro en su Jopo.)

Estas curvas no se basan en formulas cartesianas sino en el concepto de interpolacion. Asumo que la mayoria que esta leyendo esto sabe lo que es la interpolacion lineal, pero hago un mini repasito.

Interpolacion: Si hay 2 puntos en un espacio N-dimensional (o sea que funciona para, 1D,2D,3D .. infinto-D), y esos dos puntos son A y B, es posible obtener cualquier posicion dentro del segmento que une a A y B usando la siguiente formula, donde c=0 es A y c=1 es B:

f=(1.0-c)*A + c*B;

o mas simple

f=A+(B-A)*c;

La interpolacion es una de las herramientas mas basicas y utiles del programador de videojuegos. Se usan tanto para dibujar (lineas y otras cosas), como para animar, haciendo transiciones en el tiempo (el tiempo altera el valor c).

Bueno, volviendo a Pierre. Sus curvas son super sencillas de entender e implementar, se pueden ajustar a cualquier otra curva (hasta un grado relativo de complejidad) y consisten en interpolar recursivamente N puntos (o sea, funciona para 2 puntos, 3 puntos, 4 puntos, etc, pero en general solo se usa con 3 y 4 puntos).

Por ejemplo, si tenemos 3 puntos A, B y C. y una magnitud “c”, donde al igual que en la interpolacion lineal, c=0 es A (el primer punto) y C=1 es C (el ultimo punto).  Primero se interpola AB usando c como magnitud, luego BC, tambien usando c como magnitud y luego el resultado de interpolar AB y BC, tambien usando c como magnitud. Esta animacion se entiende mejor que lo que escribi de cualquier forma:

Simple no? Las curvas de bezier con 3 puntos se llaman “Curva Cuadratica de Bezier”.

Pero la que mas se usa, y la que mas ven en todos en todos lados no es la de 3 puntos sino la de 4, la “Curva Cubica de Bezier”.

Pero esa no es la forma mas comun de representarlas, sino esta (como Photoshop, Illustrator, Flash, etc):

Los dos puntos del medio, (BC de ABCD), se los denomina puntos de control, y moviendolos es muy facil ajustar a mano la forma de la curva. Si  ABCD son colineares (se ponen todos en una recta) , la curva se como una linea, y sino cuanto mas grande la distancia de A a B, o de D a C, mas se “estira” la curva en esa direccion.

Es por esto que las curvas de Bezier son tan populares, son muy simples de representar matematicamente (4 puntos en cualquier dimension), y sobre todo, muy faciles de editar por esos entes hippies que no distinguen entre una ecuacion y los ruleros de su hermana a los que llamamos artistas.
Otra propiedad muy interesante es que si concatenamos varias curvas, y los puntos de control de entrada y salida de cada punto son colineales (todos en la misma recta), la curva se continua suavemente al proximo segmento. De esta forma, utilizando varias curvas de bezier concatenadas, se puede obtener casi cualquier curva con tan solo unos pocos puntitos.

Dibujandolas:

Lamentablemente, la simplicidad de las curvas de Bezier termina ahi, y aca es donde se vuelve mas complicado.
Dibujarlas no es tan facil! Uno ve como flash dibuja curvas y piensa que es una boludez, pero eso esta lejos de la realidad.

La funcion de una cubica es facil:

// template para usar bezier en N dimensiones
//se ve complicado, pero es la simplificacion matematica de hacer 3 interpolaciones, luego 2 y luego 1.
template<class T>
T cubic_bezier_interp(real_t t, T start, T control_1, T control_2, T end) {

real_t omt = (1.0 – t);
real_t omt2 = omt*omt;
real_t omt3 = omt2*omt;
real_t t2 = t*t;
real_t t3 = t2*t;

return start * omt3
+ control_1 * omt2 * t * 3.0
+ control_2 * omt  * t2 * 3.0
+ end * t3;
}

Uno pensaria que para dibujarla, hay que dividirla en pedacitos y recorrerla, asi:

segmentos=10

for(i=0;i<segmentos-1;i++) {
a=bezier( t/10.0, puntos[i].pos, puntos[i].pos + puntos[i].out, puntos[i+1].pos + puntos[i+1].in )
b=bezier( (t+1)/10.0, puntos[i].pos, puntos[i].pos + puntos[i].out, puntos[i+1].pos + puntos[i+1].in )

draw_line(a,b)
}

Pero esto no funciona! se ve toda poligonosa, entonces usamos mas pedacitos, pero se sigue viendo poligonosa cuando se estira.. horrible!!

El problema con las curvas de bezier, es que cuanto mas grande es el vector entre un punto y su punto de control, mas se “estira” la formula. En la practica esto resulta en que por mas que uno haga un muestreo de N puntos, las distancias entre los puntos no es la misma, sino que donde mas se estira la curva mas distancia hay entre las muestras, y donde menos se estira hay menos. Por esto subdividirla en intervalos constantes no funciona para dibujarla.

Hay varias formas de dibujar una curva bezier mas correctamente, pero los metodos que mejor funcionan son los que subdividen la curva recursivamente buscando que el angulo entre dos segmentos sea menor a uno predefinido.  Ejemplo con pseudocodigo:

void bake_bezier(Map<float,Vector3>& r_bake, float p_begin, float p_end,vec3 p_a,vec3 p_out,vec3 p_b, vec3 p_in,int p_depth) {

float mp = p_begin+(p_end-p_begin)*0.5;
vec3 beg = bezier(p_begin,p_a,p_a+p_out,p_b+p_in,p_b);
vec3 mid = bezier(mp,p_a,p_a+p_out,p_b+p_in,p_b);
vec3 end = bezier(p_end,p_a,p_a+p_out,p_b+p_in,p_b);

Vector3 na = (mid-beg).normalized();
Vector3 nb = (end-mid).normalized();
float dp = na.dot(nb); // dot product

if (dp<cos(deg2rad(TOLERANCE))) {
//tolerance es un angulo entre dos segmentos, si en algulo es menor
add_point(mid)
}

if (p_depth<MAX_DEPTH) {
bake_bezier(r_bake,p_begin,mp,p_a,p_out,p_b,p_in,p_depth+1);
bake_bezier(r_bake,mp,p_end,p_a,p_out,p_b,p_in,p_depth+1);
}
}

Y si estan dibujando una forma cerrada con curvas, esto es solo el principio, una vez subdividida se suelen usar algoritmos como ear-clipping para transformar todo a triangulos y llenarlo:
http://en.wikipedia.org/wiki/Polygon_triangulation

Pero los resultados valen la pena!

La PSP puede dibuajar curvas y poligonos bezier enteros por hardware. Las PCs recien hace poco tienen APIs estandarizadas disponibles para hacerlo, por eso siempre fue mas lento y no se vieron tantos juegos asi (Flash dibuja todo por software).

Recorriendolas:

Si dibujarlas es complicado, recorrerlas es todavia mas complicado. En muchos casos queremos recorrer una curva de bezier, como por ejemplo una montaña rusa, usarlo como guia para un juego de autos, o simplemente una trayectoria para una camara.

Uno pensaria que es simplemente llamar a la funcion bezier() incrementando el parametro t (tiempo) en cada frame, pero esto no funciona porque, por lo mismo que no podemos subdividirla en puntos equidistantes para dibujar, el recorrido tampoco se va a poder hacer a velocidad constante.

Reparametrizacion:

Una regla implicita en las curvas de bezier, asi como en otro tipo de interpolaciones cubicas (como hermite, spline, catmull rom, etc), es que si los segmentos AB, BC y CD estan a la misma distancia, la velocidad de recorrido es constante. Hay varios papers que explican como hacer “recrear” las curvas moviendo y reordenando los puntos para obtener una simulacion mucho mas adecuada. Tambien hay otros papers que explican como transformar los beziers cubicos a varios cuadraticos, que son mas faciles de interpolar.

Muestreo Uniforme Aproximado:

La formula mas comun de hacer esto es, usando la misma regla que en el punto anterior, convertir la curva de multiples beziers a un un poligono hecho de puntos equidistantes. Esto es relativamente facil y funciona en la mayoria de los casos, y tiene la ventaja de que hacer la interpolacion es O(1).

1) Se considera una distancia para los puntos, en este caso por ejemplo 0.1 (s)
2) Se recorren los puntos de control, por cada punto y el proximo, nos fijamos la distancia (d)
3) Esa distancia se convierte a una magnitud 0-1, haciendo m=s/d. Si la division da >1, forzamos 1.
4) La logica es que la curva nunca va a ser mas chica que la recta entre los dos puntos.
5) Se usa busqueda binaria para aproximar el proximo lugar en la curva avanzando entre cada segmento m.
6) Algunas curvas pueden estar muy deformadas, por lo cual siempre se puede dividir m un poco mas para tener mejores resultados, pero no influye mucho.

Con los puntos equidistantes, se puede usar una interpolacion cubica (catmull rom es la que mas me gusta) para recorrerlos, y el resultado queda perfecto, indistinguible.

Buscando el punto mas cercano.

En muchos casos, las curvas de Bezier se utilizan como rieles de camara, para lo cual hay un objetivo (el personaje tiene el objetivo) y la camara debera situarse en el lugar mas cercano de la curva y el objetivo.  Juegos como God of War o Mario Galaxy usan muchisimo este recurso.

Lo mas simple es usar un algoritmo K D-Tree, luego del paso anterior usado para recorrer, para encontrar el punto mas cercano al objetivo. Este algoritmo permite encontrar el punto (de un set finito) a cualquier posicion muy rapidamente. Luego de encontrarlo, se puede hacer una busqueda binaria de ese punto al proximo y al anterior para encontrar la posicion mas cercana, haciendo interpolacion cubica.

Our team has produced several engines and tools for different games, and also modified existing engine technologies to suit the requirements of the most creative-challenging designers.

Despite our strength in technology, we also like taking advantage of our experience for developing games and have produced several titles for publishers based on existing or original IPs, either using internal teams or working with qualified partners.

For more information, please visit the services section.