Cargando aplicación...
Preparando tu experiencia meskeIA
Mueve los puntos de control y observa cómo nace la curva. Con el algoritmo de De Casteljau animado: la matemática detrás de las fuentes, el easing y los gráficos vectoriales.
De Casteljau, polígono de control y dónde se usan en gráficos y videojuegos
| Tipo | Puntos de control | Grado | Forma posible | Dónde se usa |
|---|---|---|---|---|
| Lineal | 2 | 1 | Segmento recto | Interpolación simple (lerp), tramos rectos |
| Cuadrática | 3 | 2 | Un solo arco | Fuentes TrueType, curvas ligeras |
| Cúbica | 4 | 3 | Forma de S (dos curvaturas) | SVG, PostScript, Illustrator, easing CSS |
| Spline / B-spline | Varios tramos unidos | Variable | Curvas largas y suaves | Trazados complejos, trayectorias de cámara |
El contorno de cada letra se describe con curvas de Bézier. Las fuentes TrueType usan cuadráticas y las PostScript/OpenType CFF usan cúbicas. Por eso una letra escala a cualquier tamaño sin perder nitidez.
💡 Una «o» o una «s» son varias Béziers encadenadas formando un trazado cerrado.
La función cubic-bezier() de CSS y los editores de curvas de motores como Unity o Godot son Béziers cúbicas que describen cómo cambia un valor con el tiempo: arranque suave, frenado, rebote, etc.
💡 Aquí los ejes no son x e y del espacio, sino tiempo y progreso de la animación.
La herramienta «pluma» de Illustrator, Inkscape o Figma crea nodos con manejadores: cada manejador es un punto de control de una Bézier cúbica. El formato SVG guarda esas curvas con el comando C.
💡 Tirar de un manejador es, literalmente, mover un punto de control como en este visualizador.
En videojuegos las Béziers definen el recorrido suave de una cámara cinemática, la trayectoria curva de un proyectil o el camino que sigue un objeto entre dos puntos sin giros bruscos.
💡 Para recorrer la curva a velocidad constante hace falta reparametrizar por longitud de arco: t no avanza igual de rápido en todos los tramos.
Una curva de Bézier solo toca el primer y el último punto. Los intermedios actúan como «imanes» que tiran de la curva marcando su dirección y curvatura, pero la curva queda siempre dentro de la envolvente convexa de los puntos, sin llegar a tocarlos. Esa es precisamente la propiedad que la hace fácil de controlar.
💡 Si necesitas que la curva sí pase por unos puntos dados, lo que buscas es una interpolación tipo spline (por ejemplo Catmull-Rom), no una Bézier directa.
t va de 0 a 1 y recorre la curva: en t = 0 estás en el punto inicial y en t = 1 en el final. No es proporcional a la distancia recorrida, sino a los pasos de interpolación, así que el punto se mueve más rápido en unos tramos que en otros. Mueve el deslizador o pulsa «Animar t» para verlo.
💡 Por eso, para animar a velocidad constante, hay que corregir t en función de la longitud de arco.
Para un t dado, interpolas (haces un punto intermedio ponderado por t) entre cada par de puntos consecutivos. Eso te da un nivel con un punto menos. Repites el proceso sobre ese nuevo nivel hasta quedarte con un único punto: ese es el punto de la curva. Activa la casilla para ver los niveles dibujados con colores distintos.
💡 Es el mismo resultado que la fórmula con polinomios de Bernstein, pero más estable numéricamente y mucho más visual.
Para la cuadrática: B(t) = (1−t)²·P0 + 2(1−t)t·P1 + t²·P2. Para la cúbica: B(t) = (1−t)³·P0 + 3(1−t)²t·P1 + 3(1−t)t²·P2 + t³·P3. Los coeficientes son los polinomios de Bernstein y, para cualquier t, siempre suman 1, lo que garantiza que la curva quede dentro del polígono de control.
💡 Esa fórmula y el algoritmo de De Casteljau dan exactamente el mismo punto.
La cuadrática es más ligera de calcular y basta cuando solo necesitas un arco; por eso la usan las fuentes TrueType. La cúbica, con su forma de S, da mucha más libertad y es el estándar en diseño vectorial y animación. Si una sola curva no llega, se encadenan varias formando un spline.
💡 Para que la unión de dos Béziers sea suave, los manejadores a cada lado del nodo deben estar alineados (continuidad de la tangente).
Pierre Bézier las popularizó en Renault en los años 60 para diseñar carrocerías con ordenador. Paul de Casteljau había desarrollado el método geométrico equivalente algo antes en Citroën, pero su trabajo se publicó más tarde. De ahí que la curva lleve un nombre y el algoritmo de evaluación, el otro.
💡 Ambos resolvían el mismo problema industrial: describir formas suaves de forma precisa y repetible.
Empieza con la lista de puntos de control (P0, P1, …) y elige un valor de t entre 0 y 1 para el que quieres conocer el punto de la curva.
Entre cada dos puntos seguidos calcula el punto intermedio ponderado por t (lerp). Con n puntos obtienes n−1 puntos nuevos: el primer nivel de la construcción.
Aplica la misma interpolación a los puntos recién obtenidos. Cada pasada reduce en uno el número de puntos y te acerca a la curva.
Cuando solo queda un punto, ese es el punto de la curva para ese t. Es el círculo que se desplaza al mover el deslizador.
Repitiendo el proceso para muchos valores de t (aquí, 100) y uniendo los puntos resultantes obtienes la curva completa.
Resuelve cada tramo con la curva de menor grado posible. Es más fácil de ajustar que una única curva de grado alto que oscila de forma imprevisible.
Para que la unión entre dos Béziers no tenga esquinas, alinea los manejadores a ambos lados del nodo común.
El mismo algoritmo permite partir una curva en dos en cualquier t conservando su forma: muy útil para recortar o aumentar el detalle.
Si quieres velocidad constante a lo largo de la curva, no animes t linealmente: corrígelo con una tabla de longitud de arco.
Como la curva nunca sale del polígono de control, puedes usar ese polígono para detectar colisiones de forma rápida y aproximada.
Elige el tipo según el destino: TrueType pide cuadráticas; SVG, PostScript y editores gráficos trabajan con cúbicas.