「ベジェ曲線」の版間の差分
編集の要約なし |
|||
| 19行目: | 19行目: | ||
一部は2次ベジェ曲線までのサポートである。[[Adobe Flash]] Playerは10.3までは2次までである。 |
一部は2次ベジェ曲線までのサポートである。[[Adobe Flash]] Playerは10.3までは2次までである。 |
||
[[Abstract Window Toolkit|AWT]]（[[Java]] 1.2以降で追加された{{Javadoc:SE|java/awt/geom|QuadCurve2D}}, {{Javadoc:SE|java/awt/geom|CubicCurve2D}}の派生クラス）、[[Skia]]の<code>SkPath</code>および[[Android]]の<code>android.graphics.Path</code>は2次と3次のベジェ両方を直接サポートする<ref>[https://docs.oracle.com/javase/tutorial/2d/overview/primitives.html Geometric Primitives (The Java™ Tutorials > 2D Graphics > Overview of the Java 2D API Concepts)]</ref><ref>[https://github.com/google/skia/blob/master/include/core/SkPath.h skia/SkPath.h at master · google/skia]</ref><ref>[https://developer.android.com/reference/android/graphics/Path Path | Android Developers]</ref>。 |
[[Abstract Window Toolkit|AWT]]（[[Java]] 1.2以降で追加された{{Javadoc:SE|java/awt/geom|QuadCurve2D}}, {{Javadoc:SE|java/awt/geom|CubicCurve2D}}の派生クラス）、[[Skia]]の<code>SkPath</code>および[[Android (オペレーティングシステム)|Android]]の<code>android.graphics.Path</code>は2次と3次のベジェ両方を直接サポートする<ref>[https://docs.oracle.com/javase/tutorial/2d/overview/primitives.html Geometric Primitives (The Java™ Tutorials > 2D Graphics > Overview of the Java 2D API Concepts)]</ref><ref>[https://github.com/google/skia/blob/master/include/core/SkPath.h skia/SkPath.h at master · google/skia]</ref><ref>[https://developer.android.com/reference/android/graphics/Path Path | Android Developers]</ref>。 |
||
== 定義 == |
== 定義 == |
||
2020年8月5日 (水) 09:36時点における版
ベジェ曲線（ベジェきょくせん、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]。
定義
制御点を B0, B1, ..., BN−1 とすると、ベジェ曲線は、
と表現される。ここで、Jn, i(t) はバーンスタイン基底関数である。
t が 0 から 1 まで変化する時、B0 と BN−1 を両端とするベジェ曲線が得られる。一般には両端以外の制御点は通らない。
ベジェ曲面（曲面パッチなどとも）と呼ばれるような、3次元空間内の曲面への拡張にはいくつか手法がある。たとえば、目的の曲面においてパッチの端点となる3点とその3点における接平面を指定するという方法や、4点を指定し2方向のクロスハッチングのようにして面を構成するという方法がある。
作図法
前節の数式を適宜変形するなどして、コンピュータプログラムに実装すれば描画はできるわけだが、以下では3次のベジェ曲線（4個の制御点で示される曲線）を例として、手作業を念頭に置いた作図法を示す。この手順を基にした描画プログラムにも有用性があり、また人によってはベジェ曲線の性質を直観的に把握するにも有効かもしれない。
右図の P0, P1, P2, P3 が与えられた制御点である。今、ベジェ曲線の P0 から t (0 < t < 1) の比率の位置の点の座標を求めるためには、次のように計算すればよい。
- まず、制御点を順に結んで得られる3つの線分 P0 - P1, P1 - P2, P2 - P3（緑色の線）をそれぞれ t : 1 − t の比率で分割する点、P4, P5, P6 を求める。
- 次に、これらの点を順に結んで得られる2つの線分 P4 - P5, P5 - P6（赤色の線）を再びそれぞれ t : 1 − t の比率で分割する点 P7, P8 を求める。
- 最後に、この2点を結ぶ線分 P7 - P8（黄色の線）をさらに t : 1 − t の比率で分割する点 P9 を求めると、この点がベジェ曲線上の点となる。
- この作業を 0 < t < 1 の範囲で繰り返し行う事により、P0, P1, P2, P3 を制御点とする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
