🔮 :: Constellation Bloom

SPACEBAR : 개화(Blooming) 시작
R : 리셋해서 다시 시작
S : 스크린샷 저장

📝 Rust Code

use nannou::prelude::*;

const WIDTH: f32 = 800.0;
const HEIGHT: f32 = 800.0;
const NUM_POINTS: usize = 20;

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

struct MovingPoint {
    pos: Vec2,
    vel: Vec2,
}

struct Model {
    points: Vec<MovingPoint>,
    width: f32,
    height: f32,
    running: bool,
    screenshot_count: u32, // 스크린샷 카운터
}

fn model(app: &App) -> Model {
    let _window_id = app
        .new_window()
        .size(WIDTH as u32, HEIGHT as u32)
        .title("Constellation Bloom")
        .view(view)
        .build()
        .unwrap();

    let points = (0..NUM_POINTS)
        .map(|_| MovingPoint {
            pos: vec2(0.0, 0.0),
            vel: vec2(0.0, 0.0),
        })
        .collect();

    Model {
        points,
        width: WIDTH,
        height: HEIGHT,
        running: false,
        screenshot_count: 0,
    }
}

fn update(_app: &App, model: &mut Model, update: Update) {
    if !model.running {
        return;
    }

    let dt = update.since_last.as_secs_f32();
    let half_w = model.width / 2.0;
    let half_h = model.height / 2.0;

    for mp in &mut model.points {
        mp.pos += mp.vel * dt;

        // X축 반사
        if mp.pos.x > half_w {
            let overflow = mp.pos.x - half_w;
            mp.pos.x = half_w - overflow;
            mp.vel.x *= -1.0;
        } else if mp.pos.x < -half_w {
            let overflow = -half_w - mp.pos.x;
            mp.pos.x = -half_w + overflow;
            mp.vel.x *= -1.0;
        }

        // Y축 반사
        if mp.pos.y > half_h {
            let overflow = mp.pos.y - half_h;
            mp.pos.y = half_h - overflow;
            mp.vel.y *= -1.0;
        } else if mp.pos.y < -half_h {
            let overflow = -half_h - mp.pos.y;
            mp.pos.y = -half_h + overflow;
            mp.vel.y *= -1.0;
        }
    }
}

fn event(app: &App, model: &mut Model, event: Event) {
    if let Event::WindowEvent { simple, .. } = event {
        if let Some(e) = simple {
            match e {
                KeyPressed(Key::Space) => {
                    for mp in &mut model.points {
                        mp.vel = vec2(
                            random_range(-150.0, 150.0),
                            random_range(-150.0, 150.0),
                        );
                    }
                    model.running = true;
                }
                KeyPressed(Key::R) => {
                    for mp in &mut model.points {
                        mp.pos = vec2(0.0, 0.0);
                        mp.vel = vec2(0.0, 0.0);
                    }
                    model.running = false;
                }
                KeyPressed(Key::S) => {
                    model.screenshot_count += 1;
                    let filename = format!("artwork_{:03}.png", model.screenshot_count);
                    app.main_window().capture_frame(filename);
                    println!("📸 Screenshot saved!");
                }
                _ => {}
            }
        }
    }
}

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

    let overlay = hsla(0.0, 0.0, 0.0, 0.04);
    draw.rect().w_h(model.width, model.height).color(overlay);

    let white = hsla(0.0, 0.0, 1.0, 1.0);

    for win in model.points.windows(2) {
        let p1 = win[0].pos;
        let p2 = win[1].pos;
        draw.line().start(p1).end(p2).stroke_weight(3.0).color(white);
    }

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

📝 Rust Code + Comment by Gemini

// nannou::prelude::* 는 nannou 프레임워크를 사용할 때 필요한
// 기본적인 함수, 타입, 구조체 등을 모두 가져오는 편리한 방법입니다.
// 이걸 사용하면 app, vec2, hsla 등 nannou의 여러 기능을 바로 쓸 수 있습니다.
use nannou::prelude::*;

// --- 상수 정의 ---
// 상수는 프로그램 전체에서 변하지 않는 값을 저장할 때 사용합니다.

