Bézier Curve Calculator
Calculadora interativa de curva Bézier cúbica com pontos de controle arrastáveis e comprimento da curva.
Ponto em t: (200.0, 200.0) | Comprimento da Curva: ~0px
P0
P1
P2
P3
Equação Paramétrica
B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3
Arraste os pontos de controle na tela para ajustar a forma da curva
Sobre esta ferramenta
Uma calculadora de curva de Bézier é uma ferramenta interativa para visualizar e manipular curvas de Bézier cúbicas, amplamente utilizadas em design gráfico, animação, desenvolvimento web e engenharia. Ao posicionar quatro pontos de controle em uma tela, você pode moldar curvas suaves que formam a base de logotipos, animações de UI, contornos de fontes e caminhos complexos em design assistido por computador. Compreender como os pontos de controle influenciam a forma da curva é essencial para qualquer pessoa que trabalhe com gráficos vetoriais ou design de movimento.
Para usar a ferramenta, você começa arrastando os dois pontos de controle (P1 e P2) no centro da tela enquanto os pontos finais (P0 e P3) ancoram o início e o fim da curva. À medida que você move os pontos de controle, a curva é atualizada em tempo real e a ferramenta exibe o comprimento da curva, ajudando você a estimar distâncias para timing de animação ou planejamento de caminho. Você também pode inserir coordenadas numéricas diretamente se precisar de controle preciso, tornando-a útil tanto para design visual quanto para cálculos técnicos.
Esta ferramenta é inestimável para designers gráficos que ajustam funções de easing de animação, desenvolvedores implementando caminhos SVG ou timing de animação CSS, e engenheiros modelando transições suaves em simulações. O cálculo de comprimento em tempo real é particularmente útil ao planejar animações de traço ou estimar distância de deslocamento em gráficos de movimento. Embora limitada a curvas de Bézier cúbicas (não quadráticas ou de ordem superior), isso cobre a grande maioria dos casos de uso de design e animação.
Perguntas Frequentes
Implementação 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.