rust nannouでベジェ曲線を描きたいなと思って、素直にドキュメントで調べたら一応描き方があるようで、それをやっていきます。
ベジェ曲線とは？
ベジェ曲線は、N個の制御点をもつN-1次曲線っていうとわけわからないかもしれませね(笑)
始点と終点、作用点を作って、美しい曲線を描く方法です。
rust nannouでベジェ曲線を描く方法
実際にベジェ曲線をrust nannouで描いていきましょう
ベジェ曲線を描く二つの関数
rust nannouには、ベジェ曲線を描く関数が2つ用意されています。
- quadratic_bezier_to
- cubic_bezier_to
一つ目が、二次のベジェ曲線、2つ目が三次のベジェ曲線です。
２次のベジェ曲線は変数を２つ、３次は変数３つです。それぞれ、変数は、座標を渡しますが、データはVector2で渡します（pt2(x,y)で書けばOK)
ベジェ曲線を描く手順
ベジェ曲線を描くを描く手順は次の通りです。
- pathビルダーを作る
- pathを作ってビルドする
- pathを描く
という3つの手順を踏みます。
pathビルダーを作る
pathビルダーを作るのは簡単です。
let builder = nannou::geom::Path::builder();この1文でOK。
これで、ビルダーを定義する。あとは、このbuilderに対して作業を行っていきます。
pathを作ってビルドする。
これが、ベジェ曲線を描いていく手順で最も？重要なところです。
ベジェ曲線の関数を含め、pathをどうやって描いていくのかをここで定義していきます。
let path = builder
.move_to(pt2(-100.0, 200.0))
.quadratic_bezier_to(pt2(200.0, 150.0), pt2(20.0, -90.0))
.cubic_bezier_to(pt2(-150.0, 220.0), pt2(0.0, 150.0), pt2(-200.0, -10.0))
.build();これは一例ですが、これを描くとこんな感じになります。
コードを見ていきましょう
let path = builder
.move_to(pt2(-100.0, 200.0))
.quadratic_bezier_to(pt2(200.0, 150.0), pt2(20.0, -90.0))
.cubic_bezier_to(pt2(-150.0, 220.0), pt2(0.0, 150.0), pt2(-200.0, -10.0))
.build();図の中の緑は、始点と終点、黄色と紫は作用点を表してます。
1行目でpathっていう変数にpathを定義してくよ！
2行目move_to(座標)は始点移動。これで、描画を開始する点を指定します。指定しない場合は、原点(0.0,0.0)からスタート
3行目のquadratic_bezier_to（作用点の座標, 終点の座標）で、２次のベジェ曲線を作ります。
４行目cubic_bezier_to（作用点１の座標, 作用点2の座標, 終点の座標)で３次のベジェ曲線を作ります。
各関数の終点座標が、次の関数の始点座標になります。もし移動する場合は、その都度move_toで始点移動をします。
５行目最後buildを実行することで、ここまでの工程をビルドしてくれます。
builderの中には、ベジェ曲線を作る関数以外にも線を引くline_to(終点の座標)っていうのもあって、これを使うと、直線を引くことができます。
pathを描く
pathを作ることができたら、あとはこれを描いていきます。
描くのはdraw.path()で描いていきます。これに色々くっつける感じです。
これが、描画の一例です。順を追ってみていきましょう
draw.path()
.stroke()
.weight(10.0)
.color(RED)
.events(path.iter());１行目、pathを描くぞ！と宣言
２行目、線描画の命令です。これ以外にもfill()があります。fillを行うと塗りつぶししてくれます。
３行目、色の指定
４行目、ここで、初めて先ほど作ったpath情報を送ります。さっき作ったpath情報にiter()をつけて、pathイベントっていうデータに変換します。そしたらeventsがそれを受け取って、DrawingPathにしてくれて、その結果drawが使える感じにしてくれます。
これでベジェ曲線は完成です！
まとめ
今回は、rust nannouでベジェ曲線を描きました。
ベジェ曲線はベクタ型のイラストツールでおなじみですよね。ツールでやってもベジェ曲線ってちょっと慣れるまで難しいですが、それを座標で渡すって、結構大変(笑)
けど、ベジェ曲線は、曲線の軌跡をコンピュータが計算してくれるので拡大縮小しても滑らかな曲線がかけるんですよね。
使いどころで面白いことができるので、一度試してみてはいかがでしょうか？
ではまた！
コメント