// 생성될 창(window)의 너비를 800.0 픽셀로 설정합니다.
// f32는 32비트 부동소수점 숫자 타입으로, 소수점을 포함하는 숫자를 다룰 때 사용됩니다.
const WIDTH: f32 = 800.0;
// 생성될 창의 높이를 800.0 픽셀로 설정합니다.
const HEIGHT: f32 = 800.0;
// 화면에 표시하고 움직일 점의 개수를 20개로 설정합니다.
// usize는 배열의 인덱스나 크기를 나타낼 때 주로 사용되는 부호 없는 정수 타입입니다.
const NUM_POINTS: usize = 20;

// --- main 함수 ---
// 모든 Rust 프로그램의 시작점입니다. 프로그램이 실행되면 이 함수가 가장 먼저 호출됩니다.
fn main() {
    // nannou 앱을 설정하고 실행합니다.
    nannou::app(model) // 'model' 함수를 사용해 앱의 초기 상태를 설정합니다.
        .update(update)    // 매 프레임마다 'update' 함수를 호출하여 앱의 상태를 갱신합니다.
        .event(event)      // 키보드 입력, 마우스 움직임 등 이벤트가 발생하면 'event' 함수를 호출합니다.
        .run();            // 위에서 설정한 내용을 바탕으로 앱을 실행합니다.
}

// --- 데이터 구조체 정의 ---
// struct(구조체)는 관련된 여러 데이터를 하나의 단위로 묶는 사용자 정의 타입입니다.

// 움직이는 점 하나를 표현하기 위한 구조체입니다.
struct MovingPoint {
    // pos는 점의 현재 위치를 나타냅니다. Vec2는 2차원 벡터(x, y 좌표)를 저장하는 타입입니다.
    pos: Vec2,
    // vel은 점의 속도(velocity)를 나타냅니다. x축과 y축 방향으로 얼마나 빠르게 움직이는지를 저장합니다.
    vel: Vec2,
}

// 이 프로그램의 전체 상태를 관리하는 메인 구조체입니다.
// 앱의 모든 데이터는 이 'Model' 안에 저장됩니다.
struct Model {
    // 화면에 있는 모든 점들을 저장하는 벡터(동적 배열)입니다.
    points: Vec<MovingPoint>,
    // 창의 너비를 저장합니다.
    width: f32,
    // 창의 높이를 저장합니다.
    height: f32,
    // 애니메이션이 현재 실행 중인지(true) 아니면 멈춰있는지(false) 상태를 저장합니다.
    running: bool,
    // 스크린샷을 저장할 때 파일 이름이 겹치지 않도록 숫자를 세는 카운터입니다.
    screenshot_count: u32,
}

// --- nannou 함수들 ---
// 이 함수들은 nannou 프레임워크에 의해 특정 시점에 자동으로 호출됩니다.

// 1. model 함수: 앱이 처음 시작될 때 딱 한 번 호출됩니다.
// 앱의 초기 상태(Model 구조체)를 설정하고 반환하는 역할을 합니다.
fn model(app: &App) -> Model {
    // 앱의 메인 창을 생성하고 설정합니다.
    app.new_window()
        .size(WIDTH as u32, HEIGHT as u32) // 창 크기를 상수로 설정합니다. u32로 타입 변환이 필요합니다.
        .title("Constellation Bloom")      // 창의 제목을 설정합니다.
        .view(view)                        // 화면을 그리는 역할은 'view' 함수가 담당하도록 지정합니다.
        .build()                           // 설정을 바탕으로 창을 실제로 생성합니다.
        .unwrap();                         // 창 생성이 실패할 경우 프로그램을 중단시킵니다.

    // NUM_POINTS 개수만큼 MovingPoint를 생성하여 벡터에 담습니다.
    let points = (0..NUM_POINTS) // 0부터 NUM_POINTS-1 까지 반복합니다.
        .map(|_| {
            // 각 점의 초기 상태를 설정합니다.
            MovingPoint {
                pos: vec2(0.0, 0.0), // 초기 위치는 화면 중앙(0, 0)입니다.
                vel: vec2(0.0, 0.0), // 초기 속도는 0이므로 처음에는 움직이지 않습니다.
            }
        })
        .collect(); // map을 통해 생성된 모든 MovingPoint들을 모아 Vec<MovingPoint> 벡터로 만듭니다.

    // 완성된 Model 구조체를 생성하여 반환합니다. 이것이 앱의 초기 상태가 됩니다.
    Model {
        points, // 위에서 생성한 점들의 벡터
        width: WIDTH,
        height: HEIGHT,
        running: false, // 처음에는 애니메이션이 멈춰있도록 false로 설정합니다.
        screenshot_count: 0, // 스크린샷 카운터 초기화
    }
}

