Bézier Curve Calculator
Interactive cubic Bézier curve calculator with draggable control points and curve length.
BezierCurveCalculator.pointAtT: (200.0, 200.0) | Curve Length: ~0px
P0
x
y
P1
x
y
P2
x
y
P3
x
y
BezierCurveCalculator.parametricEquation
B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3
BezierCurveCalculator.dragHint
常见问题
代码实现
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.