Nannouのテンプレートを作った
91122 ワード
GIFの仕様でカクカクしてるけど実際はぬるぬる
はじめに
追加していくより消す方が簡単なので全部入りテンプレートを最初に作っておく。
コード
template.rs
// ドキュメント
// https://docs.rs/nannou/latest/nannou/
//
// 色名一覧
// https://docs.rs/nannou/latest/nannou/color/named/index.html
use nannou::prelude::*;
// 1つのオブジェクトの例
// モジュール化する例としてわかりやすい
mod ball;
use crate::ball::Ball;
// 複数のオブジェクトを管理する1つのオブジェクトの例
// モジュール化する例としてわかりやすい
mod particle_system;
use crate::particle_system::ParticleSystem;
// 繰り返し処理で便利なのでとりあえず入れとこう
#[allow(unused_imports)]
use itertools::Itertools;
struct Model {
any_value1: isize, // 何か
mouse_down: bool, // 左クリックで true になる
ball: Ball, // 中央をまわる物体
ps: ParticleSystem, // マウス位置から噴射するツブツブを管理してるやつ
}
impl Model {
// Model 内のメンバー変数を操作するまとまった処理はここに書く
// それがまとまったら Ball みたいに別のクラスにする
fn any_value1_change(&mut self, sign: isize) {
self.any_value1 += sign;
}
}
fn main() {
// お約束
nannou::app(model).event(event).update(update).run();
}
fn model(app: &App) -> Model {
// ここらへんもお約束
app.new_window()
.size(640, 480) // あとからは app.window_rect() でわかるので定数にしなくてもよかろう
.mouse_pressed(mouse_pressed)
.mouse_released(mouse_released)
.view(view)
.build()
.unwrap();
// Windowタイトルを入れる場合
if true {
app.main_window().set_title("Nannou all in one template");
}
// Model のインスタンスを返す決まりになっている
Model {
any_value1: 0,
mouse_down: false,
ball: Ball::new(DODGERBLUE),
ps: ParticleSystem::new(),
}
}
fn event(app: &App, model: &mut Model, event: Event) {
if let Event::WindowEvent {
simple: Some(KeyPressed(key)),
..
} = event
{
// キーを叩いたタイミングで任意の処理を1回だけ行うとき用
// 押しっぱなしにはならない
match key {
Key::Z => {},
Key::X => {},
Key::C => {},
Key::Space => {},
Key::Left => model.any_value1_change(-1),
Key::Right => model.any_value1_change(1),
// 垂直同期モード (デフォルト)
// 常時何か動いているとき用
Key::Key1 => app.set_loop_mode(LoopMode::RefreshSync),
// FPS指定モード (だけど効いてなくない？)
Key::Key3 => app.set_loop_mode(LoopMode::rate_fps(30.0)),
Key::Key6 => app.set_loop_mode(LoopMode::rate_fps(60.0)),
// マウスが動いたりしたときだけ描画するモード
// ほぼ静止画でいいとき用
Key::Key0 => app.set_loop_mode(LoopMode::Wait),
// 1回描画したらもう何もしないモード (PAUSEとして使える)
Key::P => app.set_loop_mode(LoopMode::loop_once()),
// 全画面モードは設定しなくても最初から Command + f で行える
// Key::F => app.main_window().set_fullscreen(true),
// アプリ終了 (最初からEscでも終了できるようになっている)
Key::Q => app.quit(),
// フレームをPNG画像として保存する
Key::S => app
.main_window()
.capture_frame(app.exe_name().unwrap() + ".png"),
_ => {}
}
}
}
fn mouse_pressed(_app: &App, model: &mut Model, button: MouseButton) {
match button {
MouseButton::Left => model.mouse_down = true,
MouseButton::Right => {},
_ => {}
}
}
fn mouse_released(_app: &App, model: &mut Model, button: MouseButton) {
match button {
MouseButton::Left => model.mouse_down = false,
MouseButton::Right => {},
_ => {}
}
}
// 何か動かすときの処理
fn update(app: &App, model: &mut Model, _update: Update) {
// ボールを動かす
if true {
model.ball.update(&app);
}
// パーティクルを動かす
if true {
model.ps.origin = pt2(app.mouse.x, app.mouse.y);
// app.time は1秒間で1.0進むので60倍すればフレーム数カウンタのように使える
// なので % 3 すれば3フレーム毎に処理を行える
if (((app.time * 60.0) as usize) % 3) == 0 { // 3フレーム毎に1発
model.ps.add_particle();
}
model.ps.update();
}
}
// 表示処理
// 行儀の良いコードを書くならここで model の更新はしない方がいい
fn view(app: &App, model: &Model, frame: Frame) {
let draw = app.draw();
let win = app.window_rect();
// 全消去 (残像なし)
if true {
frame.clear(hsl(240.0 / 360.0, 1.0, 0.03));
}
// 全消去 (残像あり)
if false {
draw.rect()
.wh(app.window_rect().wh())
.hsla(240.0 / 360.0, 1.0, 0.03, 0.1);
}
// 左上からマウスに線
if true {
let start = win.top_left();
let mouse = app.mouse.position();
draw.line().points(start, mouse).color(DODGERBLUE);
}
// 左上に長方形
if true {
let r = Rect::from_w_h(100.0, 100.0);
let r = r.top_left_of(win.pad(30.0)); // 余白
draw.rect()
.xy(r.xy())
.wh(r.wh())
.hsla(1.0, 1.0, 1.0, 0.0)
.stroke_weight(1.0) // 枠を書くときは必須
.stroke(DODGERBLUE);
}
// 右下に円
if true {
let r = Rect::from_w_h(100.0, 100.0);
let r = r.bottom_right_of(win.pad(30.0)); // 余白
draw.ellipse()
.xy(r.xy())
.wh(r.wh())
.hsla(1.0, 1.0, 1.0, 0.0)
.stroke_weight(1.0) // 枠を書くときは必須
.stroke(DODGERBLUE);
}
// 右上に5角形
if true {
let r = Rect::from_w_h(100.0, 100.0);
let r = r.top_right_of(win.pad(30.0)); // 余白
draw.ellipse()
.resolution(5.0) // 3.0 なら三角で 4.0 なら◇
.xy(r.xy())
.wh(r.wh())
.no_fill()
.stroke_weight(1.0) // 枠を書くときは必須
.stroke(DODGERBLUE);
}
// 左下に三角
// 3点が決まっている場合は tri() でよいけど
// ただの三角であれば draw.ellipse().resolution(3.0) の方が扱いやすい
if true {
let r = Rect::from_w_h(100.0, 100.0);
let r = r.bottom_left_of(win.pad(30.0)); // 余白
draw.tri()
.points(r.bottom_left(), r.mid_top(), r.bottom_right())
.no_fill()
.stroke_weight(1.0)
.stroke(DODGERBLUE);
}
// 左下に三角
if true {
let r = Rect::from_w_h(100.0, 100.0);
let r = r.bottom_left_of(win.pad(30.0)); // 余白
draw.tri()
.points(r.bottom_left(), r.mid_top(), r.bottom_right())
.hsla(1.0, 1.0, 1.0, 0.0)
.stroke_weight(1.0)
// .rotate(app.time)
.stroke(DODGERBLUE);
}
// 中央からマウスに矢印
if true {
draw.arrow()
.start_cap_round()
.weight(3.0) // 太さ
.points(vec2(0.0, 0.0), app.mouse.position())
.color(DODGERBLUE);
}
// 中央から十字矢印
if true {
let crosshair_color = DODGERBLUE;
let ends = [
win.mid_top(),
win.mid_right(),
win.mid_bottom(),
win.mid_left(),
];
ends.iter().for_each(|&end| {
draw.arrow()
.start_cap_round()
.head_length(16.0)
.head_width(8.0)
.color(crosshair_color)
.end(end);
})
}
// マウス座標をマウス位置に表示
if true {
let mouse = app.mouse.position();
let pos = format!("[{:.1}, {:.1}]", mouse.x, mouse.y);
draw.text(&pos)
.xy(mouse + vec2(0.0, 20.0))
.font_size(14)
.color(DODGERBLUE);
}
// マウスの衛星
if true {
let x = (app.time * 5.0 * 0.3).cos() * win.w() / 2.0;
let y = (app.time * 6.0 * 0.3).sin() * win.h() / 2.0;
// map_range を使う場合
// nannou のサンプルでは単に * win.w() / 2.0 などとせず map_range で広げている
// let x = (app.time * 5.0 * 0.3).cos();
// let y = (app.time * 6.0 * 0.3).sin();
// let x = map_range(x, -1.0, 1.0, win.left(), win.right());
// let y = map_range(y, -1.0, 1.0, win.bottom(), win.top());
draw.ellipse().x_y(x, y).color(DODGERBLUE);
}
// 何か押しているとき何かする処理
// キーのチェックは fn event 内で行わないといけないわけではない
if true {
if app.keys.down.contains(&Key::Z) {
println!("{:?}", app.keys.down);
}
if app.keys.down.contains(&Key::X) {
println!("{:?}", app.keys.down);
}
if app.keys.down.contains(&Key::C) {
println!("{:?}", app.keys.down);
}
}
// 描画処理はここに書かずに委譲する例
if true {
model.ball.display(&draw);
model.ps.draw(&draw);
}
// アプリ情報を表示
if true {
let r = Rect::from_w_h(win.w(), 22.0).bottom_left_of(win.pad(0.0));
// draw.rect().xy(r.xy()).wh(r.wh()).rgb(0.0, 0.0, 0.4);
let text = format!("{:?} {}", model.mouse_down, model.any_value1);
draw.text(&text).xy(r.xy()).wh(r.wh()).color(CORNFLOWERBLUE);
}
// システム情報を表示
// 毎フレーム描画しているのかわかるように描画数やFPSは常に表示しておくのがおすすめ
if true {
let r = Rect::from_w_h(win.w(), 22.0).top_left_of(win.pad(0.0));
let text = format!(
"{} {:.2} {:.0}fps {:?} {}x{} M({:.0},{:.0}) {:.0} ",
frame.nth(),
app.time,
app.fps(),
app.loop_mode(),
win.w(),
win.h(),
app.mouse.x,
app.mouse.y,
app.mouse.position().length(),
);
draw.text(&text)
.xy(r.xy())
.wh(r.wh())
.left_justify()
// .align_text_top()
.color(CORNFLOWERBLUE);
}
draw.to_frame(app, &frame).unwrap();
}
ball.rs
// 参考
// https://github.com/nannou-org/nannou/blob/master/examples/rust_basics/7_modules/ball.rs
use nannou::prelude::*;
pub struct Ball {
pub position: Point2,
color: Srgb<u8>,
alive_counter: f32,
}
impl Ball {
pub fn new(color: Srgb<u8>) -> Self {
Ball {
color: color,
position: pt2(0.0, 0.0),
alive_counter: 0.0,
}
}
pub fn update(&mut self, app: &App) {
self.position = pt2(app.mouse.x, app.mouse.y);
self.alive_counter += 1.0;
}
pub fn display(&self, draw: &Draw) {
let x = self.position.x + (self.alive_counter * 0.10).cos() * 50.0;
let y = self.position.y + (self.alive_counter * 0.10).sin() * 50.0;
draw.ellipse()
.x_y(x, y)
.radius(8.0)
.color(self.color);
}
}
particle_system.rs
// ↓オリジナル
// https://github.com/nannou-org/nannou/blob/master/nature_of_code/chp_04_systems/4_03_exercise_moving_particle_system.rs
//
// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com
//
// example 4-03: Exercise Moving Particle System
use nannou::prelude::*;
struct Particle {
position: Point2,
velocity: Vec2,
acceleration: Vec2,
alive_counter: f32,
}
impl Particle {
fn new(l: Point2) -> Self {
let acceleration = vec2(0.0, 0.08);
let velocity = vec2(random_f32() * 1.0 - 0.5, -4.0 + random_f32() * -4.0);
let position = l;
let alive_counter = 0.0;
Particle {
acceleration,
velocity,
position,
alive_counter,
}
}
fn update(&mut self) {
self.velocity += self.acceleration;
self.position -= self.velocity;
self.alive_counter += 1.0;
}
fn display(&self, draw: &Draw) {
draw.rect()
.xy(self.position)
.w_h(4.0, 4.0)
.color(DODGERBLUE);
}
fn is_dead(&self) -> bool {
self.alive_counter >= 60.0 * 4.0
}
}
pub struct ParticleSystem {
particles: Vec<Particle>,
pub origin: Point2,
}
impl ParticleSystem {
pub fn new() -> Self {
let origin = pt2(0.0, 0.0);
let particles = Vec::new();
ParticleSystem { origin, particles }
}
pub fn add_particle(&mut self) {
self.particles.push(Particle::new(self.origin));
}
pub fn update(&mut self) {
// FIXME: もうちょっと綺麗に書けないものか
for i in (0..self.particles.len()).rev() {
self.particles[i].update(); // FIXME: 添字アクセスは止めたい
if self.particles[i].is_dead() {
self.particles.remove(i);
}
}
}
pub fn draw(&self, draw: &Draw) {
for p in self.particles.iter() {
p.display(&draw);
}
}
}
備忘録としてのNannou導入手順
~/src/nannou-playground に作るとする。
shell
cd ~/src
cargo new nannou-playground
cd nannou-playground
cargo add nannou
cargo add itertools
mkdir -p examples
cd examples
として examples のなかにファイルを置いていく。
そこで examples/foo.rs を実行するには cargo run --example foo とする。
src/main.rs に書いてもいいけど、いろいろ試したいときは examples の中に作った方がファイル毎にエントリーポイントを切り替えることができて開発しやすい。
参考
Author And Source
この問題について(Nannouのテンプレートを作った), 我々は、より多くの情報をここで見つけました https://zenn.dev/megeton/articles/0542a7b2f66139著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol