🎛️ :: Model 구조화: 기본 impl 방식 비교

Nannou에서는 Model을 중심으로 앱 상태를 관리합니다.

• 기본적으로 struct Model로 필드만 정리하고, model, update, view 함수에서 로직을 처리합니다.
• model함수에서 Model 인스턴스를 생성하고 update, event, view 함수가 이 Model의 데이터를 변경하거나 읽어서 로직을 처리합니다.

반면 impl Model로 메서드를 추가하면 상태와 동작을 캡슐화하여 OOP 스타일을 도입할 수도 있습니다.

• Model 내부에 동작(메서드)를 캡슐화하기 때문에 재사용성이 증가합니다.
• update/view에서는 여전히 &mut Model 또는 &Model을 받아 내부 메서드를 호출합니다.

런타임 성능 차이는 거의 없으므로 (동일한 바이트 코드로 컴파일 됨) 설계 방식에 따라 선택하면 됩니다.

1. struct & free functions (전통적인 nannou 스타일)

Model을 단순한 데이터 컨테이너로 사용합니다.

초기화는 model 함수, 상태 변경은 update, 렌더링은 view 같은 Nannou가 제공하는 메인 콜백 함수의 내부에서 처리합니다. 로직이 함수 중심으로 분리되어 간단합니다.
전역 함수로 구성하면 각 콜백의 입출력(시그니처)이 한눈에 보이는 장점이 있습니다.

다만 상태 변경에 대한 로직이 분산되어 유지보수가 어려워지고, 동일한 상태에 대한 로직을 재사용하기 어렵습니다.
또한 구조체 내부의 구현을 밖에서 쉽게 다루게 되므로 캡슐화가 약합니다.

📝 struct + free functions 예시 1

use nannou::prelude::*;

struct Model {
    time: f32,
}

fn main() {
    nannou::app(model).update(update).run();
}

fn model(app: &App) -> Model {
    app.new_window().size(800, 800).view(view).build().unwrap();

    Model { time: 0.0 }
}

fn update(_app: &App, model: &mut Model, update: Update) {
    model.time += update.since_last.as_secs_f32();
}

fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();
    draw.background().color(WHITE);

    let radius = (model.time.sin() * 50.0 + 100.0) as f32;

    draw.ellipse().radius(radius).color(BLACK);

    draw.to_frame(app, &frame).unwrap();
}

📝 struct + free functions 예시 2

use nannou::prelude::*;

struct Model {
    positions: Vec<Vec2>,
    speeds: Vec<Vec2>,
    count: usize,
}

fn main() {
    nannou::app(model).update(update).run();
}

fn model(app: &App) -> Model {
    let _window = app.new_window().size(800, 800).view(view).build().unwrap();
    let count = 200;
    let mut positions = Vec::with_capacity(count);
    let mut speeds = Vec::with_capacity(count);
    for _ in 0..count {
        positions.push(vec2(
            random_range(-400.0, 400.0),
            random_range(-400.0, 400.0),
        ));
        speeds.push(vec2(
            random_range(-1.0, 1.0),
            random_range(-1.0, 1.0),
        ));
    }
    Model { positions, speeds, count }
}

fn update(_app: &App, model: &mut Model, _update: Update) {
    for i in 0..model.count {
        model.positions[i] += model.speeds[i];
        // 화면 밖이면 반사
        if model.positions[i].x.abs() > 400.0 {
            model.speeds[i].x *= -1.0;
        }
        if model.positions[i].y.abs() > 400.0 {
            model.speeds[i].y *= -1.0;
        }
    }
}

fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();
    if frame.nth() == 0 {
        draw.background().color(BLACK);
    } else {
        draw.rect()
            .x_y(0.0, 0.0)
            .w_h(800.0, 800.0)
            .rgba(0.0, 0.0, 0.0, 0.06);
    }
    for &pos in &model.positions {
        draw.ellipse().xy(pos).w_h(6.0, 6.0).rgba(1.0, 0.6, 0.2, 0.9);
    }
    draw.to_frame(app, &frame).unwrap();
}

