rust nannouで蝶々曲線を描く

蝶々曲線って聞いてことありますか？

その名の通り、蝶々の形をした曲線で、ある、関数を描画すると描ける曲線です。

今回は、朝の雑談部屋でやった、ライブコーディングを元にrust nannouで蝶々曲線を描く方法を解説していきます。

動画はこちら　https://youtu.be/PseUvXwPb-s

蝶々曲線とは
蝶々曲線を描く方法
まとめ

蝶々曲線とは

蝶々曲線とはどういうものかというと

実は、朝、「学のおもちゃ箱っていう本」を読んでるときに、「蝶々曲線」っていうのが出てきて、ナニコレ面白いと思ってコーディングしようと思いました

リンク

蝶々曲線っていうのがどういうものかっていうと、極座標$$r=\exp^{\cos{\theta}}-2\cos{(4\theta)}+\sin{(\frac{\theta}{12})}$$
であらわされるグラフです。

詳しいことは、書籍を読んでもらえると書いてあるので、割愛しますが

この極座標を描くとあら不思議、蝶々が現われるわけです。

蝶々曲線を描く方法

では、蝶々曲線をrust nannouを使って描いていきましょう。

今回は、Modelとupdateを使って、polylineで描いていきます。

Modelの定義と初期化

Structでmodelの変数を作ります。

今回はpolyline使うので、座標を収納するベクタ(chocho_points)を作ります。それと、update関数の中で使う$\theta$も併せて定義します。

こんな感じです。

Struct Model{
chocho_points:Vec<Vector2>,
theta : f32,
}

次にこれをmodel関数の中で、初期化します

fn model(app:&App)->Model{
....
....
     let mut chocho_points = Vec::new();
     chocho_points.push(pt2(0.0, 0.0));
Model{
     chocho_points,
     theta:0.0,
}
}

これでmodel定義と初期化は完了です

update関数で座標の算出と更新

さて、structとmodel関数で定義初期化したモデルをアップデート関数で計算していきましょう。

まずは、変化する値thetaと座標の拡大縮小をするscaleを作ります。

fn update(_app: &App, model: &mut Model, _update: Update) {
   let delta_theta = 0.01;
   model.theta += delta_theta;
   let scale = 50.0;
....
....
}

delta_thetaの値を変えることで、計算の細かさが変わります。scaleを変化させることで、図の大きさが変わります。

次に蝶々関数の極座標を計算していきます。まずはちょっと思い出してみましょう。

$$r=\exp^{\cos{\theta}}-2\cos{(4\theta)}+\sin{(\frac{\theta}{12})}$$

こうでしたね。

これを素直に計算します。

fn update(_app: &App, model: &mut Model, _update: Update) {
...
...
let r = model.theta.cos().exp() - 2.0 * ((4.0 * model.theta).cos()) + (model.theta / 12.0).sin();

....
....
}

こうなりますね。

あとは、これをｘ、ｙ座標して、chocho_pointsに追加していきます。

fn update(_app: &App, model: &mut Model, _update: Update) {
...
....
.....
　　　let x = scale * r * (model.theta.cos());
　　　let y = scale * r * (model.theta.sin());
　　　model.chocho_points.push(pt2(x, y));
}

極座標をｘ、ｙに変換する方法は

$$x=r\cos({\theta})\\y=r\sin({\theta})$$

これでupdate関数は完成。

これによって、蝶々曲線の座標はmodel.chocho_pointsに収納されます。

蝶々曲線のpolyline描画

あとは、view関数の中でpolylineを描いていきましょう。

fn view(app: &App, model: &Model, frame: Frame) {
...
...
     draw.polyline()
         .weight(2.0)
         .points(model.chocho_points.clone())
         .color(RED);
     draw.to_frame(app, &frame).unwrap();
}

こんな感じですね。

これで、蝶々曲線を描画することができました。

まとめ

今回は、朝のYouTubeLIVEの雑談部屋で行ったライブコーディングの蝶々曲線をまとめてみました。

雑談部屋では、ellipse関数を使った描画についても扱ってます。

生配配信中に思い付きで行ったライブコーディング。

これぐらいの関数なら、なんとか思い付きでも下準備でなしでできるかな？って感じです。

今回紹介した、蝶々曲線は、「数学のおもちゃ箱　下」に載っています。数学のおもちゃ箱は、蝶々曲線だけじゃなくて、数学に関する小話がいっぱい載っているので、気になる方は、手に取ってみてはいかがでしょうか？

リンク