Explorador de curvas de Bézier

Explora curvas de Bézier de forma interactiva. Arrastra los puntos de control y observa la construcción de De Casteljau.

Cargando simulación interactiva...

Ningún punto de control intermedio se alcanza nunca 🖖

Arrastra un punto de control interior bien lejos: la curva se inclina hacia él pero nunca llega. El peso de Bernstein de un punto interior tiene un techo rígido; en los ejemplos cúbicos es b₁,₃(t) = 3t(1−t)², que alcanza su máximo en t = 1/3 con un valor de solo 4/9. Los extremos, en cambio, llevan peso exactamente 1 en t = 0 y t = 1, y por eso la curva empieza y termina justo sobre ellos. Al subir el grado, la influencia interior se reduce aún más: en el ejemplo de grado 5 los techos son 0,410 y 0,346. Por eso los diseñadores encadenan cúbicas cortas en lugar de ajustar una sola curva de grado alto: cuantos más puntos de control añades, menos puede hacer cada uno.

Recortar esquinas con promedios repetidos 🖖

Detrás de la curva suave hay una sola operación humilde repetida una y otra vez: el promedio en línea recta de dos puntos. El algoritmo de De Casteljau toma tus puntos de control, halla el punto situado a una fracción t de cada segmento que los une y repite con los nuevos puntos hasta que queda uno solo: ese es B(t). Arrastra el control deslizante y observa cómo todo el andamiaje colapsa en un punto que traza la curva.

Bautizada con el nombre del inventor equivocado 🖖

El algoritmo que anima esta herramienta fue creado por Paul de Casteljau en Citroën en 1959, tres años antes de que Pierre Bézier publicara un trabajo similar en Renault, la marca rival. Citroën trató la investigación de De Casteljau como secreto industrial y la mantuvo inédita, así que las curvas acabaron llevando el nombre de Bézier. Ambos ingenieros moldeaban chapa para automóviles: la matemática de las tipografías y la animación nació en la fábrica.

CURVAS DE BÉZIER — LO QUE LOS PUNTOS DE CONTROL PUEDEN, Y NO PUEDEN, HACER

¿Qué caso de Bézier estás dibujando?

Cuántos puntos de control usas decide qué formas son siquiera alcanzables; dónde los colocas decide cuál de ellas obtienes. Tres puntos solo pueden trazar un trozo de parábola: ni S, ni cúspide, ni bucle, hagas lo que hagas con el del medio. Añade un cuarto y los tres se vuelven posibles, separados por fronteras que se pueden calcular. Las tres cúbicas de abajo comparten P0, P1 y P2 y solo difieren en P3, que es justamente el punto que lleva una cúbica del bucle, pasando por la cúspide, hasta una S corriente.

Cuadrática — tres puntos, y siempre es una parábola κ ≠ 0 ∀t
Cúbica con inflexión — la S que una cuadrática no puede hacer κ(0.5) = 0
Cúspide — donde la curva se detiene en seco y da la vuelta B′(0.5) = (0, 0)
Bucle — un punto, visitado dos veces B(0.211) = B(0.789)
Grado 5 — más puntos, menos control min |B − P₃| = 134

01

Cuadrática — tres puntos, y siempre es una parábola

Qué sabes: Tres puntos de control, grado 2. La curva sale de P0 apuntando directamente a P1 y llega a P2 viniendo directamente de P1, y ese único punto intermedio es toda la palanca que tienes.

Cómo reconocerlo: κ ≠ 0 ∀t

Ejemplo resuelto: P0 (50, 250), P1 (250, 30), P2 (450, 250) → B(0,50) = (250, 140), exactamente a media distancia entre P1 y el punto medio de la cuerda (250, 250). La curva nunca se acerca a P1 más de 110 px.

Abrir este caso: Cuadrática
Cuadrática — tres puntos, y siempre es una parábola. El vértice cae en (250, 140): a media distancia entre el punto de control y la cuerda. Tres puntos de control, grado 2. La curva sale de P0 apuntando directamente a P1 y llega a P2 viniendo directamente de P1, y ese único punto intermedio es toda la palanca que tienes.
El vértice cae en (250, 140): a media distancia entre el punto de control y la cuerda.

