El otro día estaba retocando el logo de un proyecto nuevo — de esos en que abres el archivo vectorial solo para "ajustar un detallito" y desapareces por dos horas. Hice clic en una curva y de la nada aparecieron esas manijas — los palitos con una bolita en la punta que salen de cada punto. Arrastré una y toda la curva se movió con ella, suavecita, como si fuera de goma. Y me volvió la pregunta de siempre: ¿cómo es que media docena de puntos forman una curva tan perfecta?
Spoiler: hay una matemática preciosa detrás, y se llama curva de Bézier. Armé un juguete aquí abajo para que arrastres los puntos y veas la magia en vivo. Pero antes deja que te cuente de dónde salió — porque la historia involucra autos (literalmente).
La curva que nació en una fábrica de autos
El nombre viene de Pierre Bézier, un ingeniero de Renault en los años 1960. Su problema era muy concreto: ¿cómo describir, en números que una máquina entienda, la curva suave de la carrocería de un auto? En esa época el diseño se hacía a mano, a escala real, con reglas flexibles de madera. Bézier necesitaba una forma matemática de representar esas curvas para poder fabricarlas con precisión.
Curiosamente, otro ingeniero francés, Paul de Casteljau, de la rival Citroën, había llegado a ideas muy parecidas antes — pero Citroën lo trató todo como secreto industrial y casi no publicó. Por eso la curva lleva el nombre de Bézier, mientras que el algoritmo elegante que la hace funcionar lleva el de De Casteljau. Ese algoritmo es exactamente lo que está animado en el juguete de abajo.
La idea, sin la fórmula que asusta
Toma cuatro puntos: dos en los extremos (donde la curva empieza y termina) y dos en el medio, los de "control" — tiran de la curva hacia ellos como imanes, pero la curva no pasa por ellos. Por eso arrastrar una manija tuerce toda la línea de forma tan orgánica.
El truco de De Casteljau es pura interpolación lineal — es decir, "caminar una fracción del camino entre dos puntos." Elige un valor t entre 0 y 1 (piénsalo como "¿qué porcentaje del camino llevo?"):
- En cada segmento que une dos puntos vecinos, marco el punto que está a
tdel camino. Con 4 puntos, eso me da 3 puntos nuevos. - Conecto esos 3 puntos nuevos y repito: marco el punto a
ten cada uno de los 2 segmentos. Ahora tengo 2 puntos. - Conecto esos 2 y marco una vez más el punto a
t. Queda un único punto — y está, exactamente, sobre la curva.
Varía t de 0 a 1 y ese punto final se desliza trazando toda la curva. Es solo eso. Ningún polinomio cúbico memorizado — solo "camina una fracción del camino," repetido en capas. En el juguete, mueve el slider de t y mira las líneas de construcción (las capas) dibujarse en cascada.
Por qué está en todas partes
Cuando entiendes Bézier, empiezas a verla en todo:
- Fuentes. Cada letra que estás leyendo ahora es un montón de curvas de Bézier. Los formatos TrueType y PostScript/CFF guardan los glifos exactamente así — puntos y manijas.
- SVG e ilustración. El comando
Cen un trazado SVG es, literalmente, una Bézier cúbica. La "pluma" de Illustrator, de Figma, de Inkscape — todas dibujan Bézier. - Animación. ¿Esa transición CSS que "empieza lenta y acelera"? Es una Bézier. La función
cubic-bezier()no es más que una de estas curvas, donde el eje X es el tiempo y el eje Y es el progreso de la animación. El juguete de abajo te entrega la cadenacubic-bezier()lista para copiar.
La misma curva que da forma al paragolpes de un Renault de los años 60 también forma la "o" de esta frase y suaviza el menú que se abre en tu app favorita. Una idea, mil disfraces.
Dos curiosidades que me parecen geniales
- La curva siempre queda "dentro" de los puntos. Existe una propiedad llamada casco convexo: la curva nunca escapa del contorno cerrado de sus puntos de control. Por eso, aun arrastrando las manijas lejos, la curva sigue "comportada" — ideal cuando necesitas garantizar que un trazo no invada donde no debe.
- Se puede "partir" una Bézier en dos sin cambiar el dibujo. El propio paso de De Casteljau, detenido en cualquier
t, te da los puntos de control de las dos mitades de la curva. Así es como los editores hacen ese "agregar un punto en medio del trazo" sin deformar nada.
Mi opinión honesta
Confieso que por años traté las Bézier como caja negra: arrastraba las manijas en Figma a tientas hasta que "quedara bonito." Cuando por fin me senté a entender a De Casteljau, fue ese clic satisfactorio de darme cuenta de que algo que parecía magia era, en el fondo, simple y elegante. Y es exactamente ese tipo de cosa lo que me hace amar la programación: pelar la magia y descubrir que debajo hay una idea hermosa — casi siempre más simple de lo que el miedo dejaba ver.
Basta de charla — a arrastrar 👇
Aquí está el juguete. Arrastra los cuatro puntos (ratón, dedo o teclado), mueve t para ver las líneas de construcción de De Casteljau, activa/desactiva el polígono de control y prueba los presets de easing. La cadena cubic-bezier() equivalente aparece lista para copiar. Todo vanilla, sin ninguna biblioteca.