ベジェ曲線とは？
状態:-
閲覧数:1,825
投稿日:2017-06-30
更新日:2017-08-16
フランス語表記
・Bézier Curve
概要
・「始点」、「終点」、及びその他いくつかの「制御点」からできる曲線
特徴
・「始点」と「終点」を必ず通る
・「始点」と「終点」以外の「制御点」を通らない
・「制御点」を増やすことでより複雑になる
N - 1 次曲線
・N 個の制御点から得られる
・コンピューター上で滑らかな曲線を描くのに2次ベジェ曲線 (Quadratic Bézier curve) や 3次ベジェ曲線 (Cubic Bézier curve) などが広く利用されている
歴史
・フランスの自動車メーカー、シトロエン社のド・カステリョ (Paul de Casteljau) とルノー社のピエール・ベジェ (Pierre Bézier) により別々に考案された
・ド・カステリョの方が先んじていたが、その論文が公知とならなかったためベジェの名が冠されている
・Bézier Curve
概要
・「始点」、「終点」、及びその他いくつかの「制御点」からできる曲線
特徴
・「始点」と「終点」を必ず通る
・「始点」と「終点」以外の「制御点」を通らない
・「制御点」を増やすことでより複雑になる
N - 1 次曲線
・N 個の制御点から得られる
・コンピューター上で滑らかな曲線を描くのに2次ベジェ曲線 (Quadratic Bézier curve) や 3次ベジェ曲線 (Cubic Bézier curve) などが広く利用されている
歴史
・フランスの自動車メーカー、シトロエン社のド・カステリョ (Paul de Casteljau) とルノー社のピエール・ベジェ (Pierre Bézier) により別々に考案された
・ド・カステリョの方が先んじていたが、その論文が公知とならなかったためベジェの名が冠されている
1次ベジェ曲線とは？ ／ ベジェ曲線の原理
1次ベジェ曲線とは？
2 個の制御点から得られる 1次曲線(=直線)
N 個の制御点から得られる N - 1 次曲線
・二次曲線があるなら、一次曲線とか三次曲線もありますか？ただの直線
・一本の線分（P0 から P1）の上を一定の割合で動く点の軌跡
線分を厳密に定義すると？
・P0とP1を結ぶ直線において、P0とP1の間にある全ての点の集合
※2点間のどんな値でも、任意の精度で線形補間することが可能
0 < t < 1 であるとき、「 1 - t :t」の比率で分割すると仮定
L(t)=(1 - t)P0＋tP1
L(t)=P0＋(P1 - P0)t
中間点
P0 - P1 の中間点
（基点とするベクトルP0）＋ (P0からP1へのベクトル) × 比率t
L(0.5)=(1 - 0.5)P0＋0.5✕P1
ベクトルP0、P1をxy座標で表す
P0＝（P0x, P0y)
P1＝（P1x, P1y)
(1 - t)P0＋ｔP1 をxy座標で書き直す
((1-t)P0x+tP1x, (1-t)P0y+tP1y)
ベクトルP0、P1の中間地点をxy座標で表す
・tは0.5
(0.5(P0x+P1x), 0.5(P0y+P1y))
2次ベジェ曲線
2次ベジェ曲線とは？
3 個の制御点から得られる 2次曲線
・始点 … P0
・第1制御点 … P1
・終点 … P2
N 個の制御点から得られる N - 1 次曲線
2段階
・一本の線分（P0 から P1）の上を一定の割合で動く点の軌跡
・一本の線分（P1 から P2）の上を一定の割合で動く点の軌跡
→「上記点同士を結ぶ線分」上を一定の割合で動く点の軌跡
最終的に
・曲線の両端の制御点(始点と終点)から、真ん中の制御点に近づくような曲線になる
3次ベジェ曲線とは？ ／ 利用場面
3次ベジェ曲線とは？
4個の制御点で示される曲線
・始点と第1制御点を結ぶ線分が「始点における曲線の接線」になる
・第2制御点と終点を結ぶ線分が「終点における曲線の接線」になる
4個の制御点構成
・始点 … P0
・第1制御点 … P1
・第2制御点 … P2
・終点 … P3
N 個の制御点から得られる N - 1 次曲線
3段階
・一本の線分（P0 から P1）の上を一定の割合で動く点の軌跡
・一本の線分（P1 から P2）の上を一定の割合で動く点の軌跡
→「上記点同士を結ぶ線分」上を一定の割合で動く点の軌跡A
・一本の線分（P1 から P2）の上を一定の割合で動く点の軌跡
・一本の線分（P2 から P3）の上を一定の割合で動く点の軌跡
→「上記点同士を結ぶ線分」上を一定の割合で動く点の軌跡Ｂ
⇒「上記AB点同士を結ぶ線分」上を一定の割合で動く点の軌跡
利用場面
コンピュータ上で滑らかな曲線を書く場合、3次ベジェ曲線はよく利用されている
・HTML5 の canvas
・SVG
ベジェ曲線
ベジェ曲線を学び、実装する
ベジエ曲線を使ってみよう
ベジェ曲線を手で描いてみる
一から学ぶベジェ曲線
・バーンスタイン多項式
・線分(1次ベジェ曲線)を説明する式で、[]が付与されている理由と縦に並んでいる理由は？
・終了後 → pathタグ