Curva de Bézier

Las curvas de Bézier se utilizan en gráficos por ordenador para dibujar formas, para animación CSS y en muchos otros lugares.

En realidad, son algo muy sencillo, vale la pena estudiarlos 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.

Puede haber 2, 3, 4 o más.

Por ejemplo, curva de dos puntos:

Curva de tres puntos:

Curva de cuatro puntos:

Si observas detenidamente estas curvas, puedes notar inmediatamente que:

1. Los puntos no siempre están en la curva. Eso es perfectamente normal, luego 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 esa última propiedad, en gráficos por ordenador es posible optimizar las pruebas de intersección. Si los cascos convexos no se intersecan, las curvas tampoco. Por tanto, comprobar primero la intersección de los cascos convexos puede dar un resultado “sin intersección” muy rápido. La comprobación de la intersección o los cascos convexos es mucho más fácil, porque son rectángulos, triángulos, etc. (vea la imagen de arriba), figuras mucho más simples que la curva.

El valor principal de las curvas de Bézier para dibujar: al mover los puntos, la curva cambia de manera intuitiva.

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

Como puedes observar, la curva se extiende a lo largo de las lineas tangenciales 1 → 2 y 3 → 4.

Después de algo de práctica, se vuelve obvio cómo colocar puntos para obtener la curva necesaria. Y al conectar varias curvas podemos obtener prácticamente cualquier cosa.

Aquí tenemos algunos ejemplos:

Algoritmo de De Casteljau

Hay una fórmula matemática para las curvas de Bézier, pero la veremos un poco más tarde, 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 demostración, y la explicación a continuación.

Los puntos de control (1,2 y 3) se pueden mover con el ratón. Presiona el botón “play” para ejecutarlo.

El algoritmo de De Casteljau para construir la curva de Bézier de 3 puntos:

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

2. Construir segmentos entre los puntos de control 1 → 2 → 3. En la demo anterior son marrones.

3. El parámetro t se mueve de 0 a 1. En el ejemplo de arriba se usa el paso 0.05: el bucle pasa por 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 ubicado en la distancia proporcional a t desde su comienzo. Como hay dos segmentos, tenemos dos puntos.

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

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

Para t=0.25	Para t=0.5

4. 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 la mitad del segmento. En las imágenes de arriba ese punto es rojo.

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

Este fue el proceso para 3 puntos. Sería lo mismo para 4 puntos.

La demo para 4 puntos (los puntos se pueden mover con el ratón):

El algoritmo para 4 puntos:

• Conectar puntos de control por segmentos: 1 → 2, 2 → 3, 3 → 4. Habrá 3 segmentos marrones.
• Para cada t en el intervalo de 0 a 1:
  • Tomamos puntos en estos segmentos en la distancia proporcional a t desde el principio. Estos puntos están conectados, por lo que tenemos dos segmentos verdes.
  • En estos segmentos tomamos puntos proporcionales a t. Obtenemos un segmento azul.
  • En 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.

Dados N de puntos de control:

1. Los conectamos para obtener inicialmente N-1 segmentos.
2. Entonces, para cada t de 0 a 1, tomamos un punto en cada segmento en la distancia proporcional a t y los conectamos. Habrá N-2 segmentos.
3. Repetimos el paso 2 hasta que solo quede un punto.

Estos puntos forman la curva.

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

Una curva que se parece a y=1/t:

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

Es posible hacer un bucle:

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

Si hay algo que no está claro en la descripción del algoritmo, los ejemplos en vivo de arriba muestran 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. Por lo general, tomamos 2-3 puntos, y para líneas complejas pegamos varias curvas juntas. Eso es más simple de desarrollar y calcular.

Matemáticas

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

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

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

• 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 las ecuaciones vectoriales. En otras palabras, podemos poner x e y en lugar de P para obtener las coordenadas correspondientes.

Por ejemplo, la curva de 3 puntos está formada por 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 deberíamos poner coordenadas de 3 puntos de control, y luego a medida que te t se mueve de 0 a 1, para 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 se convierten en:

• 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 como t se ejecuta desde 0 a 1, el conjunto de valores (x,y) para cada t forman 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. Utilizando una fórmula matemática.

Buenas propiedades de las curvas de Bezier:

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

Uso:

• En gráficos por ordenador, modelado, editores gráficos vectoriales. Las fuentes están descritas por curvas de Bézier.
• En desarrollo web – para gráficos en Canvas y en formato SVG. Por cierto, los ejemplos “en vivo” de arriba están escritos en SVG. En realidad, son un solo documento SVG que recibe diferentes puntos como parámetros. Puede abrirlo en una ventana separada y ver el código fuente: demo.svg.
• En animación CSS para describir la trayectoria y la velocidad de la animación.