Aller au contenu
🛠️ToolsShed

Bézier Curve Calculator

Calculatrice de courbe de Bézier cubique interactive avec points de contrôle déplaçables et longueur de courbe.

Point à t: (200.0, 200.0)  |  Longueur de la courbe: ~0px

P0

x
y

P1

x
y

P2

x
y

P3

x
y

Équation Paramétrique

B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3

Glissez les points de contrôle sur le canevas pour ajuster la forme de la courbe

À propos de cet outil

Une calculatrice de courbe de Bézier est un outil interactif pour visualiser et manipuler des courbes de Bézier cubiques, largement utilisées en conception graphique, animation, développement web et ingénierie. En plaçant quatre points de contrôle sur un canevas, vous pouvez façonner des courbes lisses qui forment la base des logos, des animations d'interface utilisateur, des contours de polices et des chemins complexes en conception assistée par ordinateur. Comprendre comment les points de contrôle influencent la forme de la courbe est essentiel pour quiconque travaille avec des graphiques vectoriels ou du design de mouvement.

Pour utiliser l'outil, vous commencez par faire glisser les deux points de contrôle (P1 et P2) au centre du canevas tandis que les points d'extrémité (P0 et P3) ancrent le début et la fin de la courbe. À mesure que vous déplacez les points de contrôle, la courbe se met à jour en temps réel, et l'outil affiche la longueur de la courbe, vous aidant à estimer les distances pour le timing d'animation ou la planification de chemins. Vous pouvez également entrer directement des coordonnées numériques si vous avez besoin d'un contrôle précis, ce qui la rend utile à la fois pour la conception visuelle et les calculs techniques.

Cet outil est inestimable pour les concepteurs graphiques qui affinent les fonctions d'animation de transition, les développeurs qui implémentent des chemins SVG ou le timing d'animation CSS, et les ingénieurs qui modélisent des transitions lisses dans les simulations. Le calcul de longueur en temps réel est particulièrement utile lors de la planification d'animations de contour ou de l'estimation de la distance de déplacement dans les graphiques de mouvement. Bien que limité aux courbes de Bézier cubiques (pas de courbes quadratiques ou d'ordre supérieur), cela couvre la grande majorité des cas d'usage de conception et d'animation.

Questions Fréquentes

Implémentation du Code

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.