BETA

ベジェ曲線を完全に理解(入門)しよう

投稿日:2019-12-15
最終更新:2019-12-15

はじめに

この記事は東京高専プロコンゼミ① Advent Calendar 2019の14日目の記事です

公開予定の14日はぼくの誕生日です、おめでとう

対象

この記事は「SVG?なにかのゲーム?」という方や「ベジェ曲線とか聞いたことはあるがよく知らない」という方々に、こういうものもあるんだよと知ってもらうのを目的とした記事です

What is SVG?

皆さんはSVGファイルフォーマットを知っていますか?
SVGとはPNGとかJPEGとかみたいに画像を表すものです
PNGやJPEGと違い、テキストベースかつベクトル形式という特徴があります
ベクトルというのは数学にある「あの」ベクトルです
ベクトル形式では、線を数式として扱うため、どれだけ拡大縮小しても描画する際に線が再計算されるので劣化しません、つよい
劣化しないので、アイコンのように線で描くイラストなどでよく使われます
ちなみに、Adobe Illustrator(通称イラレ)はSVGを扱うソフトです

逆に、PNGやJPEGなどの画像はラスター形式と呼ばれ、いわゆるドット絵のことです
こちらは拡大して見ると、ドットのギザギザが見えてしまいますが
こちらのほうがグラデーションや、複雑な模様の表現が楽です

どちらも一長一短です

e.g.

こちらの画像のSVG版はFLAT ICON DESIGNでDLできます
QrunchにSVG画像は上げられないっぽいです

この程度のイラストならSVGでも余裕で書けます
頑張ればリアルな虎さんも描くことができます、興味がある方はググってください

SVGを知ろう

SVGはテキストベースなので、本気でやろうと思えば手打ちでも絵をかけます
書けますが、つらいです、何かしらのソフトで描きましょう

とはいえ、ソフトを使って描くにしてもSVGの中身はある程度知っていないと苦労します
簡単なイラストであれば、直線や図形の組み合わせで描けるので特に問題はありません
しかし、ここで問題になってくるのが曲線です

ベジェ曲線

SVGでは、曲線を描く際にベジェ曲線というものを用います
ベジェ曲線というのは、線の端の他に制御点を設定し、その制御点に沿うような形で線が曲げられます

入門なので、どういう式で表せるのかみたいなことは書きません
代わりに、制御点などを動かしてイメージを掴んでもらえるようにデモページを作ってきました
デモページを作る予定でした......
色々トラブルが重なり間に合いませんでした、後日追記したいと思います
代わりに、どのようなプロセスで描かれているか少しわかりやすい動画を載せます

四角い点が制御点です、文章で表すならこんな感じです

ある時間t秒かけて「点Aから制御点に向かう点」と、同じくt秒かけて「制御点から点Bに向かう点」の「両点を結ぶ線をt秒かけて通る点」が描く軌跡

が2次ベジェ曲線です(説明ムズイ)

察しの言い方ならわかると思いますが、3次ベジェ曲線というのもあります
当然一般化して、n次ベジェ曲線もあります
制御点の数はn-1個です、2次の場合は1個、3次の場合は2個です

3次以上になってくると、絵の説明でも非常にややこしくなるので
入門編の今回ではここまでとさせていただきます

おわりに

ベジェ曲線は、SVGくらいでしか使われておらず、なおかつ日常ではあまり触れないような考え方の概念なので、少しとっつきにくいと思います
ですが、ベジェ曲線が使われているSVGは、その特徴から様々なところで使われています
この記事によって、SVGに興味を持ったり、画像や数学に対する見方が少しなりでも変わるきっかけになれば嬉しいです

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@sgthr7の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう