2次ベジェ曲線

icon 項目のみ表示/展開表示の切り替え

2次ベジェ曲線

 2次ベジェ曲線は、2点の始終点(x0,y0)(x2,y2)と1点の制御点(x1,y1)より曲線を表現する方法で媒介変数tを用いると以下の式で表すことができます。
x(t)=(1-t)^2 \times x0+ 2(1-t) t \times x1+t^2 \times x2
y(t)=(1-t)^2 \times y0+ 2(1-t) t \times y1+t^2 \times y2
0 \leqq t \leqq 1
 以下の展開公式を使用して展開しtについて整理し方程式に変形します。

(a-b)^2=a^2-2ab+b^2

x(t)=(1-2t+t^2) x_0 + 2 t \cdot x_1 -2t^2 x_1 + t^2 x_2
=x_0-2t \cdot x_0+t^2 x_0 + 2 t \cdot x_1 -2t^2 x_1 + t^2 x_2
= t^2 x_0 -2t^2 x_1 + t^2 x_2-2t \cdot x_0 +2 t \cdot x_1  + x_0
=(x_0 -2 x_1 +x_2) t^2  +(-2 x_0 +2 x_1) t + x_0
y(t)=(y_0 -2 y_1 +y_2) t^2  +(-2 y_0 +2 y_1) t + y_0

nxnyn
始点 01010
制御点 15070
終点 215010

 以下のアニメーションはベジェ曲線の描画方法の概念を表しています。  既知点3個を直線で結びtは直線上の緑点の位置を割合で示すものとします。  緑点同士を結んだ直線上にさらにtの割合で黒点を設けます。この黒点をつなぐとベジェ曲線が完成します。


t=