Las curvas de Bézier son una de las herramientas más comunes para dibujar trayectorias suaves en gráficos por computadora, movimiento en interfaces de usuario, ilustración vectorial y renderizado de tipografías. Incluso cuando una curva parece hecha a mano alzada, muchos sistemas la representan con un pequeño conjunto de puntos de control y una ecuación determinista. Esto hace que las curvas de Bézier sean a la vez expresivas y confiables: artistas e ingenieros pueden dar forma al movimiento y la geometría con solo unos pocos valores.

Este artículo desarrolla una comprensión práctica desde lo más básico. Comenzarás con el caso cuadrático, conectarás la ubicación de los manejadores con la dirección tangente, compararás directamente el comportamiento de los manejadores cuadrático y cúbico, y luego inspeccionarás cómo el algoritmo de De Casteljau calcula puntos en cualquier tipo de curva. Antes de entrar en notación, comienza con el comportamiento básico: un manejador móvil cambia una curva suave entre dos puntos fijos.

Arrastra el manejador azul para reformar la curva mientras los dos puntos oscuros permanecen fijos. El polígono de control punteado muestra la estructura lineal que guía la trayectoria suave. Mover el manejador más lejos del segmento extremo crea un arco más pronunciado, mientras que acercarlo aplana la curva.

Puntos de Control de las Curvas de Bézier

Una curva de Bézier se define mediante puntos de control. La curva comienza en el primer punto de control y termina en el último punto de control. Los puntos intermedios generalmente no están sobre la curva. En cambio, tiran de la dirección de la curva y de cuánto se dobla. Las curvas de Bézier vienen en varias formas, pero este artículo se centra en las más comunes: las curvas de Bézier polinómicas. En esa familia, la cantidad de puntos de control determina el grado de la curva. El polígono de control es la secuencia de segmentos rectos que conectan esos puntos. No es la curva renderizada, pero es la forma más fácil de leer cómo la curva saldrá del punto inicial, se doblará en el interior y llegará al punto final.

Los casos más comunes son las curvas de Bézier cuadráticas y cúbicas. Para una curva de Bézier cuadrática, hay tres puntos:

• $P_0$: punto inicial
• $P_1$: punto de control
• $P_2$: punto final

Para una curva de Bézier cúbica, hay cuatro puntos:

• $P_0$: punto inicial
• $P_1$: primer manejador
• $P_2$: segundo manejador
• $P_3$: punto final

Esos puntos de control interiores suelen actuar como manejadores en lugar de puntos por los que la curva debe pasar. Mover un manejador cambia la dirección tangente y la fuerza del curvado mientras los puntos finales permanecen fijos. Esa es la razón práctica por la que las curvas de Bézier son útiles en herramientas de dibujo, trayectorias de animación y tipografías: un conjunto pequeño de puntos proporciona una geometría suave y predecible.

Fórmula de la Curva de Bézier Cuadrática

Una curva de Bézier cuadrática utiliza tres puntos de control y un parámetro $t$. La fórmula utiliza un parámetro $t$ de $0$ a $1$:

$$B(t) = (1 - t)^2 P_0 + 2(1 - t)t P_1 + t^2 P_2$$

Puedes interpretar esto como una combinación ponderada de puntos. En $t = 0$, todo el peso está en $P_0$, así que el punto de la curva está al inicio. En $t = 1$, todo el peso está en $P_2$, así que el punto de la curva está al final. Entre ellos, el peso se desplaza suavemente y produce una trayectoria continua.

Ese comportamiento suave proviene del hecho de que los pesos son polinomios en $t$. A medida que $t$ cambia, el punto en la curva se mueve continuamente en lugar de saltar de una ubicación a otra.

Exploración de la Forma Cuadrática

Vale la pena volver a visitar la misma curva editable ahora que las etiquetas de los puntos tienen significado. Esta es la forma de Bézier más simple: dos puntos finales fijos y un punto de control móvil. La curva comienza en $P_0$, termina en $P_2$ y se dobla hacia $P_1$. A medida que el manejador azul $P_1$ se mueve, el polígono de control muestra el andamio lineal mientras la curva muestra el resultado suavizado. Alejar $P_1$ del segmento de $P_0$ a $P_2$ hace que la trayectoria se arquee fuertemente; acercarlo a ese segmento aplana la curva sin mover ninguno de los puntos finales.