📝 struct + free functions 예시 3

use nannou::prelude::*;

fn main() {
    nannou::app(model).update(update).run();
}

// 1. Model 구조체: 애플리케이션의 '상태' (데이터)만 정의합니다.
struct Model {
    x_position: f32,
    speed: f32,
}

// 2. model 함수: Model의 초기 상태를 설정하고 반환합니다.
fn model(app: &App) -> Model {
    app.new_window().view(view).build().unwrap();
    Model {
        x_position: 0.0,
        speed: 2.0,
    }
}

// 3. update 함수: 'Model'을 직접 수정하여 로직을 처리합니다.
// 로직이 복잡해지면 이 함수가 매우 길어집니다.
fn update(app: &App, model: &mut Model, _update: Update) {
    let win = app.window_rect();

    // x 위치 변경 로직
    model.x_position += model.speed;

    // 벽에 닿으면 방향 전환
    if model.x_position > win.right() || model.x_position < win.left() {
        model.speed *= -1.0;
    }
}

// 4. view 함수: 'Model'의 데이터를 읽어 화면에 그립니다.
fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();
    draw.background().color(PLUM);

    // model의 x_position 값을 직접 읽어서 사용
    draw.ellipse()
        .x_y(model.x_position, 0.0)
        .radius(50.0)
        .color(STEELBLUE);

    draw.to_frame(app, &frame).unwrap();
}

2. impl Model (메서드 포함 — OOP 스타일)

Model에 메서드를 구현해 로직을 캡슐화합니다.

Model 구조체에 데이터뿐만 아니라 impl Model { ... } 블록을 사용해 해당 데이터를 조작하는 메서드(행위)를 함께 정의합니다.
update와 view 같은 콜백 함수는 이 메서드를 호출하는 역할만 담당하게 됩니다.
상태와 동작이 객체 안에 모여서 OOP-like 구조(예: 애니메이션 로직을 Modle::animate 메서드로 이동)를 만들기 때문에 상태와 동작을 한 곳에 묶어 가독성과 유지보수성이 높습니다.
내부의 불변/가변 규칙(&self, &mut self)이 명확합니다.
복잡한 애니메이션이나 실행 로직을 메서드로 추상화해서 나중에 재사용하기 용이합니다.

📝 impl Model 스타일 예시 1

use nannou::prelude::*;

struct Model {
    time: f32,
}

impl Model {
    fn new() -> Self {
        Self { time: 0.0 }
    }

    fn animate(&mut self, delta: f32) {
        self.time += delta;
    }

    fn draw_circle(&self, draw: &Draw) {
        // 배경 지우기
        draw.background().color(WHITE);

        // time을 이용해 반지름 진동
        let radius = (self.time.sin() * 50.0 + 100.0) as f32;

        // 중심 원 그리기
        draw.ellipse().radius(radius).color(BLACK);
    }
}

fn main() {
    nannou::app(model).update(update).run();
}

fn model(app: &App) -> Model {
    app.new_window().size(800, 800).view(view).title("Animated Circle").build().unwrap();

    Model::new()
}

fn update(_app: &App, model: &mut Model, update: Update) {
    let delta = update.since_last.as_secs_f32();
    model.animate(delta);
}

fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();

    // 모델에 정의된 그리기 로직 호출
    model.draw_circle(&draw);

    // 프레임 제출
    draw.to_frame(app, &frame).unwrap();
}

📝 impl Model 스타일 예시 2

use nannou::prelude::*;

struct Model {
    positions: Vec<Vec2>,
    speeds: Vec<Vec2>,
    count: usize,
}

impl Model {
    // 생성자 역할
    fn new(win_w: f32, win_h: f32, count: usize) -> Self {
        let mut positions = Vec::with_capacity(count);
        let mut speeds = Vec::with_capacity(count);
        for _ in 0..count {
            positions.push(vec2(
                random_range(-win_w * 0.5, win_w * 0.5),
                random_range(-win_h * 0.5, win_h * 0.5),
            ));
            speeds.push(vec2(
                random_range(-1.0, 1.0),
                random_range(-1.0, 1.0),
            ));
        }
        Model { positions, speeds, count }
    }

