ベジェ曲線

ベジェ曲線（ベジェきょくせん、Bézier Curve）またはベジエ曲線とは、 $N$ 個の制御点から得られる $N - 1$ 次曲線である。フランスの自動車メーカー、シトロエン社のド・カステリョ（英語版）とルノー社のピエール・ベジェにより独立に考案された。ド・カステリョの方が先んじていたが、その論文が公知とならなかったためベジェの名が冠されている^[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]^[3]^[4]^[5]^[6]。

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

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

定義編集

制御点を $B 0, B 1, ..., B N -1$ とすると、ベジェ曲線は、

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

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

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

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

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

作図法編集

端点

P 0, P 3

および制御点

P 1, P 2

からなる3次ベジェ曲線

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

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

まず、制御点を順に結んで得られる3つの線分 $P 0 P 1, P 1 P 2, P 2 P 3$ （水色の折れ線）をそれぞれ $t : 1 - t$ の比率で分割する点、 $P 4, P 5, P 6$ を求める。
次に、これらの点を順に結んで得られる2つの線分 $P 4 P 5, P 5 P 6$ （橙色の折れ線）を再びそれぞれ $t : 1 - t$ の比率で分割する点 $P 7, P 8$ を求める。
最後に、この2点を結ぶ線分 $P 7 P 8$ （緑色の線分）をさらに $t : 1 - t$ の比率で分割する点 $P 9$ を求めると、この点がベジェ曲線上の点となる。
この作業を $0 < t < 1$ の範囲で繰り返し行うことにより、 $P 0, P 1, P 2, P 3$ を制御点とする3次ベジェ曲線（赤色の曲線）が得られる。

脚注編集

^ 鳥谷浩志; 千代倉弘明 (1991). 3次元CADの基礎と応用. 共立出版. ISBN 9784320025394
^ Line and Curve Functions - Windows applications | Microsoft Docs
^ ID2D1GeometrySink::AddBezier(const D2D1_BEZIER_SEGMENT) (d2d1.h) | Microsoft Docs
^ D2D1_BEZIER_SEGMENT (d2d1.h) | Microsoft Docs
^ GraphicsPath.AddBezier Method (System.Drawing.Drawing2D) | Microsoft Docs
^ BezierSegment Class (System.Windows.Media) | Microsoft Docs
^ Geometric Primitives (The Java™ Tutorials > 2D Graphics > Overview of the Java 2D API Concepts)
^ skia/SkPath.h at master · google/skia
^ Path | Android Developers

外部リンク編集

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

[1] 鳥谷浩志; 千代倉弘明 (1991). 3次元CADの基礎と応用. 共立出版. ISBN 9784320025394

[2] Line and Curve Functions - Windows applications | Microsoft Docs

[3] ID2D1GeometrySink::AddBezier(const D2D1_BEZIER_SEGMENT) (d2d1.h) | Microsoft Docs

[4] D2D1_BEZIER_SEGMENT (d2d1.h) | Microsoft Docs

[5] GraphicsPath.AddBezier Method (System.Drawing.Drawing2D) | Microsoft Docs

[6] BezierSegment Class (System.Windows.Media) | Microsoft Docs

[7] Geometric Primitives (The Java™ Tutorials > 2D Graphics > Overview of the Java 2D API Concepts)

[8] skia/SkPath.h at master · google/skia

[9] Path | Android Developers

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]