ベジェ曲線のパラメータ表示
公開日
2025年1月31日
更新日
2025年3月9日
前回、前々回の動画で解説したベジェ曲線のパラメータ表示を求めてみます。
※前提知識として、高校数学の以下の単元を仮定しています。
・位置ベクトル
・内分の公式
●講師紹介：松中宏樹
https://wakara.co.jp/instructor/hirok…
●和からHP
汚いプログラムからの脱却
前回の動画では、ベジェ曲線の作り方 を紹介しました。
Desmos を使って、点の内分 を繰り返しながら 曲線 を描く方法でした。
でも、正直あのプログラム、汚かった ですよね。
コードが長くて見づらい、計算が重複している、
なんだか 美しさがない プログラムでした。
そこで今回は、もっと数学的に綺麗な方法 で、
ベジェ曲線を表現 してみたいと思います。
数式 を使うことで、シンプルで美しい ベジェ曲線の パラメータ表示 が可能です。
ベクトル表記で考える
ベジェ曲線 の 肝 は 4つの制御点 にあります。
P0, P1, P2, P3 の 4つの点 を使って、
曲線の形 が 決まる のですが、
これらの点を ベクトル だと考えましょう。
例えば、P0 = (1, 3) のように、
X座標 と Y座標 の 成分 を持つ ベクトル です。
P0, P1, P2, P3 全てを ベクトル として扱うことで、
数式 を 統一的 に 簡潔 に 書ける ようになります。
内分点の数式
まず、P0 と P1 を 結ぶ線分 上を動く A0 を考えます。
A0 は P0 から P1 へ、
s対(1-s) に 内分 する点です。
これを 数式 で書くと、次のようになります。
A0 = (1-s) \cdot P0 + s \cdot P1
同様にして、A1 や A2 も表せます。
A1 = (1-s) \cdot P1 + s \cdot P2
A2 = (1-s) \cdot P2 + s \cdot P3
s は 0 から 1 まで動き、
s = 0 のとき P0 にいて、
s = 1 のとき P1 に 移動 します。
二重の内分点
次に、A0 と A1 を 結ぶ線分 上を動く B0、
A1 と A2 を 結ぶ線分 上を動く B1 を考えます。
B0 は A0 と A1 の間を 内分 する点で、
B1 は A1 と A2 の間を 内分 する点です。
B0 = (1-s) \cdot A0 + s \cdot A1
B1 = (1-s) \cdot A1 + s \cdot A2
二重 に 内分 を繰り返しているのが わかります ね。
最終点 C の導出
最後に、B0 と B1 を 結ぶ線分 上を動く C を考えます。
C が 動く軌跡 が ベジェ曲線 そのものです。
C = (1-s) \cdot B0 + s \cdot B1
これを 整理 すると、以下のようになります。
C = (1-s)^3 \cdot P0 + 3s(1-s)^2 \cdot P1 + 3s^2(1-s) \cdot P2 + s^3 \cdot P3
綺麗な形 になりました！
三次のベジェ曲線 の パラメータ表示 が 完成 です。
パラメータ表示の意味
先ほどの 数式 を 展開 してみると、
s の 三次式 が並んでいるのが わかります。
これが 三次のベジェ曲線 と呼ばれる 理由 です。
さらに、P0, P1, P2, P3 の 重み を 係数 に持つことで、
制御点 の 位置 が 曲線の形 を 決めている のが 明確 です。
C = (1-s)^3 \cdot P0 + 3s(1-s)^2 \cdot P1 + 3s^2(1-s) \cdot P2 + s^3 \cdot P3
制御点 を 動かす ことで、曲線の形 が 変わる のが 理解 できます。
実際に描いてみる
Desmos や 他のグラフツール を 使って、
この数式 を 実際に描いてみましょう。
P0, P1, P2, P3 を 自由に配置 して、
s を 0から1まで動かす と、
滑らかな曲線 が 描ける のを 確認 できます。
前回の内分を繰り返す方法 と 今回の数式 で 同じ曲線 が 描かれる のを、
比較 してみるのも 面白い ですよ。
数学の美しさを感じる
ベジェ曲線 を パラメータ表示 で 表現 することで、
内分の繰り返し を 一つの数式 に まとめられ ました。
長くて煩雑だったプログラム が、
たった一行の数式 で シンプル に 書ける ことに、
数学の美しさ を 感じます。
次回 は、この パラメータ表示 を 利用して、
より応用的なベジェ曲線 の 描き方 を 紹介 します。
デザイン に 役立つテクニック を お見せ しますので、
次回もお楽しみに。
