n次ベジェを描けるようになろう

※この記事は前のブログで2018年12月17日に投稿されたものです。最新の情報ではない可能性があります こんにちは。最近ジーンズの膝の部分に穴が空いてダメージジーンズになった水珈琲です。この記事はアドベントカレンダーに参加してるそうです。 突然ですが、みなさんはベジェ曲線を知ってますか?canvasなんかで使った事がある人も多いと思います。しかし、大半のソフトウェアでは2次ベジェ、3次ベジェのみに対応しており、n次ベジェ(nは4以上の自然数)に対応していないことが多いです。 この記事では、ベジェ曲線の仕組みを知り、自分で描けるようになるのを目標にしています。 n次ベジェのイメージを掴みたい方はこちらで遊んでみてください。 第一章 ベジェ曲線って何? この章では、ベジェ曲線のうっすら概要を説明します。 簡単に言うとベジェ曲線というのはコンピュータで扱いやすい曲線の描画方法です。 Wikipediaでは ベジエ曲線とは、N 個の制御点から得られる N − 1 次曲線である。「ベジェ曲線」『ウィキペディア日本語版』 2018年2月3日(土)01:00 UTC と表現されています。 よくわからない人も多いと思うので、私なりの言葉にすると、「めっちゃ短い直線をくねくね繋げたら曲線に見える気がする」です。更に意味不明になったと思うのでgif画像を見てもらいたいと思います。下記画像は所謂2次ベジェ曲線です。 実際にn次ベジェが試せるページ 上の画像を見ると20辺りから直線感は無くなっていると思います。この章では、ベジェ曲線っていうのは直線の集合なんだな〜というのが分かってもらえたら十分です。 第二章 ベジェ曲線を描こう この章では、実際にベジェ曲線を(出来れば皆さんの手で)書いてみたいと思います。 2次ベジェ曲線 まず、2次ベジェ曲線は 前提条件: 0 < n < 1 各辺の長さ*n の場所同士を直線で結ぶ 結んだ直線の長さ*n の場所にマークを打つ 滑らかになるまで1と2を繰り返した後、それらのマークを直線で繋げる という手順で描くことができます。nの分割を細かくするとするほど滑らかになります。 今回は、手書きがしやすいので4分割(分割点は3つ)にしたいと思います。分割点は、0.25・0.5・0.75になります。分かりやすいので、0.5(=中心)から始めます。 下準備 まず、「制御点」というものを配置します。今回は2次ベジェ曲線なので、3個の制御点が必要です。 そして、それらを直線で繋ぎます。 n = 0.5 手順1. 各辺の長さ*n の場所同士を直線で結ぶ 手順2. 結んだ直線の長さ*n の場所にマークを打つ n = 0.25 手順1. 各辺の長さ*n の場所同士を直線で結ぶ 手順2. 結んだ直線の長さ*n の場所にマークを打つ n = 0.75 手順1. 各辺の長さ*n の場所同士を直線で結ぶ … Continue reading n次ベジェを描けるようになろう