02

Cúbica con inflexión — la S que una cuadrática no puede hacer

Qué sabes: Cuatro puntos de control, grado 3, con P1 tirando por encima de la cuerda y P2 por debajo. La curva se dobla primero hacia un lado y luego hacia el otro.

Cómo reconocerlo: κ(0.5) = 0

Ejemplo resuelto: P0 (50, 250), P1 (150, 50), P2 (350, 250), P3 (450, 50) → el producto B′ × B″ cae en línea recta de positivo en t = 0 a negativo en t = 1, cruzando el cero en t = 0,50, así que la única inflexión queda exactamente en B(0,50) = (250, 150).

Abrir este caso: S cúbica
Cúbica con inflexión — la S que una cuadrática no puede hacer. La curvatura cruza el cero en t = 0,50: el doblez se invierte en (250, 150). Cuatro puntos de control, grado 3, con P1 tirando por encima de la cuerda y P2 por debajo. La curva se dobla primero hacia un lado y luego hacia el otro.
La curvatura cruza el cero en t = 0,50: el doblez se invierte en (250, 150).

03

Cúspide — donde la curva se detiene en seco y da la vuelta

Qué sabes: Cuatro puntos, con P1 y P2 lanzados uno sobre el otro de modo que las dos componentes de la velocidad se agotan en el mismo instante. Grado 3.

Cómo reconocerlo: B′(0.5) = (0, 0)

Ejemplo resuelto: P0 (100, 200), P1 (400, 50), P2 (100, 50), P3 (400, 200) → x′(t) = 900(1 − 2t)² e y′(t) = 450(2t − 1), así que B′(0,50) = (0, 0). La curva llega a (250, 87,5), se detiene y se marcha en la dirección por la que había venido.

Abrir este caso: Cúspide
Cúspide — donde la curva se detiene en seco y da la vuelta. B′(0,5) = (0, 0): el punto que traza se detiene en (250, 87,5) y da la vuelta. Cuatro puntos, con P1 y P2 lanzados uno sobre el otro de modo que las dos componentes de la velocidad se agotan en el mismo instante. Grado 3.
B′(0,5) = (0, 0): el punto que traza se detiene en (250, 87,5) y da la vuelta.

04

Bucle — un punto, visitado dos veces

Qué sabes: Los mismos P0, P1 y P2 de la cúspide, con P3 retirado de x = 400 a x = 280 para que el polígono de control se cruce consigo mismo de forma más marcada. Grado 3.

Cómo reconocerlo: B(0.211) = B(0.789)

Ejemplo resuelto: P0 (100, 200), P1 (400, 50), P2 (100, 50), P3 (280, 200) → B(t) = B(1 − t) en t = ½ ∓ √3/6, es decir t ≈ 0,211 y t ≈ 0,789, y ambos caen exactamente en (220, 125).

Abrir este caso: Bucle cúbico
Bucle — un punto, visitado dos veces. Dos parámetros, un punto: t ≈ 0,211 y t ≈ 0,789 dan los dos (220, 125). Los mismos P0, P1 y P2 de la cúspide, con P3 retirado de x = 400 a x = 280 para que el polígono de control se cruce consigo mismo de forma más marcada. Grado 3.
Dos parámetros, un punto: t ≈ 0,211 y t ≈ 0,789 dan los dos (220, 125).

05

Grado 5 — más puntos, menos control

Qué sabes: Seis puntos de control, grado 5. Cada uno de ellos tiene un peso distinto de cero en todo valor de t, así que mover cualquiera cambia la curva entera.

Cómo reconocerlo: min |B − P₃| = 134

Ejemplo resuelto: Los seis puntos abarcan y de 20 a 280, pero la curva solo cubre y de 150 a 250, y nunca se acerca a P3 (300, 20) más de 134 px. En t = 0,5 los pesos son 0,031, 0,156, 0,313, 0,313, 0,156, 0,031: todos los puntos cuentan, ninguno manda.

