Free Press

Las curvas de Bézier se utilizan en la infografía para dibujar formas, para la animación de CSS y en muchos otros lugares.

Son una cosa muy sencilla, vale la pena estudiar una vez y luego sentirse cómodo en el mundo de los gráficos vectoriales y las animaciones avanzadas.

Puntos de control

Una curva de Bézier está definida por puntos de control.

Pueden ser 2, 3, 4 o más.

Por ejemplo, curva de dos puntos:

Curva de tres puntos:

Curva de cuatro puntos:

Si te fijas bien en estas curvas, puedes notar inmediatamente:

1. Los puntos no siempre están en la curva. Eso es perfectamente normal, más adelante veremos cómo se construye la curva.

2. El orden de la curva es igual al número de puntos menos uno.Para dos puntos tenemos una curva lineal (que es una línea recta), para tres puntos – curva cuadrática (parabólica), para cuatro puntos – curva cúbica.

3. Una curva siempre está dentro del casco convexo de los puntos de control:

   

Debido a esta última propiedad, en infografía es posible optimizar las pruebas de intersección. Si los cascos convexos no se intersecan, entonces las curvas tampoco lo hacen. Así que comprobar primero la intersección de los cascos convexos puede dar un resultado muy rápido de «no intersección». La comprobación de la intersección de los cascos convexos es mucho más fácil, porque son rectángulos, triángulos y así sucesivamente (ver la imagen de arriba), figuras mucho más simples que la curva.

El principal valor de las curvas de Bézier para el dibujo – moviendo los puntos la curva está cambiando de manera intuitivamente obvia.

Intenta mover los puntos de control con el ratón en el ejemplo siguiente:

Como puedes notar, la curva se estira a lo largo de las líneas tangenciales 1 → 2 y 3 → 4.

Después de un poco de práctica se hace evidente cómo colocar los puntos para obtener la curva necesaria. Y conectando varias curvas podemos obtener prácticamente cualquier cosa.

Aquí tienes algunos ejemplos:

El algoritmo de De Casteljau

Hay una fórmula matemática para las curvas de Bézier, pero vamos a tratarla un poco más adelante, porque el algoritmo de De Casteljau es idéntico a la definición matemática y muestra visualmente cómo se construye.

Primero veamos el ejemplo de los 3 puntos.

Aquí está la demo, y la explicación sigue.

Los puntos de control (1,2 y 3) se pueden mover con el ratón. Pulsa el botón «play» para ejecutarla.

El algoritmo de De Casteljau para construir la curva bezier de 3 puntos:

1. Dibuja los puntos de control. En la demostración anterior están etiquetados: 1, 2, 3.

2. Construye segmentos entre los puntos de control 1 → 2 → 3. En el ejemplo anterior son marrones.

3. El parámetro t pasa de 0 a 1. En el ejemplo anterior se utiliza el paso 0.05: el bucle recorre 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   Para cada uno de estos valores de t:

   • En cada segmento marrón tomamos un punto situado en la distancia proporcional a t desde su inicio. Como hay dos segmentos, tenemos dos puntos.

     Por ejemplo, para t=0 – ambos puntos estarán al principio de los segmentos, y para t=0.25 – en el 25% de la longitud del segmento desde el principio, para t=0.5 – 50%(el medio), para t=1 – en el final de los segmentos.

   • Conecta los puntos. En la imagen de abajo el segmento de conexión está pintado en azul.

Para t=0.25	Para t=0.5

1. Ahora en el segmento azul toma un punto en la distancia proporcional al mismo valor de t. Es decir, para t=0.25 (la imagen de la izquierda) tenemos un punto al final del cuarto izquierdo del segmento, y para t=0.5 (la imagen de la derecha) – en el medio del segmento. En las imágenes superiores ese punto es rojo.

2. Como t va de 0 a 1, cada valor de t añade un punto a la curva. El conjunto de estos puntos forma la curva de Bézier. Es roja y parabólica en las imágenes de arriba.

Ese fue un proceso para 3 puntos. Pero lo mismo es para 4 puntos.

La demostración para 4 puntos (los puntos se pueden mover con un ratón):

El algoritmo para 4 puntos:

• Conecta los puntos de control por segmentos: 1 → 2, 2 → 3, 3 → 4. Habrá 3 segmentos marrones.
• Por cada t en el intervalo de 0 a 1:
  • Tomamos puntos en estos segmentos en la distancia proporcional a t desde el inicio. Estos puntos se conectan, por lo que tenemos dos segmentos verdes.
  • En estos segmentos tomamos puntos proporcionales a t. Obtenemos un segmento azul.
  • Sobre el segmento azul tomamos un punto proporcional a t. En el ejemplo anterior es rojo.
• Estos puntos juntos forman la curva.

El algoritmo es recursivo y se puede generalizar para cualquier número de puntos de control.

Dado N de puntos de control:

1. Los conectamos para obtener inicialmente N-1 segmentos.
2. Después, para cada t desde 0 hasta 1, tomamos un punto de cada segmento en la distancia proporcional a t y los conectamos. Habrá N-2 segmentos.
3. Repite el paso 2 hasta que haya un solo punto.

Estos puntos forman la curva.

Corre y pausa los ejemplos para ver claramente los segmentos y cómo se construye la curva.

Una curva que parece y=1/t:

Los puntos de control en zig-zag también funcionan bien:

Hacer un bucle es posible:

Una curva de Bézier no suave (sí, eso también es posible):

Si hay algo poco claro en la descripción del algoritmo, por favor, mira los ejemplos en vivo de arriba para ver cómo se construye la curva.

Como el algoritmo es recursivo, podemos construir curvas de Bézier de cualquier orden, es decir: usando 5, 6 o más puntos de control. Pero en la práctica muchos puntos son menos útiles. Normalmente tomamos 2-3 puntos, y para líneas complejas pegamos varias curvas. Eso es más sencillo de desarrollar y calcular.

Matemáticas

Una curva de Bézier se puede describir utilizando una fórmula matemática.

Como vimos – en realidad no hay necesidad de conocerla, la mayoría de la gente simplemente dibuja la curva moviendo puntos con un ratón. Pero si te gustan las matemáticas – aquí está.

Dadas las coordenadas de los puntos de control Pi: el primer punto de control tiene coordenadas P1 = (x1, y1), el segundo: P2 = (x2, y2), y así sucesivamente, las coordenadas de la curva son descritas por la ecuación que depende del parámetro t del segmento .

• La fórmula para una curva de 2 puntos:

  P = (1-t)P1 + tP2

• Para 3 puntos de control:

  P = (1−t)2P1 + 2(1−t)tP2 + t2P3

• Para 4 puntos de control:

  P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

Estas son ecuaciones vectoriales. En otras palabras, podemos poner x y y en lugar de P para obtener las coordenadas correspondientes.

Por ejemplo, la curva de 3 puntos está formada por los puntos (x,y) calculados como:

• x = (1−t)2x1 + 2(1−t)tx2 + t2x3
• y = (1−t)2y1 + 2(1−t)ty2 + t2y3

En lugar de x1, y1, x2, y2, x3, y3 debemos poner las coordenadas de 3 puntos de control, y entonces al pasar t de 0 a 1, por cada valor de t tendremos (x,y) de la curva.

Por ejemplo, si los puntos de control son (0,0), (0.5, 1) y (1, 0), las ecuaciones pasan a ser:

• x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t
• y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –2t2 + 2t

Ahora, a medida que t va de 0 a 1, el conjunto de valores (x,y) para cada t forma la curva para dichos puntos de control.

Resumen

Las curvas de Bézier se definen por sus puntos de control.

Vimos dos definiciones de curvas de Bézier:

1. Utilizando un proceso de dibujo: El algoritmo de De Casteljau.
2. Usando una fórmulas matemáticas.

Buenas propiedades de las curvas de Bezier:

• Podemos dibujar líneas suaves con el ratón moviendo los puntos de control.
• Las formas complejas se pueden hacer de varias curvas de Bezier.

Uso:

• En gráficos por ordenador, modelado, editores de gráficos vectoriales. Las fuentes son descritas por las curvas de Bezier.
• En el desarrollo web – para los gráficos en Canvas y en el formato SVG. Por cierto, los ejemplos «en vivo» de arriba están escritos en SVG. En realidad son un solo documento SVG que se da diferentes puntos como parámetros. Se puede abrir en una ventana separada y ver la fuente: demo.SVG.
• En la animación CSS para describir la ruta y la velocidad de la animación.