Bézier Curve Calculator
ドラッグ可能な制御点と曲線の長さを使用したインタラクティブな3次ベジェ曲線電卓です。
t での点: (200.0, 200.0) | 曲線長: ~0px
P0
P1
P2
P3
パラメトリック方程式
B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3
キャンバス上のコントロールポイントをドラッグして曲線の形状を調整します
このツールについて
ベジェ曲線計算機は、グラフィックデザイン、アニメーション、ウェブ開発、工学など、様々な分野で広く使用される3次ベジェ曲線を視覚化および操作するための対話型ツールです。キャンバス上に4つの制御点を配置することで、ロゴ、UIアニメーション、フォントアウトライン、CAD内の複雑なパスの基礎となる滑らかな曲線を形作ることができます。制御点が曲線形状に与える影響を理解することは、ベクターグラフィックスやモーションデザインに携わる誰もが必須のスキルです。
このツールを使用するには、キャンバスの中央にある2つの制御点(P1とP2)をドラッグして操作します。一方、端点(P0とP3)は曲線の開始点と終了点を固定します。制御点を移動させると曲線がリアルタイムで更新され、ツールは曲線の長さを表示するため、アニメーションタイミングやパス計画の距離推定に役立ちます。正確な制御が必要な場合は、数値座標を直接入力することもでき、ビジュアルデザインと技術的な計算の両方に対応できます。
このツールは、アニメーションのイージング関数を微調整するグラフィックデザイナー、SVGパスやCSSアニメーションタイミングを実装する開発者、シミュレーションで滑らかな遷移をモデル化するエンジニアにとって非常に価値があります。リアルタイムの長さ計算は、ストロークアニメーションを計画したり、モーショングラフィックスの移動距離を推定する際に特に有用です。3次ベジェ曲線のみに限定されていますが(2次曲線や高次曲線ではありません)、これはデザインおよびアニメーションのほぼすべてのユースケースをカバーしています。
よくある質問
コード実装
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.