La curva generalmente no pasa por $P_1$. En cambio, los dos segmentos conectados a $P_1$ establecen las direcciones al inicio y al final de la curva. Mover el manejador por lo tanto cambia tanto la cantidad de curvatura como la forma en que la curva sale de $P_0$ y llega a $P_2$. Es por esto que las curvas de Bézier son útiles: puedes dirigir la forma indirectamente y mantener la suavidad. Esas mismas ideas también llevan a propiedades formales como la contención en el casco convexo y la invariancia afín, que las notas de construcción de Michigan Tech explican con más detalle.

Fórmula de la Curva de Bézier Cúbica

La mayoría de las herramientas de diseño y web prefieren las curvas de Bézier cúbicas. Una cúbica tiene cuatro puntos de control:

• $P_0$: inicio
• $P_1$: primer manejador
• $P_2$: segundo manejador
• $P_3$: final

Su ecuación es:

$$B(t) = (1 - t)^3 P_0 + 3(1 - t)^2 t P_1 + 3(1 - t)t^2 P_2 + t^3 P_3$$

Comparada con la cuadrática, la cúbica añade un manejador más y mucho más control de la forma. Puedes crear curvas en S, transiciones suaves o giros pronunciados sin necesidad de encadenar múltiples segmentos prematuramente. Esa libertad adicional también introduce comportamientos que las curvas cuadráticas no pueden expresar, incluyendo puntos de inflexión y, en algunas disposiciones de puntos de control, formas similares a cúspides o auto-intersecciones.

La vista comparativa hace visible el manejador cúbico adicional como una diferencia de control, no solo como una ecuación de grado superior. En el panel cuadrático, arrastrar el único manejador interior cambia todo el arco y acopla las direcciones tangentes de inicio y fin. En el panel cúbico, mover $P_1$ cambia principalmente la salida de $P_0$, mientras que mover $P_2$ cambia principalmente la llegada a $P_3$. El control deslizante Posición de muestra conecta ese comportamiento geométrico con los pesos base: tres pesos cuadráticos se intercambian a lo largo del tramo, mientras que cuatro pesos cúbicos se superponen y le dan al interior de la curva más libertad.

Mover los dos manejadores cúbicos a lados opuestos de la cuerda de $P_0$ a $P_3$ muestra el beneficio práctico. Los puntos finales permanecen fijos, pero la curva puede desarrollar una forma de S porque los dos manejadores dirigen diferentes partes del segmento. Las curvas cuadráticas son más simples y a menudo suficientes para un solo arco curvado, mientras que las curvas cúbicas te permiten ajustar la salida y la llegada de forma más independiente. Ese comportamiento local del manejador es la razón por la que los editores vectoriales exponen manejadores de tangente para los anclajes. Cada segmento se puede ajustar sin volver a dibujar toda la trayectoria manualmente. Si quieres profundizar en estos cambios cualitativos de forma cúbica, Pomax cubre las inflexiones y clasificaciones con más profundidad, y el informe de Berkeley sobre detección de cúspides y puntos de inflexión en curvas muestra cómo esas características se derivan de la estructura de las derivadas y no de peculiaridades del editor. Si quieres ver la misma idea de curva extendida al espacio, el artículo complementario sobre visualización de curvas de Bézier 3D y construcción de De Casteljau muestra cómo se comportan el polígono de control, la trayectoria muestreada y la escalera de interpolación bajo la rotación de la cámara.

Tangentes y Dirección del Movimiento

Las curvas de Bézier se usan a menudo para trayectorias de movimiento, no solo para dibujos estáticos. La vista de manejadores cúbicos anterior hace que la idea de la tangente en los puntos finales sea fácil de ver. En animación, la dirección tangente local importa porque te dice hacia dónde se mueve un objeto en ese instante.

Para una curva cúbica, la derivada es:

$$B'(t) = 3(1 - t)^2 (P_1 - P_0) + 6(1 - t)t (P_2 - P_1) + 3t^2 (P_3 - P_2)$$

De esto se derivan dos hechos prácticos:

• Al inicio ($t = 0$), la dirección se alinea con $P_1 - P_0$.
• Al final ($t = 1$), la dirección se alinea con $P_3 - P_2$.

