Bézier Curve Calculator
Calculadora interactiva de curva Bézier cúbica con puntos de control arrastrables y longitud de curva.
Punto en t: (200.0, 200.0) | Longitud de Curva: ~0px
P0
P1
P2
P3
Ecuación Paramétrica
B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3
Arrastra los puntos de control en el lienzo para ajustar la forma de la curva
Acerca de esta herramienta
Una calculadora de curvas de Bézier es una herramienta interactiva para visualizar y manipular curvas de Bézier cúbicas, ampliamente utilizadas en diseño gráfico, animación, desarrollo web e ingeniería. Al colocar cuatro puntos de control en un lienzo, puedes dar forma a curvas suaves que forman la base de logotipos, animaciones de UI, contornos de fuentes y rutas complejas en diseño asistido por ordenador. Comprender cómo los puntos de control influyen en la forma de la curva es esencial para cualquiera que trabaje con gráficos vectoriales o diseño de movimiento.
Para usar la herramienta, comienzas arrastrando los dos puntos de control (P1 y P2) en el centro del lienzo mientras los puntos finales (P0 y P3) anclan el inicio y el final de la curva. A medida que mueves los puntos de control, la curva se actualiza en tiempo real, y la herramienta muestra la longitud de la curva, ayudándote a estimar distancias para el tiempo de animación o la planificación de rutas. También puedes introducir coordenadas numéricas directamente si necesitas un control preciso, lo que la hace útil tanto para diseño visual como para cálculos técnicos.
Esta herramienta es invaluable para diseñadores gráficos que afinan funciones de animación de transición, desarrolladores que implementan rutas SVG o temporización de animación CSS, e ingenieros que modelan transiciones suaves en simulaciones. El cálculo de longitud en tiempo real es particularmente útil al planificar animaciones de trazo o estimar la distancia de viaje en gráficos de movimiento. Aunque se limita a curvas de Bézier cúbicas (no cuadráticas ni de orden superior), esto cubre la gran mayoría de casos de uso de diseño y animación.
Preguntas Frecuentes
Implementación de Código
def cubic_bezier(p0, p1, p2, p3, t):
"""Evaluate a cubic Bézier curve at parameter t (0..1)."""
u = 1 - t
return (
u**3 * p0[0] + 3*u**2*t * p1[0] + 3*u*t**2 * p2[0] + t**3 * p3[0],
u**3 * p0[1] + 3*u**2*t * p1[1] + 3*u*t**2 * p2[1] + t**3 * p3[1],
)
def bezier_length(p0, p1, p2, p3, steps=200):
"""Approximate curve length via numerical integration."""
length = 0.0
prev = cubic_bezier(p0, p1, p2, p3, 0)
for i in range(1, steps + 1):
curr = cubic_bezier(p0, p1, p2, p3, i / steps)
dx, dy = curr[0] - prev[0], curr[1] - prev[1]
length += (dx**2 + dy**2) ** 0.5
prev = curr
return length
def bezier_tangent(p0, p1, p2, p3, t):
"""Calculate the tangent direction at parameter t."""
u = 1 - t
dx = 3*u**2*(p1[0]-p0[0]) + 6*u*t*(p2[0]-p1[0]) + 3*t**2*(p3[0]-p2[0])
dy = 3*u**2*(p1[1]-p0[1]) + 6*u*t*(p2[1]-p1[1]) + 3*t**2*(p3[1]-p2[1])
return (dx, dy)
# Example: S-curve
p0, p1, p2, p3 = (0, 0), (0.5, 1), (0.5, -1), (1, 0)
length = bezier_length(p0, p1, p2, p3)
print(f"Curve length: {length:.4f}")
print(f"Point at t=0.5: {cubic_bezier(p0, p1, p2, p3, 0.5)}")
# Sample 10 points
for i in range(11):
t = i / 10
pt = cubic_bezier(p0, p1, p2, p3, t)
print(f"t={t:.1f}: ({pt[0]:.3f}, {pt[1]:.3f})")Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.