ベジェ曲線

その他

ベジェ曲線とは?

 状態:-  閲覧数:1,631  投稿日: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) により別々に考案された
・ド・カステリョの方が先んじていたが、その論文が公知とならなかったためベジェの名が冠されている

1次ベジェ曲線とは? / ベジェ曲線の原理

 閲覧数:331 投稿日:2017-07-05 更新日:2017-08-31 

1次ベジェ曲線とは?


2 個の制御点から得られる 1次曲線(=直線)
N 個の制御点から得られる N - 1 次曲線
二次曲線があるなら、一次曲線とか三次曲線もありますか?


ただの直線
・一本の線分(P0 から P1)の上を一定の割合で動く点の軌跡

線分を厳密に定義すると?
P0P1を結ぶ直線において、P0P1の間にある全ての点の集合
※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

ベクトルP0P1をxy座標で表す
P0=(P0x, P0y)
P1=(P1x, P1y)

(1 - t)P0+tP1 をxy座標で書き直す
((1-t)P0x+tP1x, (1-t)P0y+tP1y)

ベクトルP0P1の中間地点をxy座標で表す
・tは0.5
(0.5(P0x+P1x), 0.5(P0y+P1y))


2次ベジェ曲線

 閲覧数:307 投稿日:2017-07-09 更新日:2017-09-05 

2次ベジェ曲線とは?


3 個の制御点から得られる 2次曲線
始点 … P0
第1制御点 … P1
終点 … P2
N 個の制御点から得られる N - 1 次曲線

2段階
・一本の線分(P0 から P1)の上を一定の割合で動く点の軌跡
・一本の線分(P1 から P2)の上を一定の割合で動く点の軌跡
→「上記点同士を結ぶ線分」上を一定の割合で動く点の軌跡

最終的に
・曲線の両端の制御点(始点と終点)から、真ん中の制御点に近づくような曲線になる

3次ベジェ曲線とは? / 利用場面

 閲覧数:345 投稿日:2017-08-05 更新日:2017-09-11 

3次ベジェ曲線とは?


4個の制御点で示される曲線
始点第1制御点を結ぶ線分が「始点における曲線の接線」になる
第2制御点終点を結ぶ線分が「終点における曲線の接線」になる

4個の制御点構成
始点 … P0
第1制御点 … P1
第2制御点 … P2
終点 … P3
N 個の制御点から得られる N - 1 次曲線

3段階
・一本の線分(P0 から P1)の上を一定の割合で動く点の軌跡
・一本の線分(P1 から P2)の上を一定の割合で動く点の軌跡
→「上記点同士を結ぶ線分」上を一定の割合で動く点の軌跡A

・一本の線分(P1 から P2)の上を一定の割合で動く点の軌跡
・一本の線分(P2 から P3)の上を一定の割合で動く点の軌跡
→「上記点同士を結ぶ線分」上を一定の割合で動く点の軌跡B

⇒「上記AB点同士を結ぶ線分」上を一定の割合で動く点の軌跡


利用場面


コンピュータ上で滑らかな曲線を書く場合、3次ベジェ曲線はよく利用されている
・HTML5 の canvas
・SVG

ベジェ曲線 
ベジェ曲線を学び、実装する 

ベジエ曲線を使ってみよう

ベジェ曲線を手で描いてみる
一から学ぶベジェ曲線 

バーンスタイン多項式
線分(1次ベジェ曲線)を説明する式で、[]が付与されている理由と縦に並んでいる理由は?




・終了後 → pathタグ


デファクトスタンダード

公開鍵認証

コメント投稿(ログインが必要)