3次ベジェ曲線

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

3次ベジェ曲線

　3次ベジェ曲線は、2点の始終点(x0,y0)(x3,y3)と2点の制御点(x1,y1)(x2,y2)より曲線を表現する方法で媒介変数tを用いると以下の式で表すことができます。

x(t)=(1-t)^3 \times x0+ 3(1-t)^2 t \times x1+3(1-t) t^2 \times x2+t^3 \times x3
y(t)=(1-t)^3 \times y0+ 3(1-t)^2 t \times y1+3(1-t) t^2 \times y2+t^3 \times y3
0 \leqq t \leqq 1
　以下の展開公式を使用して展開しtについて整理し方程式に変形します。
(a-b)^2=a^2-2ab+b^2
(a-b)^3=a^3-3a^2 b+3ab^2-b^3
x(t)=(1^3-3t+3t^2-t^3) \times x_0+3(1-2t+t^2) t \times x_1+(3t^2-3t^3) \times x_2+t^3 \times x_3
=(1^3 x_0 -3t x_0 +3t^2 x_0 -t^3 x_0)+(3t x_1 -6t^2 x_1 +3t^3 x_1)+(3t^2x_2-3t^3 x_2) +t^3 \times x_3
= -t^3 x_0 -3t^3 x_2+3t^3 x_1+t^3 \times x_3+3t^2 x_0 -6t^2 x_1+3t^2x_2 -3t x_0+3t x_1+1^3 x_0
x(t)=(-x_0+3x_1 - 3x_2+x_3) t^3+ (3 x_0-6 x_1+3x_2 ) t^2+( -3 x_0 +3x_1)t +x_0
y(t)=(-y_0+3y_1 - 3y_2+y_3) t^3+ (3 y_0-6 y_1+3y_2 ) t^2+( -3 y_0 +3y_1)t +y_0
a=-x_0+3x_1 - 3x_2+x_3,b=3 x_0-6 x_1+3x_2 ,c= -3 x_0 +3x_1,d=x_0
e=-y_0+3y_1 - 3y_2+y_3,f=3 y_0-6 y_1+3y_2 ,g= -3 y_0 +3y_1,h=y_0
x(t)= a t^3+ b t^2+ct +d
y(t)= e t^3+ f t^2+gt +h

nxnyn
始点 01010
制御点 15070
制御点 210020
終点 315010

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


t=