Es por esto que mover los dos puntos de control interiores cambia cómo la curva sale y se acerca a los puntos finales. En los editores vectoriales y de trayectorias de movimiento, esas direcciones tangentes se exponen como manejadores de dirección en los puntos finales, de modo que arrastrarlos cambia cómo la trayectoria sale y llega.

Cuando el movimiento debe sentirse natural, la geometría de la trayectoria por sí sola no es suficiente. También necesitas una función de temporización para cómo $t$ cambia con el tiempo. Una trayectoria puede ser suave mientras la velocidad aún se siente brusca si la progresión del parámetro no está suavizada.

Algoritmo de De Casteljau

Las ecuaciones polinómicas son compactas, pero hay otra forma de evaluar curvas de Bézier tanto cuadráticas como cúbicas: el algoritmo de De Casteljau. Calcula un punto en la curva usando interpolación lineal repetida, lo que significa que cada paso tiene la misma forma simple: moverse una fracción $t$ del camino de un punto a otro. Esto es más fácil de inspeccionar y depurar que una expresión polinómica más grande porque cada punto intermedio tiene un significado geométrico claro.

Para el caso cuadrático en un $t$ elegido:

1. Interpola entre $P_0$ y $P_1$ para obtener $Q_0$.
2. Interpola entre $P_1$ y $P_2$ para obtener $Q_1$.
3. Interpola entre $Q_0$ y $Q_1$ para obtener $B(t)$.

El punto final es el mismo que la fórmula cuadrática porque la interpolación lineal es en sí misma una suma ponderada. Si $Q_0 = (1 - t)P_0 + tP_1$ y $Q_1 = (1 - t)P_1 + tP_2$, entonces interpolar entre ellos da:

$$(1 - t)Q_0 + tQ_1 = (1 - t)^2 P_0 + 2(1 - t)t P_1 + t^2 P_2$$

Ese lado derecho es exactamente la ecuación de la curva de Bézier cuadrática de la sección de fórmula anterior. La ventaja es que este procedimiento de interpolación se extiende naturalmente a curvas de grado superior y es numéricamente estable en muchas implementaciones. Eso importa porque el mismo procedimiento geométrico funciona tanto para la curva cuadrática como para la cúbica.

En el modo Cuadrática, el control deslizante de interpolación muestra cómo se construye un punto de la curva para cada valor de $t$. A medida que $t$ se mueve de 0.00 a 1.00, $Q_0$ se desliza entre $P_0$ y $P_1$, $Q_1$ se desliza entre $P_1$ y $P_2$, y el punto interpolado final traza la curva real. Cambiando al modo Cúbica se añade una ronda más de interpolación, pero no añade un nuevo tipo de operación: cada punto sigue siendo una mezcla lineal entre dos puntos de la ronda anterior.

Esta vista de escalera da una razón geométrica inmediata de por qué la curva permanece dentro de la región convexa formada por los puntos de control. También muestra por qué De Casteljau es útil para la subdivisión, lo que significa dividir un segmento de Bézier en dos segmentos de Bézier más pequeños en el valor actual de $t$. La mitad izquierda se puede construir a partir de los puntos a lo largo de un lado de la escalera de interpolación, y la mitad derecha a partir de los puntos a lo largo del otro lado. El código de renderizado utiliza esa división cuando una curva está demasiado curvada para dibujarse con precisión con un solo segmento recto: sigue subdividiendo hasta que cada pieza más pequeña sea lo suficientemente plana para aproximarla. La misma operación es útil en teselación adaptativa y pruebas de impacto. Para un tratamiento visual más profundo de la división, las derivadas y la subdivisión, A Primer on Bezier Curves sigue siendo una de las referencias prácticas más sólidas.

Trayectorias de Bézier por Piezas y Continuidad

Los dibujos reales generalmente no son una sola curva. Son cadenas de segmentos de Bézier. Al conectar segmentos, la continuidad es la principal preocupación de calidad. Cada segmento puede ser suave internamente, pero el anclaje compartido entre dos segmentos vecinos aún puede crear una esquina, un cambio en la velocidad o un cambio repentino en la curvatura. La etiqueta de continuidad describe qué es exactamente lo que coincide en esa unión.

Cuatro niveles útiles de continuidad aparecen en la práctica:

• $C_0$ continuidad: los segmentos se encuentran en el mismo punto.
• $G_1$ continuidad: las direcciones tangentes coinciden, por lo que la unión se ve suave.
• $C_1$ continuidad: las primeras derivadas coinciden, por lo que la dirección y la magnitud tangente son continuas.
• $C_2$ continuidad: las segundas derivadas coinciden, por lo que la curvatura cambia suavemente.

