🎛️ :: 다중 윈도우 - 색 바꾸기 & 모양 바꾸기

BamgasiJM·2025년 9월 19일

Nannou <BASIC>

목록 보기

5/41

📝 main() 함수에서 창 설정하기

fn main() {
  nannou::app(model)
  		 .update(update)
  		 .simple_window(view)
  		 .size(800, 800)
  		 .run();
}

simple_window가 내부적으로 App::new_window()를 호출하고, 그 WindowBuilder에 .size()를 이어 붙이는 방식

코드가 간단하고 빠르게 쓸 수 있어 테스트 코드에 적합.
세부 옵션을 붙이면 가독성이 떨어짐.
하나의 창만 생성할 수 있음.

📝 model() 함수에서 창 설정하기

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

fn model()은 App객체를 전달받으므로 이 안에서 새 창을 만드는 방식
이 경우 main()에는 nannou::app(model).update(update).run();만 작성.

창 속성(제목, 위치, vsync, event 처리 등)을 세밀하게 제어 가능.
여러 창 생성 가능 -> model()에서 원하는 만큼 new_window() 호출.
창마다 다른 view()함수, 다른 크기, 다른 이름을 지정 가능.
"앱 상태(Model) + 창(Window)"로 분리되어 Model과 함께 창 ID를 저장해두고 이후에 특정 창을 찾아서 update()나 view()에서 활용.

`model()`에서 사용할 수 있는 창 설정 메서드 (`WindowBuilder`)

app.new_window()가 반환하는 건 nannou::app::window::Builder타입인데, 여기서 여러 메서드를 붙일 수 있음.
https://docs.rs/nannou/latest/nannou/window/struct.Builder.html

주요 메서드	설명
`.size(w, h)`	창의 크기를 지정 (픽셀 단위)
`.title("string")`	창 제목 설정
`.resizable(bool)`	창 크기 조절 가능 여부
`.fullscreen()`	전체 화면 모드
`.decorations(bool)`	창의 타이틀바, 닫기 버튼 등 표시 여부
`.always_on_top(bool)`	창을 항상 위에 두기
`.position(x, y)`	창의 초기 위치 지정 (화면 좌표)
`.view(view_fn)`	렌더링할 `view` 함수 등록
`.event(event_fn)`	키보드, 마우스 이벤트 핸들러 등록
`.key_pressed(key_fn)`	특정 키 입력 처리
`.mouse_pressed(mouse_fn)`	마우스 입력 처리
`.raw_event(raw_event_fn)`	더 저수준 이벤트 처리
`.update(update_fn)`	이 창 전용 update 함수 지정 (전역 update와 별도로)
`.vsync(bool)`	V-Sync 활성/비활성
`.samples(n)`	MSAA 샘플 수 (안티앨리어싱 품질)
`.srgb(bool)`	sRGB 색공간 활성화
`.transparent(bool)`	창 배경을 투명하게 만들기

📝 예시 코드 (색 바꾸기)

use nannou::prelude::*;
use nannou::rand::prelude::*;

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

struct Model {
    win_sub: WindowId,
    current_color: Rgb8,
    current_color_name: String,
}

// nannou color 모듈의 모든 색상 상수들 (총 147개 중 일부)
const COLORS: &[(Rgb8, &str)] = &[
    (ALICEBLUE, "ALICEBLUE"),
    (ANTIQUEWHITE, "ANTIQUEWHITE"),
    (AQUA, "AQUA"),
    (AQUAMARINE, "AQUAMARINE"),
    (AZURE, "AZURE"),
    (BEIGE, "BEIGE"),
    (BISQUE, "BISQUE"),
    (WHITESMOKE, "WHITESMOKE"),
    (YELLOW, "YELLOW"),
    (YELLOWGREEN, "YELLOWGREEN"),
];

fn model(app: &App) -> Model {
    // 첫 번째 창 (메인)
    let _win_main = app
        .new_window()
        .size(600, 400)
        .title("Main Window")
        .view(view_main)
        .build()
        .unwrap();

    // 두 번째 창 (서브)
    let win_sub = app
        .new_window()
        .size(400, 400)
        .title("Sub Window")
        .view(view_sub)
        .build()
        .unwrap();

    Model {
        win_sub,
        current_color: WHITE,
        current_color_name: "WHITE".to_string(),
    }
}

fn update(_app: &App, _model: &mut Model, _update: Update) {}

