ベジェ曲線の作り方
公開日
2025年1月30日
更新日
2025年3月9日
前回の動画で解説したベジェ曲線をグラフ描画ソフトdesmosで描いてみましょう。
●講師紹介：松中宏樹
https://wakara.co.jp/instructor/hirok…
●和からHP
ベジェ曲線を作ってみよう
前回の動画で ベジェ曲線 について 紹介 しました。
二次曲線 が 内分する点の動き で 曲線が描かれる こと、
そして 制御点 が 曲線の形 を 決める ことを 説明 しましたね。
今回のテーマは ベジェ曲線の作り方。
「Desmos」 という グラフ描画ソフト を 使って、
実際にベジェ曲線を作ってみましょう。
制御点を準備する
ベジェ曲線 を 作るため に 必要なもの は、
4つの制御点 です。
P0, P1, P2, P3 の 4点 が、
曲線の形 を 決定 します。
P0 が 出発点、P3 が ゴール で、
P1 と P2 が 曲線の方向 と 勢い を 決めます。
まずは Desmos に P0, P1, P2, P3 を 設定 します。
それぞれの点 を 配置 したら、
「P0」、「P1」 のように 名前をつけていきます。
制御点を結ぶ線を描く
次に P0P1、P1P2、P2P3 の 3つの線分 を 描きます。
これらは 制御線 と呼ばれ、
曲線の方向と勢い を 決める 重要な線 です。
Desmos では、パラメーター t を 使って、
線分を描く ことができます。
t が 0から1まで動く ように設定し、
1-t 対 t の 内分点 を 計算 して、
P0 から P1 を 繋ぐ線分 を 作ります。
同様に、P1P2、P2P3 も 結んで、
3つの制御線 を 描きます。
色 を 統一 して、見やすく しましょう。
内分点を動かす
次に、P0P1 上を動く A0、
P1P2 上を動く A1、
P2P3 上を動く A2 を 設定 します。
これらの点 は、パラメーター s によって 動きます。
s が 0から1まで動く ように 設定 し、
1-s 対 s の 内分点 として 計算 します。
Desmos の スライダー機能 を 使うと、
s を 動かしながら、A0, A1, A2 の 動き を 確認 できます。
A0 が P0P1 を動き、
A1 が P1P2 を動き、
A2 が P2P3 を動く様子が 視覚化 されます。
次の内分点を作る
次は、A0A1 を結ぶ B0 と、
A1A2 を結ぶ B1 を 作ります。
B0 は A0A1 を s によって 内分 し、
B1 は A1A2 を s によって 内分 します。
B0 と B1 を 結ぶ線分 も 描き、
動き を 確認 しましょう。
A0, A1, A2 の 動き に 連動 して、
B0 と B1 も 動き ます。
最終点 C を作る
最後に、B0B1 上を s によって 内分 する点、C を 作ります。
C の 動き を 確認 すると、C が P0 から P3 に向かって、滑らかな曲線 を 描いている のが わかります。この C の動き が、3次のベジェ曲線 の 正体 です。
Desmos の スライダー を 動かして、C が 滑らかに動く様子 を 観察 してみてください。
ベジェ曲線を完成させる
C の動きの軌跡 を 描けば、ベジェ曲線 が 完成 します。
s を t に 置き換え、
t が 0から1まで動く ように 設定 すれば、
C の動きの奇跡 が 連続して描かれ、
ベジェ曲線 が 表示されます。
Desmos での 実装 では、
t の 変化 に 連動 して C が動く ように 設定 することで、
曲線 が 滑らか に 描かれます。
ベジェ曲線の動きを楽しむ
P0, P1, P2, P3 の 位置 を 自由に動かして、
ベジェ曲線の形 を 変えて みましょう。
出発点 の 方向 や ゴールの入り方 を 自在に変更 できます。
これが、ベジェ曲線 が デザインの世界 で よく使われる理由 です。
直感的に操作 できて、滑らかな曲線 が 簡単に描ける。
デザイナー たちが 愛用 するのも 納得 です。
最後に
ベジェ曲線 を 作る過程 を 体験 してみると、
数学的な理論 と デザイン が 融合 していることに 気づきます。
シンプルな数式 から 複雑な曲線 が 生まれる。
まさに数学の美しさ です。
次回 は このベジェ曲線を使った応用例 を 紹介 します。
デザイン に 役立つテクニック を お見せ しますので、
次回もお楽しみに。