    // 상태 업데이트를 캡슐화
    fn step(&mut self, win_w: f32, win_h: f32) {
        for i in 0..self.count {
            self.positions[i] += self.speeds[i];
            if self.positions[i].x.abs() > win_w * 0.5 {
                self.speeds[i].x *= -1.0;
            }
            if self.positions[i].y.abs() > win_h * 0.5 {
                self.speeds[i].y *= -1.0;
            }
        }
    }

    // 렌더링 도우미 (view 내부에서 호출)
    fn draw(&self, draw: &Draw) {
        for &pos in &self.positions {
            draw.ellipse().xy(pos).w_h(6.0, 6.0).rgba(0.2, 0.9, 1.0, 0.9);
        }
    }
}

fn main() {
    nannou::app(model).update(update).run();
}

fn model(app: &App) -> Model {
    let _window = app.new_window().size(800, 800).view(view).build().unwrap();
    Model::new(800.0, 800.0, 200)
}

fn update(app: &App, model: &mut Model, _update: Update) {
    let [w, h] = {
        let rect = app.main_window().rect();
        [rect.w(), rect.h()]
    };
    model.step(w, h); // 메서드로 캡슐화된 업데이트 호출
}

fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();
    if frame.nth() == 0 {
        draw.background().color(BLACK);
    } else {
        draw.rect()
            .w_h(800.0, 800.0)
            .rgba(0.0, 0.0, 0.0, 0.06);
    }
    model.draw(&draw); // 캡슐화된 렌더 호출
    draw.to_frame(app, &frame).unwrap();
}

📝 impl Model 스타일 예시 3

use nannou::prelude::*;

fn main() {
    nannou::app(model).update(update).run();
}

// 1. Model 구조체: 데이터(상태) 정의
struct Model {
    x_position: f32,
    speed: f32,
}

// 2. impl Model: Model과 관련된 '행위'(메서드)를 정의합니다.
// 이것이 OOP(객체 지향 프로그래밍)의 캡슐화와 유사합니다.
impl Model {
    // 'model' 함수의 역할을 이 메서드가 대신합니다. (생성자 역할)
    fn new(app: &App) -> Model {
        app.new_window().view(view).build().unwrap();
        Model {
            x_position: 0.0,
            speed: 2.0,
        }
    }

    // 'update' 함수의 로직을 이 메서드로 옮겼습니다.
    fn update_position(&mut self, app: &App) {
        let win = app.window_rect();
        self.x_position += self.speed;

        if self.x_position > win.right() || self.x_position < win.left() {
            self.speed *= -1.0;
        }
    }

    // 'view' 함수의 로직을 이 메서드로 옮겼습니다.
    fn draw_view(&self, app: &App, frame: Frame) {
        let draw = app.draw();
        draw.background().color(PLUM);

        draw.ellipse()
            .x_y(self.x_position, 0.0)
            .radius(50.0)
            .color(STEELBLUE);

        draw.to_frame(app, &frame).unwrap();
    }
}

// 3. Nannou 콜백 함수들: 이제 매우 단순해집니다.
//    단순히 Model의 적절한 메서드를 '호출'만 합니다.

fn model(app: &App) -> Model {
    Model::new(app) // Model의 'new' 메서드 호출
}

fn update(app: &App, model: &mut Model, _update: Update) {
    model.update_position(app); // Model의 'update_position' 메서드 호출
}

fn view(app: &App, model: &Model, frame: Frame) {
    model.draw_view(app, frame); // Model의 'draw_view' 메서드 호출
}

✅ ⚙️🛠️📄📚🎨🖼️🧩🧠🧮🕹️🧿⏳🎛️🔮🌌🪩🗂️📝🧰🔒

아보카도
Sample
Important
Highlighting
비색
적황색
purple
hot pink
yellow
살구색
orange
green
blue