🔮 :: Greeting White Dots

📝 Rust Code

use nannou::prelude::*;

const WIN_SIZE: u32 = 1000;
const NUM_POINTS: usize = 1000;
const RANGE: f32 = 230.0; // 중심점과 연결되는 최대 거리

struct MovingPoint {
    pos: Point2,
    speed: f32,
}

struct Model {
    points: Vec<MovingPoint>,
}

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

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

    let mut points = Vec::new();
    for _ in 0..NUM_POINTS {
        points.push(random_point());
    }

    Model { points }
}

fn update(_app: &App, model: &mut Model, _update: Update) {
    // 점들 아래로 이동
    for p in &mut model.points {
        p.pos.y -= p.speed;
    }

    // 화면 아래 벗어난 점 제거
    model.points.retain(|p| p.pos.y > -(WIN_SIZE as f32) / 2.0 - 50.0);

    // 부족한 점 채워넣기
    while model.points.len() < NUM_POINTS {
        model.points.push(random_point());
    }
}

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

    // 중심 하얀 점
    let center = pt2(0.0, 0.0);
    draw.ellipse()
        .xy(center)
        .radius(15.0)
        .color(WHITE);

    // 이동 점들
    for p in &model.points {
        let dist = p.pos.distance(center);
        if dist < RANGE {
            draw.ellipse().xy(p.pos).radius(2.0).color(WHITE);
            draw.line()
                .start(center)
                .end(p.pos)
                .weight(0.3)
                .color(WHITE);
        } else {
            draw.ellipse().xy(p.pos).radius(2.0).color(GRAY);
        }
    }

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

fn random_point() -> MovingPoint {
    let x = random_range(-(WIN_SIZE as f32) / 2.0, (WIN_SIZE as f32) / 2.0);
    let y = (WIN_SIZE as f32) / 2.0 + 20.0; // 화면 위에서 생성
    let speed = random_range(0.5, 2.0);

    MovingPoint {
        pos: pt2(x, y),
        speed,
    }
}

📝 Rust Code + Comment

// nannou::prelude::*는 nannou를 사용하는데 필요한 대부분의 기본 요소들(함수, 타입, 모듈 등)을 
// 한 번에 가져오는 역할을 합니다. 이를 통해 코드를 간결하게 유지할 수 있습니다.
use nannou::prelude::*;

// 창(window)의 가로, 세로 크기를 저장하는 상수입니다.
// 타입은 u32 (부호 없는 32비트 정수)이며, 값은 800입니다.
const WIN_SIZE: u32 = 800;

// 화면에 표시될 점(point)의 총 개수를 저장하는 상수입니다.
// 타입은 usize (메모리 주소 공간의 크기와 같은 부호 없는 정수)이며, 값은 20입니다.
// 벡터의 인덱싱이나 길이와 관련된 값에 주로 사용됩니다.
const NUM_POINTS: usize = 20;

// 화면 중앙의 원으로부터 상호작용이 일어나는 최대 거리를 저장하는 상수입니다.
// 이 거리 안에 들어온 점들은 중앙과 선으로 연결됩니다.
// 타입은 f32 (32비트 부동소수점 수)이며, 값은 150.0입니다.
const RANGE: f32 = 150.0;

// 움직이는 점 하나하나의 상태를 저장하기 위한 구조체(struct)입니다.
struct MovingPoint {
    // 점의 2D 위치(x, y 좌표)를 저장하는 필드입니다.
    // 타입은 Point2이며, nannou에서 제공하는 2차원 벡터 타입(Vec2)의 별칭(alias)입니다.
    pos: Point2,
    
    // 점이 아래로 떨어지는 속도를 저장하는 필드입니다.
    // 타입은 f32 (32비트 부동소수점 수)입니다.
    speed: f32,
}

// 이 애플리케이션의 전체 상태를 관리하는 메인 모델 구조체입니다.
struct Model {
    // 여러 개의 MovingPoint 인스턴스를 담고 있는 동적 배열(Vector)입니다.
    // 화면에 표시될 모든 점들의 데이터가 여기에 저장됩니다.
    points: Vec<MovingPoint>,
}

