子供が遊ぶためにRust nannouでお絵かきツール作った。

世の中は、冬休み。
子供は毎日毎日家で暇を持て余しているわけです。

子供もまだ、保育園だから、宿題があるわけでもないし
今年はコロナの影響があって、お出かけするわけにもいかず。

近くの公園に行って遊ぶか、庭で遊ぶか、家でお菓子作りか？それともDVDか

パソコンで作業をしていると、娘が来て、遊びたいと
お絵かきしたい！というから。

作りましたよ！

お絵かきツール

まだ、子供も小さいから、ペイントは少し高度。
色を選んで筆を選んで、ドラッグして、はやっぱり難しいなと思って

仕様は

• マウスカーソルが常に描き続ける
• 色は、常に変化し続ける
• 左クリックで筆が大きくなり、右クリックで小さくなる
• Rを押すと、画面リセット
• Sを押すと、画面キャプチャして保存

っていう、超単純仕様。

でもこれが子供にははまったのか？

永遠と遊び続ける子供。
「ちょっと休憩しようよ」
と促しても、全然聞く耳持ちません(-_-;)

ひとまず楽しく遊んでくれました。

最初は、ただ、マウスカーソルの軌跡が残るだけだったけど、
大きくしたり保存したり画面消したりの仕様をつぎ足し継ぎ足しつくったので、
なんかごちゃごちゃしてるけど、こんな感じのコードです。

use nannou::prelude::*;
 fn main() {
     nannou::app(model).update(update).run();
 }
 struct Model {
     times: f32,
     size: f32,
 }
 fn model(app: &App) -> Model {
     let _window = app
         .new_window()
         .view(view)
         .key_pressed(key_pressed)
         .mouse_pressed(mouse_pressed)
         .build()
         .unwrap();
     Model {
         times: 0.0,
         size: 5.0,
     }
 }
 fn update(app: &App, model: &mut Model, _update: Update) {
     model.times = app.time;
 }
 fn view(app: &App, model: &Model, frame: Frame) {
     let draw = app.draw();
     let t = app.time;
     let c = t.cos() + t.sin();
     if frame.nth() == 0 || app.keys.down.contains(&Key::R) {
         draw.background().color(BLACK);
     }
     draw.ellipse()
         .hsla(c, 2.0, 0.5, 0.5)
         .x_y(app.mouse.x, app.mouse.y)
         .radius(model.size);
     draw.to_frame(app, &frame).unwrap();
 }
 fn key_pressed(app: &App, model: &mut Model, key: Key) {
     match key {
         Key::S => {
             app.main_window()
                 .capture_frame(app.exe_name().unwrap() + &format!("{:03}", model.times) + ".png");
         }
         other_key => {}
     }
 }
 fn mouse_pressed(_app: &App, model: &mut Model, button: MouseButton) {
     match button {
         MouseButton::Middle => {
             model.size += 5.0;
         }
         MouseButton::Left => {
             model.size += 5.0;
         }
         MouseButton::Right => {
             model.size -= 5.0;
         }
          => {
             model.size -= 5.0;
         }
     }
     if model.size < 5.0 {
         model.size = 5.0
     }
 }

youtubeで解説してます。