3次ベジェ曲線
Cubic Bézier curve
https://scrapbox.io/files/69f47bad8dc79f02a282a7dc.png
4つの制御点によって定義される滑らかなパラメトリック曲線のこと。
コンピュータグラフィックスやフォントの輪郭、ドローソフト(Illustratorなど)のパス描画で広く利用されている。
そもそも「3次」というのは、点を 4つ 使うという意味。
(点が3つなら「2次」、点が2つならただの「1次(直線)」になる)
つまり、3次ベジェ曲線は、たった4つの点を使って描かれる滑らかな曲線のこと。
P0 (始点): カーブのスタート地点
P3 (終点): カーブのゴール地点
P1, P2 (制御点): カーブを引っ張る「磁力」のような役割を持つ点(ハンドル)
https://gyazo.com/0b64354c97f65946d6a6186655fea361
青い点
ベースとなる4つの点を結ぶと、「3本の道」ができます。
この3本それぞれの道で、「スタートからt%進んだ場所」に青い点を立てます。(青い点が3つできる)
緑の点
さっき立てた3つの青い点を線で結ぶと、今度は「2本の新しい道」ができます。
この2本の道でも、「スタートからt%進んだ場所」に緑の旗を立てます。(緑の点が2つできる)
赤い点
最後に、2つの緑の旗を結んで「最後の1本の道」を作ります。
この最後の道で、「スタートからt%進んだ場所」に赤い旗を立てます。(赤の点が1つできる)
定義と仕組み
https://opentype.jp/images/bezier3.gif
始点 $ P_1、第1方向点 $ P_2、第2方向点 $ P_3、終点 $ P_4 の4点で構成される。
https://opentype.jp/images/bezier4.gif
曲線は始点 $ P_1 を出発し、終点 $ P_4 に到達する。
https://opentype.jp/images/bezier5.gifhttps://opentype.jp/images/bezier6.gif
途中の経路は、2つの方向点 $ P_2, P_3 に引っ張られるようにして決定される(方向点は通らない)。
パラメータ $ t ($ 0 \le t \le 1)を用いた数式は以下の通り。
$ B(t) = (1-t)^3 P_1 + 3(1-t)^2 t P_2 + 3(1-t) t^2 P_3 + t^3 P_4
https://opentype.jp/fontguide_doc3.htm
主な特徴
端点を通る: 始点と終点を必ず通過する。
凸包性: 曲線は4つの制御点を結んでできる多角形(凸包)の内部に必ず収まるため、計算や当たり判定がしやすい。
直感的な操作性: ハンドル(方向点)を動かすことで、人間が直感的に思い通りの曲線をデザインしやすい。