// Rust 프로그램의 시작점(entry point)입니다.
fn main() {
    // nannou 앱을 설정하고 실행합니다.
    // app(model): 앱의 초기 상태를 설정하기 위해 model 함수를 지정합니다.
    // .update(update): 매 프레임마다 앱의 상태를 업데이트하기 위해 update 함수를 지정합니다.
    // .run(): 설정이 완료된 앱의 메인 루프를 시작합니다.
    nannou::app(model).update(update).run();
}

// 앱이 처음 시작될 때 한 번만 호출되어 초기 모델 상태를 설정하는 함수입니다.
// app: &App -> 현재 nannou 애플리케이션에 대한 참조입니다. 창 생성 등에 사용됩니다.
// 반환 값: 초기화된 Model 인스턴스를 반환합니다.
fn model(app: &App) -> Model {
    // 새로운 창을 생성하고 설정합니다.
    app.new_window()
        // .size(): 창의 크기를 WIN_SIZE 상수를 이용해 800x800 픽셀로 설정합니다.
        .size(WIN_SIZE, WIN_SIZE)
        // .view(): 매 프레임 화면을 그리는 역할을 할 view 함수를 지정합니다.
        .view(view)
        // .build(): 위 설정들을 바탕으로 실제 창을 생성합니다.
        // .unwrap(): 창 생성이 실패할 경우 프로그램을 중단시킵니다. (Result<T, E> 타입 처리)
        .build()
        .unwrap();

    // MovingPoint들을 담을 비어있는 동적 배열(Vector)을 생성합니다.
    // mut 키워드는 이 변수가 변경될 수 있음을 나타냅니다.
    let mut points = Vec::new();
    
    // NUM_POINTS (20)번 만큼 반복합니다.
    // _ 는 반복 변수를 사용하지 않겠다는 의미입니다.
    for _ in 0..NUM_POINTS {
        // random_point 함수를 호출하여 새로운 점을 생성하고, points 벡터에 추가합니다.
        points.push(random_point());
    }

    // 생성된 points 벡터를 포함하는 Model 구조체 인스턴스를 생성하여 반환합니다.
    // 이것이 앱의 초기 상태가 됩니다.
    Model { points }
}

// 매 프레임마다 호출되어 앱의 논리(상태)를 업데이트하는 함수입니다.
// _app: &App -> 현재 앱에 대한 참조. 이 코드에서는 사용되지 않아 _로 시작합니다.
// model: &mut Model -> 앱의 상태를 담고 있는 Model에 대한 '가변' 참조. 이 함수 내에서 상태를 변경할 수 있습니다.
// _update: Update -> 이전 프레임 이후의 시간 등 업데이트 관련 정보를 담고 있는 구조체. 여기서는 사용되지 않습니다.
fn update(_app: &App, model: &mut Model, _update: Update) {
    
    // model의 points 벡터에 있는 모든 점들을 순회하며 각각의 상태를 업데이트합니다.
    // &mut model.points는 벡터의 각 요소(p)에 대한 가변 참조를 얻기 위함입니다.
    for p in &mut model.points {
        // 현재 점(p)의 y 좌표를 speed 만큼 감소시켜 아래로 이동시킵니다.
        p.pos.y -= p.speed;
    }

    // points 벡터에서 특정 조건을 만족하지 않는 요소들을 제거합니다.
    // retain 메서드는 클로저(closure)를 인자로 받아, 클로저가 true를 반환하는 요소만 남깁니다.
    // |p| p.pos.y > -(WIN_SIZE as f32) / 2.0 - 50.0
    //   -> 점의 y좌표가 화면 하단(-400.0)보다 50픽셀 더 아래로 내려가면 false를 반환하여 제거합니다.
    //      (WIN_SIZE as f32)는 u32 타입의 상수를 f32로 형변환합니다.
    model.points.retain(|p| p.pos.y > -(WIN_SIZE as f32) / 2.0 - 50.0);

    // 점이 화면 밖으로 나가 제거된 후, 점의 개수가 NUM_POINTS보다 적으면 다시 채워 넣습니다.
    while model.points.len() < NUM_POINTS {
        // random_point 함수로 새로운 점을 생성하여 points 벡터에 추가합니다.
        model.points.push(random_point());
    }
}