// 2. update 함수: 매 프레임마다 호출됩니다. (보통 1초에 60번)
// 앱의 상태(데이터)를 변경하는 로직을 담당합니다. (예: 점의 위치 이동)
fn update(_app: &App, model: &mut Model, update: Update) {
    // model.running이 false이면 (애니메이션이 멈춘 상태라면)
    // 아무것도 업데이트하지 않고 함수를 즉시 종료합니다.
    if !model.running {
        return;
    }

    // 이전 프레임과 현재 프레임 사이의 시간 간격(초 단위)을 구합니다.
    // 이 값을 사용하면 컴퓨터 성능(프레임률)에 상관없이 일정한 속도로 움직이게 할 수 있습니다.
    let dt = update.since_last.as_secs_f32();

    // 화면 경계 계산을 편리하게 하기 위해 너비와 높이의 절반 값을 미리 계산해 둡니다.
    // nannou의 좌표계는 중앙이 (0,0)이므로, 경계는 -width/2 ~ +width/2 입니다.
    let half_w = model.width / 2.0;
    let half_h = model.height / 2.0;

    // model에 있는 모든 점들을 순회하면서 위치를 업데이트합니다.
    // '&mut model.points'는 점들의 데이터를 '수정 가능하도록' 빌려오는 것을 의미합니다.
    for mp in &mut model.points {
        // 현재 위치(pos)에 속도(vel)와 시간 간격(dt)을 곱한 값을 더해 다음 위치를 계산합니다.
        // (이동 거리 = 속도 * 시간)
        mp.pos += mp.vel * dt;

        // --- 화면 경계 충돌 처리 ---

        // X축 오른쪽 경계에 부딪혔을 때
        if mp.pos.x > half_w {
            let overflow = mp.pos.x - half_w;  // 경계를 얼마나 넘어갔는지 계산
            mp.pos.x = half_w - overflow;      // 넘어간 만큼 안쪽으로 위치를 조정
            mp.vel.x *= -1.0;                  // x축 이동 방향을 반대로 바꿉니다 (반사).
        }
        // X축 왼쪽 경계에 부딪혔을 때
        else if mp.pos.x < -half_w {
            let overflow = -half_w - mp.pos.x; // 경계를 얼마나 넘어갔는지 계산
            mp.pos.x = -half_w + overflow;     // 넘어간 만큼 안쪽으로 위치를 조정
            mp.vel.x *= -1.0;                  // x축 이동 방향을 반대로 바꿉니다.
        }

        // Y축 위쪽 경계에 부딪혔을 때
        if mp.pos.y > half_h {
            let overflow = mp.pos.y - half_h;  // 경계를 얼마나 넘어갔는지 계산
            mp.pos.y = half_h - overflow;      // 넘어간 만큼 안쪽으로 위치를 조정
            mp.vel.y *= -1.0;                  // y축 이동 방향을 반대로 바꿉니다.
        }
        // Y축 아래쪽 경계에 부딪혔을 때
        else if mp.pos.y < -half_h {
            let overflow = -half_h - mp.pos.y; // 경계를 얼마나 넘어갔는지 계산
            mp.pos.y = -half_h + overflow;     // 넘어간 만큼 안쪽으로 위치를 조정
            mp.vel.y *= -1.0;                  // y축 이동 방향을 반대로 바꿉니다.
        }
    }
}

