ベジェ曲線

その他

ベジェ曲線とは?

 状態:-  閲覧数:1,129  投稿日: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次ベジェ曲線とは? / ベジェ曲線の原理

 閲覧数:219 投稿日: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次ベジェ曲線

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

2次ベジェ曲線とは?


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

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

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

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

 閲覧数:222 投稿日: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タグ

Twitter検索結果。「ベジェ曲線」に関する最新ツイート

よろぢ @yorodi_
ベジェ曲線だいすこ 2022/07/03 01:35
ガノヲ🌺 @xganoo
恐竜の幼虫 @nnoow7
ベジェ曲線って… 2022/07/02 19:08
たにくる @tanikuru
たいけつ! @manyoverlove
ʞǝʇɐɓǝW💉💉💉 @mepen68000
ユリカ@3ヶ月毎日rkgk晒し上げ @Lily_Inagaki
✨ハイエナガール🛼 0.9/10✒️ @Hyenagirl_chan

デファクトスタンダード

公開鍵認証

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



週間人気ページランキング / 6-26 → 7-2
順位 ページタイトル抜粋 アクセス数
1 ベクトル | 数学 | プログラミング用語 268
1 curl | HTTPクライアント(ネットワーク) | プログラミング用語 268
2 ルーター | ネットワーク | プログラミング用語 267
3 Flash Video | コンテナフォーマット | プログラミング用語 265
4 正規表現 | プログラミング | プログラミング用語 261
5 デーモン | Linux | プログラミング用語 258
6 ユースケース | 開発 | プログラミング用語 237
7 チェックアウト | バージョン管理システム(開発) | プログラミング用語 158
8 YouTube | API | プログラミング用語 128
9 Linux | プログラミング用語 45
10 PowerShell | スクリプト | プログラミング用語 44
11 可搬性 | プログラミング | プログラミング用語 33
12 クローラ | 検索エンジン | プログラミング用語 25
13 Subversion | バージョン管理システム(開発) | プログラミング用語 23
14 アンチパターン | プログラミング | プログラミング用語 11
15 プログラミング用語 9
16 deflate | ネットワーク | プログラミング用語 8
17 Nginx / Nginxとは?/ Apacheとの違い | プログラミング用語 6
17 YouTubeに掲載されている動画を、ユーザーが作成したWebサービス上で再生する方法 | プログラミング用語 6
17 WebLogic | アプリケーションサーバ(サーバ) | プログラミング用語 6
2022/7/3 1:01 更新