fn event(_app: &App, model: &mut Model, event: Event) {
    match event {
        Event::WindowEvent { id, simple: Some(MousePressed(_button)), .. } => {
            // sub 창을 클릭했을 때만 색상 변경
            if id == model.win_sub {
                let mut rng = thread_rng();
                let (color, color_name) = COLORS.choose(&mut rng).unwrap();
                model.current_color = *color;
                model.current_color_name = color_name.to_string();
            }
        }
        _ => {}
    }
}

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

    draw.text(&model.current_color_name).color(BLACK).font_size(24).x_y(0.0, 0.0);

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

fn view_sub(app: &App, _model: &Model, frame: Frame) {
    let draw = app.draw();
    draw.background().color(GRAY);

    draw.text("CLICK TO CHANGE THE COLOR").color(BLACK).font_size(18).x_y(0.0, 0.0);

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

`event()` 함수의 동작 과정

함수 매개변수

fn event(_app: &App, model: &mut Model, event: Event)

_app: 앱 참조 (언더스코어로 사용하지 않음을 표시)
model: 모델의 가변 참조 (값을 변경할 수 있음)
event: 발생한 이벤트 정보

`match` 문법

match event {
    // 패턴들...
}

match는 Rust의 패턴 매칭 문법입니다. event의 값에 따라 다른 코드를 실행합니다.
C언어의 switch문과 비슷하지만 더 강력합니다.

첫 번째 패턴: `WindowEvent`

Event::WindowEvent { id, simple: Some(MousePressed(_button)), .. } => {
    // 실행될 코드
}

이 패턴을 분해해보겠습니다:
Event::WindowEvent

Event는 열거형(enum)이고, WindowEvent는 그 중 하나의 변형입니다
창에서 발생하는 이벤트(클릭, 키보드 입력 등)를 나타냅니다

{ id, simple: Some(MousePressed(_button)), .. }
이는 구조체 패턴 매칭입니다:

id: 이벤트가 발생한 창의 ID를 id 변수에 추출합니다
simple: Some(MousePressed(_button)):
- simple은 간단한 이벤트 정보를 담는 필드입니다
- Some(...)은 Option 타입의 값이 있음을 의미합니다
- MousePressed(_button)은 마우스가 눌렸음을 의미합니다
- _button은 어떤 마우스 버튼인지는 무시합니다 (언더스코어)

..: 나머지 필드들은 무시합니다

조건문과 색상 변경

if id == model.win_sub {
    let mut rng = thread_rng();
    let (color, color_name) = COLORS.choose(&mut rng).unwrap();
    model.current_color = *color;
    model.current_color_name = color_name.to_string();
}

if id == model.win_sub: 클릭된 창이 서브 창인지 확인합니다
let mut rng = thread_rng(): 난수 생성기를 만듭니다
COLORS.choose(&mut rng).unwrap(): 색상 배열에서 랜덤하게 하나를 선택합니다
let (color, color_name) = ...: 튜플 구조분해로 색상과 이름을 각각 변수에 할당합니다
*color: 색상 값을 역참조해서 복사합니다
color_name.to_string(): 문자열 슬라이스를 String으로 변환합니다

두 번째 패턴: 기본 케이스

_ => {}

_는 와일드카드 패턴으로 "나머지 모든 경우"를 의미합니다
{}는 빈 블록으로 아무것도 하지 않습니다
즉, WindowEvent의 마우스 클릭이 아닌 다른 모든 이벤트는 무시합니다

전체 동작 흐름

이벤트가 발생하면 event 함수가 호출됩니다
match문으로 이벤트 타입을 확인합니다
창에서 마우스가 클릭된 경우:

클릭된 창이 서브 창인지 확인합니다
맞다면 랜덤 색상을 선택해서 모델을 업데이트합니다

다른 모든 이벤트는 무시합니다

이렇게 해서 서브 창을 클릭할 때만 메인 창의 색상이 변경됩니다.

📝 예시 코드 (모양 바꾸기)

use nannou::prelude::*;

struct Model {
    main_window: WindowId,
    control_window: WindowId,
    target_sides: usize, // 현재 다각형 변 개수
}

// 버튼 정의
struct Button {
    rect: Rect,
    label: &'static str,
}

impl Button {
    fn draw(&self, draw: &Draw) {
        draw.rect()
            .xy(self.rect.xy())
            .wh(self.rect.wh())
            .color(STEELBLUE);
        draw.text(self.label)
            .xy(self.rect.xy())
            .color(WHITE)
            .font_size(18);
    }

    fn contains(&self, point: Point2) -> bool {
        self.rect.contains(point)
    }
}

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

fn model(app: &App) -> Model {
    let main_window = app
        .new_window()
        .title("Main Window")
        .size(600, 600)
        .view(view_main)
        .build()
        .unwrap();

    let control_window = app
        .new_window()
        .title("Control Window")
        .size(300, 200)
        .view(view_control)
        .event(event_control)
        .build()
        .unwrap();

    Model {
        main_window,
        control_window,
        target_sides: 6,
    }
}

fn update(_app: &App, _model: &mut Model, _update: Update) {
    // 지금은 애니메이션 없음 → 아무것도 안 함
}

// === 메인 윈도우 ===
fn view_main(app: &App, model: &Model, frame: Frame) {
    if frame.window_id() == model.main_window {
        let draw = app.draw();
        draw.background().color(rgba(0.2, 0.2, 0.2, 1.0));

        // 메인 도형 그리기
        let polygon = (0..model.target_sides).map(|i| {
            let angle = i as f32 / model.target_sides as f32 * TAU;
            pt2(angle.cos() * 200.0, angle.sin() * 200.0)
        });
        draw.polygon().points(polygon).color(DARKTURQUOISE);

        // 다각형 변 개수를 중앙에 표시
        draw.text(&model.target_sides.to_string())
            .x_y(0.0, 0.0)
            .color(WHITE)
            .font_size(64);

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


// === 컨트롤 윈도우 ===
fn view_control(app: &App, _model: &Model, frame: Frame) {
    let draw = app.draw();
    draw.background().color(BLACK);

    // 버튼 두 개
    let inc_button = Button {
        rect: Rect::from_xy_wh(pt2(-80.0, 0.0), vec2(100.0, 50.0)),
        label: "+",
    };
    let dec_button = Button {
        rect: Rect::from_xy_wh(pt2(80.0, 0.0), vec2(100.0, 50.0)),
        label: "-",
    };

    inc_button.draw(&draw);
    dec_button.draw(&draw);

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

fn event_control(app: &App, model: &mut Model, event: WindowEvent) {
    // 현재 이벤트가 어느 윈도우에서 발생했는지 확인
    if app.window_id() == model.control_window {
        match event {
            WindowEvent::MousePressed(_button) => {
                let pos = app.mouse.position();

                let inc_button = Button {
                    rect: Rect::from_xy_wh(pt2(-80.0, 0.0), vec2(100.0, 50.0)),
                    label: "+",
                };
                let dec_button = Button {
                    rect: Rect::from_xy_wh(pt2(80.0, 0.0), vec2(100.0, 50.0)),
                    label: "-",
                };

                if inc_button.contains(pos) {
                    model.target_sides += 1;
                } else if dec_button.contains(pos) {
                    if model.target_sides > 3 {
                        model.target_sides -= 1;
                    }
                }
            }
            _ => {}
        }
    }
}

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

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

BamgasiJM

Coding Art with Blender / oF / Processing / p5.js / nannou

이전 포스트

🎛️ :: Nannou Boilerplate

다음 포스트

🎛️ :: 다중 윈도우 - 색 바꾸기 & 모양 바꾸기

Nannou <BASIC>

📝 main() 함수에서 창 설정하기

📝 model() 함수에서 창 설정하기

`model()`에서 사용할 수 있는 창 설정 메서드 (`WindowBuilder`)

📝 예시 코드 (색 바꾸기)

`event()` 함수의 동작 과정

함수 매개변수

`match` 문법

첫 번째 패턴: `WindowEvent`

조건문과 색상 변경

두 번째 패턴: 기본 케이스

전체 동작 흐름

📝 예시 코드 (모양 바꾸기)

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

🎛️ :: Nannou Boilerplate

🎛️ :: fn main()의 콜백 함수

0개의 댓글

🎛️ :: 다중 윈도우 - 색 바꾸기 & 모양 바꾸기

Nannou <BASIC>

📝 main() 함수에서 창 설정하기

📝 model() 함수에서 창 설정하기

model()에서 사용할 수 있는 창 설정 메서드 (WindowBuilder)

📝 예시 코드 (색 바꾸기)

event() 함수의 동작 과정

함수 매개변수

match 문법

첫 번째 패턴: WindowEvent

조건문과 색상 변경

두 번째 패턴: 기본 케이스

전체 동작 흐름

📝 예시 코드 (모양 바꾸기)

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

🎛️ :: Nannou Boilerplate

🎛️ :: fn main()의 콜백 함수

0개의 댓글

`model()`에서 사용할 수 있는 창 설정 메서드 (`WindowBuilder`)

`event()` 함수의 동작 과정

`match` 문법

첫 번째 패턴: `WindowEvent`