// 매 프레임마다 호출되어 현재 모델 상태를 바탕으로 화면에 그림을 그리는 함수입니다.
// app: &App -> 현재 앱에 대한 참조. Draw 객체를 얻기 위해 사용됩니다.
// model: &Model -> 현재 앱의 상태를 담고 있는 Model에 대한 '불변' 참조. 데이터를 읽기만 합니다.
// frame: Frame -> 현재 그리고 있는 프레임에 대한 정보. 최종 결과물을 여기에 전달합니다.
fn view(app: &App, model: &Model, frame: Frame) {
    // 그리기를 위한 Draw 객체를 얻습니다. 모든 그리기 작업은 이 객체를 통해 이루어집니다.
    let draw = app.draw();
    
    // 프레임의 배경을 검은색(BLACK)으로 칠합니다.
    draw.background().color(BLACK);

    // 화면의 정중앙 좌표(0.0, 0.0)를 나타내는 Point2를 생성합니다.
    let center = pt2(0.0, 0.0);
    
    // 중앙에 고정된 원을 그립니다.
    draw.ellipse()
        // .xy(center): 원의 중심 위치를 설정합니다.
        .xy(center)
        // .radius(12.0): 원의 반지름을 설정합니다.
        .radius(12.0)
        // .color(WHITE): 원의 색상을 흰색으로 설정합니다.
        .color(WHITE);

    // 모델의 모든 점들을 순회하며 화면에 그립니다.
    for p in &model.points {
        // 현재 점(p)과 중앙(center) 사이의 거리를 계산합니다.
        let dist = p.pos.distance(center);
        
        // 만약 거리가 미리 정의된 RANGE (150.0)보다 작다면,
        if dist < RANGE {
            // 점을 흰색 원으로 그립니다.
            draw.ellipse().xy(p.pos).radius(6.0).color(WHITE);
            
            // 중앙(center)에서 현재 점(p)까지 이어지는 선을 그립니다.
            draw.line()
                // .start(center): 선의 시작점을 설정합니다.
                .start(center)
                // .end(p.pos): 선의 끝점을 설정합니다.
                .end(p.pos)
                // .weight(1.0): 선의 두께를 설정합니다.
                .weight(1.0)
                // .color(WHITE): 선의 색상을 흰색으로 설정합니다.
                .color(WHITE);
        } else {
            // 거리가 RANGE보다 크다면, 점을 회색(GRAY) 원으로 그립니다.
            draw.ellipse().xy(p.pos).radius(6.0).color(GRAY);
        }
    }

    // 지금까지의 모든 그리기 명령들을 실제 프레임에 적용하여 화면에 표시합니다.
    draw.to_frame(app, &frame).unwrap();
}

// 새로운 MovingPoint를 무작위 위치와 속도로 생성하여 반환하는 헬퍼 함수입니다.
// 반환 값: 새로 생성된 MovingPoint 인스턴스.
fn random_point() -> MovingPoint {
    // x 좌표를 화면의 가로 범위 (-400.0 ~ 400.0) 내에서 무작위로 선택합니다.
    let x = random_range(-(WIN_SIZE as f32) / 2.0, (WIN_SIZE as f32) / 2.0);
    
    // y 좌표를 화면 상단(400.0)보다 20픽셀 위로 고정합니다. 점이 위에서부터 나타나게 됩니다.
    let y = (WIN_SIZE as f32) / 2.0 + 20.0;
    
    // 속도를 0.5에서 2.0 사이의 무작위 값으로 선택합니다.
    let speed = random_range(0.5, 2.0);

    // 계산된 위치(x, y)와 속도(speed)를 사용하여 새로운 MovingPoint 구조체 인스턴스를 생성하고 반환합니다.
    // pt2(x, y)는 x, y 좌표로 Point2 타입을 만드는 단축 함수입니다.
    MovingPoint {
        pos: pt2(x, y),
        speed,
    }
}