Bézier Curve Calculator
Calcolatore di curva Bézier cubica interattiva con punti di controllo trascinabili e lunghezza della curva.
Punto a t: (200.0, 200.0) | Lunghezza curva: ~0px
P0
P1
P2
P3
Equazione Parametrica
B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3
Trascina i punti di controllo sulla tela per regolare la forma della curva
Informazioni sullo strumento
Un calcolatore di curve di Bézier è uno strumento interattivo per visualizzare e manipolare curve di Bézier cubiche, ampiamente utilizzate nel design grafico, nell'animazione, nello sviluppo web e nell'ingegneria. Posizionando quattro punti di controllo su una tela, puoi modellare curve lisce che formano la base di loghi, animazioni UI, contorni di caratteri e percorsi complessi nella progettazione assistita da computer. Comprendere come i punti di controllo influenzano la forma della curva è essenziale per chiunque lavori con grafica vettoriale o motion design.
Per utilizzare lo strumento, inizi trascinando i due punti di controllo (P1 e P2) al centro della tela mentre i punti finali (P0 e P3) ancorano l'inizio e la fine della curva. Man mano che sposti i punti di controllo, la curva si aggiorna in tempo reale e lo strumento visualizza la lunghezza della curva, aiutandoti a stimare le distanze per il timing dell'animazione o la pianificazione dei percorsi. Puoi anche inserire direttamente le coordinate numeriche se hai bisogno di un controllo preciso, rendendola utile sia per il design visuale che per i calcoli tecnici.
Questo strumento è prezioso per i designer grafici che mettono a punto le funzioni di easing dell'animazione, gli sviluppatori che implementano percorsi SVG o timing dell'animazione CSS, e gli ingegneri che modellano transizioni fluide nelle simulazioni. Il calcolo della lunghezza in tempo reale è particolarmente utile quando si pianificano animazioni di tratti o si stima la distanza di percorrimento nella grafica di movimento. Sebbene limitato a curve di Bézier cubiche (non quadratiche o di ordine superiore), questo copre la stragrande maggioranza dei casi di utilizzo nel design e nell'animazione.
Domande Frequenti
Implementazione del Codice
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.