0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ベジェ曲線を考えてみる

Posted at

はじめに

以前の投稿(ベジェ曲線を描いてみる)を同僚に見せたところ、「制御点にかけるパラメータの式が理解できませんでした。。。」と言われました。

ベジェ曲線は以下の式で表現されますが、確かに数式の各部品ははどのように作用するのかはっきり答えれませんでした。:sweat_smile:

P(t) = \sum_{i=0}^{N}B_{N,i}(t)Q_i \tag{1}
B_{n,i}(t) = \begin{pmatrix}n\\i\end{pmatrix}t^i(1-t)^{n-i} \tag{2}

なので、一つ一つちょっと詳しく確認してみます。

ベジェ曲線を考える

流れとしては、数式$(1)$を分解して各項がどんな作用があるか確認します。
また、数式だけではよくわからないので具体的に値を入れて計算結果を確認していきます。
それでは確認していきましょう。

二項係数

式$(2)$に使われている2項係数についてです。
$N$個の中から$k$個を選ぶ時の組み合わせ数で、$N$は制御点数で$k$は制御点のインデックスです。

\begin{pmatrix} n\\k \end{pmatrix} = {_n\mathrm{C}_k=\frac{n!}{k!(n-k)!} } \tag{3}

具体的に数値を入れて計算してみます。

  • $N=3$の場合
{_3\mathrm{C}_0=1},  
{_3\mathrm{C}_1=3}, 
{_3\mathrm{C}_2=3}, 
{_3\mathrm{C}_3=1}
  • $N=4$の場合
{_4\mathrm{C}_0=1}, 
{_4\mathrm{C}_1=4}, 
{_4\mathrm{C}_2=6}, 
{_4\mathrm{C}_3=4}, 
{_4\mathrm{C}_4=1}

このように、二項係数の値は$k=0$から$k=N/2$へ向けて増加して、$k=N/2$から$k=N$に向けて減少する。
まぁ組み合わせ数なのでこのような結果になりますね。
これらの値が各制御点の係数として掛かってくることで、第1制御点$P_0$から中間の制御点へ向けて引っ張られ、最終制御点$P_N$へ向けて減衰していく様子を曲線形状に反映しているのだと思います。

試しに、ベジェ曲線の数式から二項係数部分を除外して曲線形状を描きました。

image.png

第2, 3番目の制御点への重み付けがなく、始点から少し曲線を描いた後に直線的に終点へ向かっていることがわかります。

パラメータ

パラメータ$t$はベジェ曲線を表現するための媒介変数で、1次元空間を0 - 1 の範囲で値をとります。
パラメータ空間上の$t$は写像関数$f(t)$を用いることで曲線が描かれる空間の座標へ変換されます。

image.png

この写像関数が数式$(1)$のことで、そこから係数と座標値をとると以下のパラメータについての式が残ります。

g(t) = \sum_{i=0}^{N}t^i(1-t)^{n-i} \tag{4}

これはどんな気持ちを表しているのでしょうか?
$(4)$はベルヌーイ分布の確率密度関数と似ているのですが、この投稿でその説明は控えておきます。
とりあえず実際に値を代入してどんな値になるか確認してみます。
ここで、$n$は制御点数-1で、i は制御点のインデックスです

  • $t = 0.8$, 制御点数4の場合
\begin{align}
g(0.8) &= 0.8^0*0.2^3 + 0.8*0.2^2 + 0.8^2*0.2 + 0.8^3*0.2^0 \\
       &= 0.008 + 0.032 + 0.128 + 0.512
\end{align}
  • $t = 0.5$, 制御点数4の場合
\begin{align}
g(0.8) &= 0.5^0*0.5^3 + 0.5*0.5^2 + 0.5^2*0.5 + 0.5^3*0.5^0 \\
       &= 0.125 + 0.125 + 0.125 + 0.125
\end{align}
  • $t = 0.2$, 制御点数4の場合
\begin{align}
g(0.8) &= 0.2^0*0.8^3 + 0.2*0.8^2 + 0.2^2*0.8 + 0.2^3*0.8^0 \\
       &= 0.512 + 0.128 + 0.032 + 0.008
\end{align}

値を見てみると、$t$の値が大きければ終点側の項、$t$の値が小さければ始点側の項の値が大きくなっていることがわかります。
これは、パラメータ$t$の値によってどの制御点の座標値を強く反映するかを表していると思います。

まとめると

最終的には数式$(1)$の通り、この計算結果と二項係数、制御点ベクトルの積和を計算してベジェ曲線上の1点が決まります。

つまり、ベジェ曲線上の1点は以下の図のように原点から制御点への各ベクトルを式$(3),(4)$で重み付けして足し合わせることによって求めています。

image.png

おわりに

ベジェ曲線の数式について、各計算がどのようなことを表現しているのかを確認してみました。
今回は説明ばかりなのでプログラム載せてないですが、プログラムも後々Githubで公開していこかなと思います。
また、「~だと思う」とかぼやかしちゃってたりなど怪しい部分もありますが、間違ってるところなどあれば指摘は大歓迎です!

参考文献

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?