デザイナーが曲線を描く際に使用するベジェ曲線が数学的にどのようなものなのか、その長所を解説します。

●講師紹介：松中宏樹

https://wakara.co.jp/instructor/hirok…

●和からHP

https://wakara.co.jp/

#数学

#desmos 

#ベジェ曲線

ベジェ曲線とは

今日は ベジェ曲線 について 紹介 します。

デザイン の世界で よく使われている曲線 ですが、

実際にどういう仕組みで描かれているのか を 理解 していますか？

ポスター や 服のデザイン、イラスト制作 など、

様々なデザイン分野 で このベジェ曲線 が 使われています。

でも、どうやって形作られているのか を 知らない 人も多いはず。

実際、この赤い曲線 が ベジェ曲線 です。

ぐにゃっと 曲がっていますが、滑らか で 美しい。

自由自在に形を作れる ので、デザインの必需品 となっています。

制御点の役割

ベジェ曲線 を 描くために必要な点 は 4つ です。

それが P0, P1, P2, P3 という 4つの制御点。

出発点 が P0、ゴール が P3。

P1 と P2 は 曲線の方向と勢い を 決めるポイント です。

P0 から P3 に 曲線が進む のですが、

最初にどの方向に進むか を P1 が 決めて、

最後にどの方向からゴールするか を P2 が 決めます。

例えば、P1 を 左に引っ張る と、

左方向に引っ張られたような曲線 に なります。

P2 を 右下に引っ張る と、

右下に曲がってから ゴールする曲線 が 描かれます。

P0P1 の 距離が長ければ長いほど、

曲線はその方向に強く引っ張られる ため、勢い が 増します。

逆に短ければ、あまり影響を受けない ので、

出発点からゴールまで まっすぐ進むような曲線 になります。

ベジェ曲線が使われる理由

なぜベジェ曲線が使われるのか。

それは、少ない情報で滑らかな曲線を表現できるから です。

例えば、この 赤い曲線 を 正確に表現 したい場合、

点を細かく記録 して 伝える 必要があります。

でも、点の数が増えれば増えるほど、

データ量 が 膨大 になり、管理が大変 になります。

しかし、ベジェ曲線 は 4つの制御点 の 座標 だけで 表現 できます。

つまり、P0, P1, P2, P3 の x座標とy座標、

合計8個の数値 だけで 滑らかな曲線 が 描ける のです。

データ量が少ない ため、

コンピュータでの管理がしやすい のはもちろん、

ファイルサイズも軽く、編集も簡単。

だから、デザインの世界 で 広く使われている わけです。

ベジェ曲線の連結と滑らかさ

複雑なデザイン を 作りたい時、

ベジェ曲線 を 繋げて表現 することが あります。

でも、ただ繋げるだけ だと、滑らかさが失われる ことがあります。

例えば、P3 と Q0 を 重ねて、

2つのベジェ曲線 を 繋げた場合、

滑らかでない 尖った感じ の 曲線 になることが あります。

これを防ぐために、

P2P3 と Q0Q1 の 方向を揃え、

さらに長さまで揃える と、

滑らかに繋がる ように なります。

方向を揃える だけでも 滑らかさ が 確保 され、

勢いまで揃えれば、完全に自然な曲線 に 繋がります。

これがベジェ曲線の大きなメリット です。

ベジェ曲線の種類

ベジェ曲線 には 1次、2次、3次 の 3種類 があります。

デザインの世界 で 最も使われている のは 3次のベジェ曲線。

P0, P1, P2, P3 の 4つの制御点 を 使うもの です。

1次のベジェ曲線 は P0 と P1 の 2点 だけを 使います。

直線 になります。

2次のベジェ曲線 は P0, P1, P2 の 3点 を 使います。

放物線のような曲線 になります。

しかし、曲がり方 が 1箇所だけ なので、

滑らかさ を 調整 するのが 難しい です。

3次のベジェ曲線 は 2箇所の曲がり方 を 調整 できるので、

出発点 と ゴール の 方向 を 自由自在に操作 できます。

直感的に曲線を描ける ため、デザインの現場 で 広く使われています。

ベジェ曲線の数学的仕組み

ベジェ曲線 は 数学的に 「内分点」 を 利用 して 描かれています。

例えば、3次のベジェ曲線 の場合、

P0P1 上を動く A0、P1P2 上を動く A1、

P2P3 上を動く A2 が S対1-S に 内分 します。

次に、A0A1 上を動く B0、A1A2 上を動く B1 が 現れ、

最後に、B0B1 上を動く C の 奇跡 が ベジェ曲線 になります。

これがベジェ曲線の仕組み です。

制御点の位置 を 変える ことで、

自由自在に曲線の形 を 変化させられる のが ポイント です。

最後に

ベジェ曲線 の 仕組み を 理解 すると、

ただのデザインツール ではなく、

数学的な美しさ を 持った曲線 だと 気づく はずです。

デザイナー の 直感 と 数学の理論 が 融合 した ベジェ曲線。

次回 は ベジェ曲線を応用したデザインテクニック を 紹介 したいと思います。

次回もお楽しみに。