mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-09-01 12:23:19 +02:00
29 lines
4.0 KiB
Markdown
29 lines
4.0 KiB
Markdown
# ベジエ曲線の区間 [0,1]
|
||
|
||
ここまでの説明で、ベジエ曲線の裏側にある数学がわかりました。しかし、気づいているかもしれませんが、ひとつ引っかかる点があります。ベジエ曲線はいつも`t=0`から`t=1`の間を動いていますが、どうしてこの特定の区間なのでしょう？
|
||
|
||
このことは、曲線の「始点」から曲線の「終点」までどうやって動かすか、ということにすべて関係しています。2つの値を混ぜ合わせて1つの値をつくる場合、一般の式は次のようになります。
|
||
|
||
\[
|
||
混ぜ合わさった値 = a \cdot 値_1 + b \cdot 値_2
|
||
\]
|
||
|
||
明らかに、始点では`a=1, b=0`とする必要があります。こうすれば、値1が100%、値2が0%で混ぜ合わさるからです。また、終点では`a=0, b=1`とする必要があります。こうすれば、値1が0%、値2が100%で混ぜ合わさります。これに加えて、`a`と`b`を独立にしておきたくはありません。独立になっている場合、何でも好きな値にすることできますが、こうすると例えば「値1が100%**かつ**値2が100%」のようなことが可能になってしまいます。これはこれで原則としてはかまいませんが、ベジエ曲線の場合は混ぜ合わさった値が常に始点と終点の*間*になってほしいのです。というわけで、混ぜ合わせの和が100%を決して超えないように、`a`と`b`の値を設定する必要があります。これは次のようにすれば簡単です。
|
||
|
||
\[
|
||
混ぜ合わさった値 = a \cdot 値_1 + (1 - a) \cdot 値_2
|
||
\]
|
||
|
||
こうすれば、和が100%を超えることはないと保証できます。`a`の値を区間[0,1]に制限してしまえば、混ぜ合わさった値は常に2つの値の間のどこか（両端を含む）になり、また和は常に100%になります。
|
||
|
||
しかし……この式を0と1の間の値だけで使うのではなく、もし仮にこの区間の外の値で使うとしたら、どうなるのでしょう？めちゃくちゃになってしまうのでしょうか？……実はそうではありません。「その先」が見えるのです。
|
||
|
||
ベジエ曲線の場合、区間を広げると曲線は単純に「そのまま延びて」いきます。ベジエ曲線はある多項式曲線の一部分にすぎませんので、単純に区間を広くとればとるほど、曲線のより多くの部分が現れるようになります。では、どのように見えるのでしょうか？
|
||
|
||
下の2つの図は「いつもの方法」で描いたベジエ曲線ですが、これと一緒に、`t`の値をずっと先まで広げた場合の「延びた」ベジエ曲線も表示しています。見てわかるように、曲線の残りの部分には多くの「かたち」が隠れています。そして曲線の点を動かせば、その部分の形状も変わります。
|
||
|
||
<Graphic title="無限区間の2次ベジエ曲線" setup={this.setupQuadratic} draw={this.draw} />
|
||
<Graphic title="無限区間の3次ベジエ曲線" setup={this.setupCubic} draw={this.draw} />
|
||
|
||
実際に、グラフィックデザインやコンピュータモデリングで使われている曲線の中には、座標が固定されていて、区間は自由に動かせるような曲線があります。これは、区間が固定されていて、座標を自由に動かすことのできるベジエ曲線とは反対になっています。すばらしい例が[「Spiro」曲線](http://levien.com/phd/phd.html)で、これは[オイラー螺旋とも呼ばれるクロソイド曲線](https://ja.wikipedia.org/wiki/クロソイド曲線)の一部分に基づいた曲線です。非常に美しく心地よい曲線で、[FontForge](https://fontforge.github.io)や[Inkscape](https://inkscape.org/ja/)など多くのグラフィックアプリに実装されており、フォントデザインにも利用されています（Inconsolataフォントなど）。
|