ベジェ曲線

ベジェ曲線︵ベジェきょくせん、Bézier Curve︶またはベジエ曲線とは、N 個の制御点から得られる N− 1 次曲線である。フランスの自動車メーカー、シトロエン社のド・カステリョ とルノー社のピエール・ベジェにより独立に考案された。ド・カステリョの方が先んじていたが、その論文が公知とならなかったためベジェの名が冠されている。コンピューター上で滑らかな曲線を描くのに2次ベジェ曲線 (Quadratic Bézier curve) や3次ベジェ曲線 (Cubic Bézier curve) などが広く利用されている。

原語︵フランス語︶における Bézier の発音はベズィエに近く、﹁ベジェ曲線﹂より﹁ベジエ曲線﹂の方がこれに忠実と言えるが、いずれの呼称も用いられている。

応用

コンピュータ上で滑らかな曲線を書く場合にベジェ曲線はよく利用されており、ベクターグラフィクスなどのコマンドにも用意されていることが多い。

特に、2次だけでなく、3次ベジェ曲線までサポートされていることが多い。これは、始点と第1制御点を結ぶ線分が始点における曲線の接線になり、第2制御点と終点を結ぶ線分が終点における曲線の接線になるため、直感的に理解しやすいことにある。また、始点と第1制御点の距離によって始点付近の曲率が制御できるため、作図を行うソフトウェア︵ドローソフト︶で手作業により曲線を描く際に線の形を整えやすい。

PostScriptやそのフォント (Type1フォント)、SVGやHTML5のcanvasで3次ベジェ曲線を使うことができる。Adobe Flash Playerも11.0以降では使える。Microsoft WindowsのGDI/GDI+、Direct2D、.NET FrameworkのSystem.Drawing.Drawing2D.GraphicsPath、WPFのSystem.Windows.Media.BezierSegmentでは3次ベジェをサポートする。

一部は2次ベジェ曲線までのサポートである。Adobe Flash Playerは10.3までは2次までである。

AWT︵Java 1.2以降で追加されたQuadCurve2D, CubicCurve2Dの派生クラス︶、SkiaのSkPathおよびAndroidのandroid.graphics.Pathは2次と3次のベジェ両方を直接サポートする。

定義

制御点を B₀, B₁, ..., B_N−1 とすると、ベジェ曲線は、

${\displaystyle \mathbf {P} ($t)=\sum _{i=0}^{N-1}\mathbf {B} _{i}J_{N-1,i}(t)}  

と表現される。ここで、J_n, i(t) はバーンスタイン基底関数である。

${\displaystyle J_{n,i}($t)={n \choose i}t^{i}(1-t)^{n-i}}  

t が 0 から1まで変化する時、B₀ と B_N−1 を両端とするベジェ曲線が得られる。一般には両端以外の制御点は通らない。

ベジェ曲面︵曲面パッチなどとも︶と呼ばれるような、3次元空間内の曲面への拡張にはいくつか手法がある。たとえば、目的の曲面においてパッチの端点となる3点とその3点における接平面を指定するという方法や、4点を指定し2方向のクロスハッチングのようにして面を構成するという方法がある。

作図法

 

端点 P₀, P₃ および制御点 P₁, P₂ からなる3次ベジェ曲線

前節の数式を適宜変形するなどして、コンピュータプログラムに実装すれば描画はできるわけだが、以下では3次のベジェ曲線︵4個の制御点で示される曲線︶を例として、手作業を念頭に置いた作図法を示す。この手順を基にした描画プログラムにも有用性があり、また人によってはベジェ曲線の性質を直観的に把握するにも有効かもしれない。

右図の P₀, P₁, P₂, P₃ が与えられた制御点である。今、ベジェ曲線の P₀ から t(0 < t<1) の比率の位置の点の座標を求めるためには、次のように計算すればよい。

(一)まず、制御点を順に結んで得られる3つの線分 P₀P₁, P₁P₂, P₂P₃︵水色の折れ線︶をそれぞれ t : 1 − tの比率で分割する点、P₄, P₅, P₆ を求める。

(二)次に、これらの点を順に結んで得られる2つの線分 P₄P₅, P₅P₆︵橙色の折れ線︶を再びそれぞれ t : 1 − tの比率で分割する点 P₇, P₈ を求める。

(三)最後に、この2点を結ぶ線分 P₇P₈︵緑色の線分︶をさらに t : 1 − tの比率で分割する点 P₉を求めると、この点がベジェ曲線上の点となる。

(四)この作業を 0 < t<1 の範囲で繰り返し行うことにより、P₀, P₁, P₂, P₃ を制御点とする3次ベジェ曲線︵赤色の曲線︶が得られる。

関連項目

• Adobe Illustrator
• CorelDRAW
• Canvas
• スプライン曲線

外部リンク

• 『ベジェ曲線の定義と4つの性質』 - 高校数学の美しい物語