Go&Ebitengineで3次ベジェ曲線体験
はじめに
Ebitengineにはvectorパッケージがあってベクタグラフィックスを扱うことができる。HTML5のCanvasライクな感じになっていてなかなか興味深い。ということで3次ベジェ曲線をいじってみるツールを作ってみた。
Githubに置く
実行はこちら。 コードはこちら。
これは何か
Ebiten.vectorを使った3次ベジェ曲線の描画関数と、前から作っているuiやprimitiveを扱う機能群を活用したベジェ曲線体験ツールとなる。ベジェ曲線の気持ちになれる。
実はEbitenのソースでbezierって検索して関数が出てこないので、ベジェ曲線の関数無いのか？って思って(Geminiさんに聞いたら「ありません」って言われて)自分で作ってみたのだが、後で見直したらコメントにBézierって書かれていて、そりゃ検索できねーわって、没にしようと思ったのだが、せっかくだから記事にした次第。vector.CubicTo()がEbitenの3次ベジェ曲線描画関数だ。
内容
3次ベジェ曲線とは
3次ベジェ曲線は始点と終点に制御点2個を指定して描画する曲線である。Wikipediaを見たり
解説してる記事を眺めたり
してもだいたい難しくてよくわからない。
個人的にはNanoVGというベクタグラフィックスライブラリのコードを見て勉強していたので描画はできるが、数学的には難しい物みたいだ。数学の人にとっては簡単かもしれんが。
ベジェ曲線の特徴としては、割合で途中の座標を算出することができて、例えば半分に分割した時に、半分の曲線を描画するための始点終点制御点(アンカーとハンドルっていうのか？)を算出することができる。
この特徴を利用して、再帰で半分にしていって、直線で描画できるサイズまで分割して、path.LineToで描画する仕組みになっている。これはNanoVGを参考にし(パクっ)ている。
これはたぶん、みんなベジェ曲線を描画するときは同じアルゴリズムを使う。Ebitenのvector.CubicTo()もそう。
ベジェ曲線の凄いところはアンカーとハンドルの置き方次第でほぼ真円を描画することができるところで、ベクタグラフィックスの円描画はだいたいこれを活用する。これまたEbitenでも同様。
体験ツール
アンカーとハンドルをタッチで移動できるようにして、下にスライダー(新開発)を用意して、割合の操作もできるようにしている。算出された赤い点が曲線の上を移動するのが見てわかるだろう。
水色の点はスマホだと小さいので判定を大きめにしてあるが、それでもまだ小さい気がする。スマホ難しいな。
おしまい
曲線を描画するアルゴリズムにはスプライン曲線というのもあるが、こっちは計算が途轍もなく難しい。ちょっと俺には無理。でも検索するとGoで計算するライブラリがあるみたいなので、そういうのを活用したらEbitenで描画できるのかもしれなくて、いずれチャレンジしてみるときがくるかもしれない。
Discussion