// 3. event 함수: 키보드, 마우스 등 특정 이벤트가 발생했을 때 호출됩니다.
// 사용자 입력에 따라 앱의 상태를 변경하는 역할을 합니다.
fn event(app: &App, model: &mut Model, event: Event) {
    // 발생한 이벤트가 '창(Window)과 관련된 이벤트'인지 확인합니다.
    if let Event::WindowEvent { simple, .. } = event {
        // 'simple' 변수에 키보드/마우스 입력 같은 단순화된 이벤트 정보가 담겨있는지 확인합니다.
        if let Some(e) = simple {
            // 'e'에 담긴 이벤트의 종류에 따라 다른 동작을 수행합니다.
            match e {
                // 스페이스바가 눌렸을 때
                KeyPressed(Key::Space) => {
                    // 모든 점들을 순회하면서
                    for mp in &mut model.points {
                        // 각 점의 속도(vel)를 x, y 각각 -150 ~ 150 사이의 무작위 값으로 설정합니다.
                        mp.vel = vec2(
                            random_range(-150.0, 150.0),
                            random_range(-150.0, 150.0),
                        );
                    }
                    // 애니메이션을 시작하도록 running 상태를 true로 변경합니다.
                    model.running = true;
                }
                // 'R' 키가 눌렸을 때 (Reset)
                KeyPressed(Key::R) => {
                    // 모든 점들을 순회하면서
                    for mp in &mut model.points {
                        // 위치를 다시 화면 중앙(0,0)으로 초기화합니다.
                        mp.pos = vec2(0.0, 0.0);
                        // 속도를 0으로 만들어 움직임을 멈춥니다.
                        mp.vel = vec2(0.0, 0.0);
                    }
                    // 애니메이션을 멈추도록 running 상태를 false로 변경합니다.
                    model.running = false;
                }
                // 'S' 키가 눌렸을 때 (Screenshot)
                KeyPressed(Key::S) => {
                    // 스크린샷 카운터를 1 증가시킵니다.
                    model.screenshot_count += 1;
                    // "artwork_001.png", "artwork_002.png" 와 같은 형식의 파일 이름을 만듭니다.
                    let filename = format!("artwork_{:03}.png", model.screenshot_count);
                    // 현재 창의 화면을 캡처하여 해당 파일 이름으로 저장합니다.
                    app.main_window().capture_frame(filename);
                    // 저장 완료 메시지를 콘솔에 출력합니다.
                    println!("📸 Screenshot saved!");
                }
                // 그 외 다른 키가 눌렸을 때는 아무것도 하지 않습니다.
                _ => {}
            }
        }
    }
}

// 4. view 함수: 매 프레임마다 'update' 함수가 끝난 후 호출됩니다.
// 현재 'Model'의 상태를 바탕으로 화면에 그림을 그리는 역할을 합니다.
fn view(app: &App, model: &Model, frame: Frame) {
    // 그림을 그릴 수 있는 도구(Draw 객체)를 준비합니다.
    let draw = app.draw();

    // 매 프레임마다 반투명한 검은색 사각형을 화면 전체에 덮어씌웁니다.
    // alpha(투명도) 값이 0.04로 매우 낮기 때문에, 이전 프레임의 잔상이 희미하게 남는 효과를 줍니다.
    let overlay = hsla(0.0, 0.0, 0.0, 0.04); // 색상(H), 채도(S), 명도(L), 투명도(A)
    draw.rect() // 사각형을 그립니다.
        .w_h(model.width, model.height) // 사각형의 너비와 높이를 창 크기와 같게 설정합니다.
        .color(overlay); // 위에서 정의한 반투명 검은색을 칠합니다.

    // 선을 그릴 때 사용할 흰색을 정의합니다.
    let white = hsla(0.0, 0.0, 1.0, 1.0); // 명도가 1.0이면 흰색, 투명도는 1.0(불투명)

    // 'windows(2)'는 점 목록에서 연속된 두 개의 점을 묶어서 순회하게 해줍니다.
    // 예를 들어 점이 [p1, p2, p3, p4] 라면, [p1,p2], [p2,p3], [p3,p4] 순서로 반복합니다.
    // 이를 통해 각 점과 그 다음 점을 선으로 연결할 수 있습니다.
    for win in model.points.windows(2) {
        let p1 = win[0].pos; // 첫 번째 점의 위치
        let p2 = win[1].pos; // 두 번째 점의 위치
        draw.line() // 선을 그립니다.
            .start(p1) // 선의 시작점을 p1으로 설정
            .end(p2)   // 선의 끝점을 p2로 설정
            .stroke_weight(3.0) // 선의 두께를 3.0 픽셀로 설정
            .color(white);      // 선의 색상을 흰색으로 설정
    }

    // 지금까지 'draw'를 통해 그린 모든 내용을 실제 창의 프레임에 적용하여 화면에 보여줍니다.
    draw.to_frame(app, &frame).unwrap();
}