Curva de Bézier
Curva matemática suave definida por puntos de control. Tecnología fundamental detrás de las fuentes tipográficas, gráficos vectoriales y funciones de suavizado de animaciones.
Una curva de Bézier es una curva paramétrica suave cuya forma está determinada por la posición de los puntos de control. Ideada en 1962 por el ingeniero francés Pierre Bézier para el diseño de carrocerías en Renault, actualmente sustenta las fuentes (TrueType, OpenType), los gráficos vectoriales (SVG, Illustrator), las animaciones CSS y los motores de juegos.
Clasificación por grado:
- Lineal (1er grado): Una línea recta entre dos puntos. Sin puntos de control
- Cuadrática (2do grado): Definida por inicio, un punto de control y fin (3 puntos). Usada en fuentes TrueType y el comando
Qde SVG - Cúbica (3er grado): Definida por inicio, dos puntos de control y fin (4 puntos). La forma más versátil, usada en PostScript, OpenType y el comando
Cde SVG
La fórmula de la curva de Bézier cúbica:
B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃ (0 ≤ t ≤ 1)
Donde P₀ es el inicio, P₁ y P₂ son puntos de control, y P₃ es el final. Variando el parámetro t de 0 a 1 se traza la curva.
En animaciones CSS, cubic-bezier() define curvas de suavizado. Por ejemplo, cubic-bezier(0.25, 0.1, 0.25, 1.0) equivale a la palabra clave ease - inicio lento, aceleración y luego desaceleración. Chrome DevTools proporciona un editor visual de suavizado para ajustes interactivos.
En herramientas de dibujo vectorial, la herramienta Pluma manipula curvas de Bézier: clic para colocar puntos de anclaje, arrastrar para ajustar la dirección y longitud del manejador, controlando la curvatura.