🎯 Curvas de Bézier
Explorador interactivo de curvas de Bézier usando el algoritmo de De Casteljau. Arrastra puntos de control, anima la construcción, elige el grado 1-5, y compara con la interpolación por B-splines.
Sobre las Curvas y Splines de Bézier
Una curva de Bézier es una curva paramétrica suave definida por un conjunto de puntos de control, inventada de forma independiente por Pierre Bézier en Renault y Paul de Casteljau en Citroën en la década de 1960 para el diseño de carrocerías de automóviles. La curva de grado n viene dada por el polinomio de Bernstein B(t) = Σ Pᵢ ⋅ C(n,i) ⋅ (1−t)ⁿ⁻ᶦ ⋅ tᶦ, donde t ∈ [0,1] y C(n,i) son los coeficientes binomiales. El algoritmo de de Casteljau evalúa esto geométricamente interpolando linealmente de forma repetida entre pares de puntos — una elegante construcción recursiva que es numéricamente estable e intuitiva visualmente.
El simulador te permite colocar puntos de control haciendo clic, arrastrarlos para reformar la curva en tiempo real, encadenar segmentos cúbicos de Bézier en splines suaves (continuidad C¹ o G¹), y observar cómo el polígono de subdivisión en cada paso de la construcción de de Casteljau se anima a medida que el parámetro t recorre de 0 a 1.
Preguntas frecuentes
¿Qué es el algoritmo de de Casteljau?
El algoritmo de de Casteljau evalúa una curva de Bézier en el parámetro t interpolando linealmente de forma repetida entre puntos de control adyacentes. Para una curva cúbica (4 puntos de control P₀-P₃), la primera ronda da 3 puntos intermedios, la segunda da 2, y la tercera da el único punto de la curva B(t). Los puntos intermedios forman un triángulo de segmentos de línea cuya hipotenusa es tangente a la curva — visible en la animación como el "polígono de subdivisión" en movimiento.
¿Por qué se usan tanto las curvas cúbicas de Bézier?
Las curvas cúbicas (grado 3, 4 puntos de control) ofrecen el grado mínimo necesario para especificar ambos extremos y ambas direcciones tangentes de forma independiente, dando control total de la forma con el menor número de parámetros. Las curvas de mayor grado pueden oscilar (fenómeno de Runge) y son más difíciles de editar intuitivamente. Prácticamente todo formato de gráficos vectoriales — SVG, PDF, PostScript, fuentes TrueType/OpenType, y animaciones CSS — usa curvas cúbicas de Bézier como la primitiva de forma fundamental.
¿Qué es una B-spline y en qué se diferencia de una curva de Bézier?
Una B-spline (spline base) es una curva polinómica por tramos definida por un vector de nudos que determina dónde se unen los segmentos polinómicos. A diferencia de una curva de Bézier, cada punto de control en una B-spline solo influye en una región local de la curva (el soporte es finito), por lo que mover un punto no reforma toda la curva — una propiedad llamada control local. Las NURBS (B-splines racionales no uniformes) extienden las B-splines con pesos y son la representación estándar en software CAD como AutoCAD y SolidWorks.
¿Cómo se aseguran las uniones suaves entre segmentos cúbicos?
Para la continuidad C¹ (derivadas primeras coincidentes), el último punto de control del segmento k, el primer punto de control del segmento k+1, y el extremo compartido deben ser colineales, con las distancias al extremo iguales. Esto asegura que la dirección y la magnitud de la tangente sean idénticas a través de la unión. Para la continuidad G¹ (dirección tangente coincidente pero no necesariamente la magnitud) solo se requiere colinealidad — una condición más débil pero visualmente suave usada en el diseño de tipografías.
¿Qué son los polinomios de base de Bernstein?
Los polinomios de Bernstein B(i,n,t) = C(n,i)⋅tᶦ⋅(1−t)ⁿ⁻ᶦ forman una base para los polinomios de grado n en [0,1]. Son no negativos, suman 1, y cada uno alcanza un máximo único en t = i/n. Como la curva es un promedio ponderado de los puntos de control (pesos = polinomios de Bernstein), la curva siempre se encuentra dentro de la envolvente convexa del polígono de control — una propiedad geométrica clave que hace que las curvas de Bézier sean fáciles de recortar e intersecar.
¿Cómo se usan las curvas de Bézier en tipografía?
Las fuentes TrueType usan curvas cuadráticas de Bézier (3 puntos de control por segmento) almacenadas como datos numéricos compactos para definir los contornos de los glifos. Las fuentes OpenType pueden usar segmentos de Bézier cuadráticos (como en TrueType) o cúbicos (como en PostScript Type 1). En el momento de mostrarse, el rasterizador evalúa las curvas en la resolución adecuada y rellena el interior — por eso las fuentes escalables se ven nítidas en cualquier tamaño. Un solo carácter ASCII puede estar compuesto por 10-30 segmentos de Bézier.
¿Qué es la propiedad de la envolvente convexa?
La envolvente convexa de un conjunto de puntos es la región convexa más pequeña que los contiene a todos — piensa en ella como la forma que se obtiene al estirar una goma elástica alrededor de los puntos. Como las curvas de Bézier son combinaciones convexas de sus puntos de control (los pesos de Bernstein son no negativos y suman 1), la curva siempre permanece dentro de la envolvente convexa de su polígono de control. Esta propiedad se usa en la detección de colisiones y en algoritmos de intersección rayo-curva: si un rayo no toca la envolvente convexa, no puede tocar la curva.
¿Cómo se relaciona la curva de Bézier con el suavizado (easing) de animaciones?
CSS y SVG usan curvas cúbicas de Bézier para definir funciones de suavizado de animación, especificadas como cubic-bezier(x₁, y₁, x₂, y₂) donde los dos puntos de control (con los extremos fijos en (0,0) y (1,1)) determinan la rapidez con que cambia el valor animado a lo largo del tiempo. La conocida función "ease-in-out" es aproximadamente cubic-bezier(0.42, 0, 0.58, 1). La curva mapea el tiempo normalizado (t) al progreso normalizado, de modo que una sección empinada significa un cambio rápido mientras que una sección plana significa un cambio lento.
¿Pueden las curvas de Bézier representar círculos exactamente?
No — las curvas de Bézier racionales (NURBS con pesos no unitarios) pueden representar exactamente secciones cónicas incluyendo círculos, pero las curvas de Bézier polinómicas no pueden. Sin embargo, un solo cuadrante de un círculo puede aproximarse con mucha precisión mediante una curva cúbica de Bézier con puntos de control en (R, kR) y (kR, R) donde k ≈ 0,5523. El error máximo de esta aproximación es de aproximadamente 0,00027R, lo que la hace imperceptible para resoluciones de pantalla típicas.
¿Qué es la elevación de grado en las curvas de Bézier?
La elevación de grado es el proceso de representar la misma curva geométrica con un punto de control más (y un grado más), sin cambiar la forma de la curva. Un segmento lineal puede elevarse a cuadrático, luego a cúbico, etc. Esto es útil en algoritmos que requieren que todas las curvas tengan el mismo grado — por ejemplo, al fusionar curvas de diferentes fuentes. Los nuevos puntos de control se calculan como promedios ponderados de los originales, y el proceso siempre es exacto (sin aproximación involucrada).
Sobre esta simulación
Este simulador visualiza cómo se construye una curva de Bézier a partir de un puñado de puntos de control usando el algoritmo de De Casteljau, el mismo método de interpolación recursiva usado en toda la infografía. Puedes elegir un grado de curva de 1 (lineal) a 5 (quíntico), arrastrar cada punto de control por el lienzo, y desplazar el parámetro t para ver cómo las líneas de construcción convergen en la curva. Un interruptor también superpone una B-spline cúbica uniforme para que puedas comparar las dos técnicas directamente. Todo en pantalla se dibuja en vivo a partir de las mismas matemáticas de polinomios de Bernstein que están detrás de las fuentes, las rutas SVG y el software CAD.
🔬 Qué muestra
Los puntos azules son los puntos de control P₀…Pₙ, y la línea gris discontinua es el polígono de control que los une. En el parámetro t elegido, las líneas de construcción de colores muestran cada ronda de la interpolación lineal del algoritmo de De Casteljau, convergiendo en un único punto naranja que traza la curva naranja de Bézier a medida que t recorre de 0 a 1. La curva siempre empieza en P₀, termina en Pₙ, y nunca se sale de la envolvente convexa del polígono de control.
🎮 Cómo usarlo
Arrastra cualquier punto de control azul para reformar la curva en tiempo real. El selector de Grado cambia entre 2 y 6 puntos de control (lineal hasta quíntico); el control deslizante t mueve un solo punto a lo largo de la curva, y Reproducir anima t automáticamente hacia adelante y atrás. Construcción activa o desactiva las líneas amarillas de De Casteljau, las casillas ocultan el polígono de control o la propia curva, y Comparar B-spline superpone una B-spline cúbica uniforme verde a través de los mismos puntos. Reiniciar restaura la disposición predeterminada para el grado que esté seleccionado.
💡 ¿Sabías que...?
Las curvas de Bézier fueron desarrolladas de forma independiente a principios de la década de 1960 por Pierre Bézier en Renault y Paul de Casteljau en Citroën, ambos buscando una forma de describir matemáticamente los paneles de carrocería de automóviles para el diseño asistido por computadora — décadas antes de que esas mismas matemáticas terminaran definiendo las letras de esta página.
Preguntas frecuentes
¿Qué es el algoritmo de De Casteljau?
El algoritmo de De Casteljau evalúa una curva de Bézier en un valor dado de t interpolando linealmente de forma repetida entre puntos de control vecinos. Para una curva cúbica (4 puntos) se necesitan tres rondas de interpolación para reducir los puntos a un único punto B(t) sobre la curva; las líneas de colores en la simulación muestran cada una de esas rondas a medida que ocurren.
¿Por qué la curva pasa por el primer y el último punto de control pero no por los intermedios?
La curva es un promedio ponderado de todos los puntos de control, y esos pesos (los polinomios de Bernstein) caen a cero en cada punto excepto en P₀ cuando t=0 y en Pₙ cuando t=1. Cada uno de los demás puntos de control solo atrae la curva hacia sí sin que la curva llegue a tocarlo directamente, por lo que P₁ hasta Pₙ₋₁ quedan fuera de la curva mientras que P₀ y Pₙ quedan sobre ella.
¿Qué hace realmente cambiar el grado?
El selector de Grado establece cuántos puntos de control definen la curva: el grado 1 usa 2 puntos y dibuja una línea recta, el grado 2 usa 3 puntos para un arco suave, y los grados 3 a 5 añaden progresivamente más puntos y más curvaturas posibles. Las curvas de mayor grado pueden ondularse más pero se vuelven más difíciles de dar forma de manera predecible, razón por la cual las curvas cúbicas (grado 3) se convirtieron en el estándar de la industria.
¿En qué se diferencia la curva de Bézier de la B-spline mostrada aquí?
La curva naranja es una verdadera curva de Bézier, donde cada punto de control influye en toda la forma — una propiedad llamada control global. La B-spline verde mostrada mediante el interruptor de comparación se construye a partir de los mismos puntos usando una técnica diferente, una B-spline cúbica uniforme, donde cada punto solo afecta a un tramo local de la curva, de modo que mover un punto deja el resto en gran medida sin cambios.
¿Qué representa realmente el parámetro t?
t es el parámetro de la curva, que va de 0 a 1. No es el tiempo ni la distancia recorrida a lo largo de la curva; es simplemente una entrada de la fórmula de interpolación. Mover el control deslizante de 0 a 1 desplaza el punto B(t) desde el primer punto de control hasta el último, aunque no necesariamente se mueve a velocidad constante a lo largo de la propia curva.
Arrastra los puntos de control y avanza paso a paso en la construcción de de Casteljau para ver cómo se construye una curva de Bézier, luego compárala con una B-spline del mismo grado.
3D · Renderizador Three.js / WebGL · objetivo de 60 FPS · se ejecuta completamente en el cliente, sin instalación