Abrir este caso: Grado 5
Grado 5 — más puntos, menos control. La curva nunca sube por encima de y = 150 mientras sus propios puntos de control llegan a y = 20. Seis puntos de control, grado 5. Cada uno de ellos tiene un peso distinto de cero en todo valor de t, así que mover cualquiera cambia la curva entera.
La curva nunca sube por encima de y = 150 mientras sus propios puntos de control llegan a y = 20.
Referencias (3)
  • The Bernstein basis and its weight bounds: Farouki, R. T. (2012). "The Bernstein polynomial basis: A centennial retrospective." Computer Aided Geometric Design 29(6), 379–419.
  • The algorithm the tool animates, and the naming: Farin, G. Curves and Surfaces for CAGD: A Practical Guide, 5th ed. Morgan Kaufmann, 2002 — de Casteljau’s algorithm, the convex-hull property and endpoint interpolation. ISBN 978-1-55860-737-8.
  • De Casteljau’s own account of the unpublished Citroën work: de Casteljau, P. (1999). "De Casteljau’s autobiography: My time at Citroën." Computer Aided Geometric Design 16(7), 583–586. No DOI is linked here because the record could not be resolved to one.

Problemas resueltos al detalle

  1. El punto de la curva en t = 0,50 que deja de curvarse en un sentido 6 pasos

    La cúbica de la página tiene los puntos de control P0 = (50, 250), P1 = (150, 50), P2 = (350, 250), P3 = (450, 50), en un marco de 500 × 300 con y medida hacia abajo. El panel muestra el punto de la curva en t = 0,50. Demuestra que este punto es el único lugar donde la curva deja de curvarse hacia un lado y empieza a curvarse hacia el otro.

    1. En t = 1/2, los cuatro pesos de Bernstein son 1/8, 3/8, 3/8, 1/8, de modo que los dos puntos interiores pesan el triple que los extremos. Eso es toda la aritmética: x = (50 + 450 + 1050 + 450)/8 e y = (250 + 150 + 750 + 50)/8.

    2. La curvatura es la segunda derivada, y derivar dos veces una cúbica deja una expresión lineal en t. Cada uno de los dos vectores a partir de los cuales se construye es la segunda diferencia de tres puntos de control consecutivos.

    3. Calcúlalos. Resultan ser iguales y opuestos: un hecho sobre el polígono de control, disponible antes de trazar curva alguna.

    4. Por tanto, la segunda derivada es una dirección fija, (100, 400), escalada por 1 − 2t. Ambas componentes alcanzan el 0 en t = 1/2, y en ningún otro t del intervalo.

    5. La aceleración nula por sí sola no constituye un punto de inflexión; una curva que se detiene en seco también la presenta. Así pues, comprueba la velocidad. Es (450, 0): horizontal, y rotundamente distinta de cero, por lo que el punto se desplaza a través del tramo plano en lugar de dar la vuelta en él.

    6. La curvatura tiene el signo de x′y″ − y′x″. Al desarrollar los productos, el paréntesis se simplifica —las dos partes dependientes de t se cancelan dando una constante 3—, lo que deja un numerador exactamente proporcional a 1 − 2t. Una cantidad lineal en t cruza por cero una sola vez, por lo que esta cúbica tiene exactamente un punto de inflexión y se encuentra en t = 1/2.

    Respuesta

    (250,0, 150,0) es el único punto de inflexión de la curva. Su posición no es un accidente de estos números en particular. La condición que anuló la segunda derivada, P3 − P2 = P1 − P0, se reordena como P0 + P3 = P1 + P2 = (500, 300) —y B(t) + B(1 − t) es en sí misma una curva de Bézier cúbica, sobre los puntos de control invertidos y sumados P0+P3, P1+P2, P2+P1, P3+P0. Los cuatro son el mismo punto, por lo que esa suma es la constante (500, 300) para todo t. Compruébalo a un cuarto de giro: B(0,25) = (140,625, 162,5) y B(0,75) = (359,375, 137,5) suman exactamente eso. La curva presenta simetría central respecto a (250,0, 150,0), y una figura que se ve idéntica tras medio giro alrededor de un punto no puede estar curvándose hacia ningún lado ahí. El polígono de control discontinuo sostiene todo el argumento: su primer y último segmento son el mismo vector, (100, −200), de modo que el punto de inflexión está en el punto medio antes de que la curva exista.

  2. Una esquina trazada en B(0,50) por polinomios diferenciables 6 pasos

    El estado de cúspide utiliza P0 = (100, 200), P1 = (400, 50), P2 = (100, 50), P3 = (400, 200), y el panel muestra B(0,50) = (250,0, 87,5). Ambas coordenadas son polinomios en t, por lo que el movimiento es diferenciable cuantas veces se desee. Demuestra que la forma que traza tiene aun así una esquina en ese punto.

    1. Los mismos pesos que cualquier cúbica en el parámetro intermedio: 1/8, 3/8, 3/8, 1/8. x = (100 + 1200 + 300 + 400)/8 e y = (200 + 150 + 150 + 200)/8.

    2. La derivada de una curva de Bézier cúbica se construye a partir de las tres aristas del polígono de control, ponderadas por la base cuadrática de Bernstein. Derivar nunca requiere los puntos en sí, solo los desplazamientos entre ellos.

    3. Aquí la arista central va hacia atrás. P1 − P0 y P3 − P2 empujan ambas hacia la derecha, mientras que P2 − P1 empuja 300 hacia la izquierda —y su parte vertical es 0, por lo que no puede cancelar nada en y.

    4. Al agrupar las componentes, ambas se reducen a un solo término. La velocidad horizontal es un cuadrado perfecto, por lo que nunca pasa a ser negativa; la velocidad vertical es lineal y sí cambia de signo. Se anulan simultáneamente en t = 1/2, lo que corresponde al punto trazador deteniéndose por completo.

    5. Una parada no implica automáticamente una esquina: la dirección podría mantenerse tras la pausa. Al tomar la relación, esta tiende a 0 desde ambos lados, de modo que la tangente se sitúa vertical a la entrada y vertical a la salida, con y′ invirtiendo su signo al pasar por ella. La dirección gira 180°.

    6. Al igual que ocurre con la segunda derivada, la parada es una propiedad del polígono. B′(1/2) resulta ser tres cuartos de (P2 + P3) − (P0 + P1), lo cual se anula exactamente cuando el punto medio de la primera arista y el punto medio de la última arista son el mismo punto. Ambos son (250, 125).

    Respuesta

    El punto trazador se detiene en seco en (250,0, 87,5) y vuelve a salir apuntando en sentido opuesto. Nada en la parametrización es irregular —x(t) e y(t) son cúbicas, infinitamente diferenciables— y aun así el trazo presenta una esquina pronunciada, motivo por el cual la continuidad de las curvas se evalúa de dos formas: C¹ exige que la velocidad sea continua, G¹ exige que la dirección lo sea, y una velocidad nula satisface lo primero destruyendo lo segundo. Hay también una consecuencia medible. Dado que y′ = 450(2t − 1) es negativa antes de la parada y positiva después, y = 87,5 es el valor más pequeño que toma la curva, por lo que la cúspide es el punto más alto en pantalla y la curva entera queda atrapada por debajo de ella. P1 y P2 se encuentran en y = 50; la curva se aproxima hasta una distancia de 37,5 de ellos y no más, lo que es el precio de tirar de una cúbica con solo dos tiradores interiores.

Problemas de ejemplo

  • Cuadrática - Cuadrática: grado 2, vértice en B(0,50) = (250, 140)
  • S cúbica - S cúbica: inflexión en B(0,50) = (250, 150)
  • Cúspide - Cúspide: la tangente se anula en B(0,50) = (250, 87,5)
  • Bucle cúbico - Bucle cúbico: una curva de grado 3 que se cruza a sí misma
  • Grado 5 - Grado 5 a partir de 6 puntos de control