La distinción entre $G_1$ y $C_1$ es fácil de pasar por alto porque ambas pueden eliminar la esquina visible. Para un segmento cúbico, la tangente en el punto final apunta a lo largo de la línea desde el último manejador hasta el punto final, y la tangente del siguiente segmento apunta desde el punto final compartido hacia el siguiente manejador. Si esas dos líneas de manejadores son colineales, la unión tiene una dirección suave. Si los manejadores también están equilibrados para que los vectores derivados tengan la misma magnitud, la trayectoria parametrizada cruza la unión sin un salto en la primera derivada.

La comparación utiliza un nudo compartido con un segmento cúbico entrante naranja y un segmento cúbico saliente azul. En el modo C0, las dos curvas se encuentran, pero los manejadores cercanos pueden apuntar en direcciones no relacionadas, por lo que la unión puede formar una esquina. Cambiando a G1 ajusta el manejador cercano saliente a la misma línea tangente mientras mantiene su propia distancia de la unión; la esquina desaparece, pero los dos vectores tangentes aún pueden tener longitudes diferentes. En el modo C1, el manejador cercano se refleja a través del nudo compartido, lo que hace que el vector tangente saliente coincida con el entrante tanto en dirección como en magnitud.

El modo C2 añade una restricción más al derivar el manejador saliente lejano de la geometría del manejador del segmento entrante. Los pequeños peines de curvatura cerca de la unión hacen visible esta condición más estricta: la coincidencia de tangentes controla hacia dónde apunta la curva, mientras que la coincidencia de curvatura controla qué tan bruscamente está girando la curva al pasar por el nudo. Esa suavidad adicional es útil para superficies limpias, trayectorias de cámara y trayectorias de movimiento donde un cambio repentino en la curvatura sería notable. También reduce la libertad de edición, porque mover un manejador ahora obliga a que más parte del segmento vecino se mueva con él.

En muchos flujos de trabajo de interfaz de usuario e iconos, $G_1$ o $C_1$ es la línea base práctica. Si los manejadores adyacentes están dispuestos como colineales alrededor de un anclaje compartido, las uniones se ven visualmente suaves, y los manejadores equilibrados hacen que la derivada matemática también coincida. Para superficies de alta precisión y trayectorias de simulación, pueden importar restricciones de continuidad más fuertes porque los saltos de curvatura pueden afectar la apariencia, el movimiento o los cálculos posteriores. Si necesitas la distinción entre continuidad algebraica y uniones visualmente suaves, la nota de Berkeley sobre continuidad geométrica de curvas paramétricas es una lectura complementaria útil.

Casos de Uso Típicos

Las curvas de Bézier aparecen en muchos sistemas, a menudo detrás de editores amigables:

• Comandos de trayectoria SVG en gráficos web
• Contornos de glifos tipográficos en renderizado de texto
• Rieles de cámara y trayectorias de objetos en herramientas 3D
• Curvas de suavizado cubic-bezier() en CSS para líneas de tiempo de animación
• Herramientas de interpolación de formas en software de ilustración

Aunque las interfaces difieren, el concepto subyacente es el mismo: los puntos de control definen trayectorias suaves con un comportamiento predecible en los puntos finales. La especificación de trayectorias SVG es la referencia autorizada sobre cómo se representan los comandos de trayectoria cuadráticos y cúbicos en formatos de producción.

Esos formatos de producción pueden parecer escuetos, pero codifican la misma geometría mostrada a lo largo del artículo. Un comando de trayectoria cuadrático almacena un manejador entre dos puntos finales; un comando de trayectoria cúbico almacena dos. Cuando inspeccionas o editas una trayectoria SVG, todavía estás decidiendo hacia dónde apuntan las tangentes de los puntos finales, con qué fuerza tiran los manejadores y cómo deben encontrarse los segmentos vecinos.

Una vez que puedes leer el polígono de control, las curvas de Bézier dejan de sentirse abstractas. Los manejadores muestran cómo se doblará la trayectoria, la interpolación explica cada punto entre los extremos, y los dibujos complejos se convierten en cadenas de decisiones de curva más pequeñas que se pueden inspeccionar un segmento a la vez.