🔮 :: Bouncing 22000 Balls

📝 Rust Code

use nannou::prelude::*;
use nannou::rand::{random_f32, random_range};

const CIRCLE_RADIUS: f32 = 0.5; // Global constant for circle radius

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

struct Circle {
    position: Point2,
    velocity: Vec2,
}

struct Model {
    circles: Vec<Circle>,
    color: Rgba,
}

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

    let num_circles = 22000; // Number of circles
    let win = app.window_rect();
    let half_width = win.w() / 2.0;
    let half_height = win.h() / 2.0;
    let mut circles = Vec::with_capacity(num_circles);

    for _ in 0..num_circles {
        let position = pt2(
            random_range(-half_width + CIRCLE_RADIUS, half_width - CIRCLE_RADIUS),
            random_range(-half_height + CIRCLE_RADIUS, half_height - CIRCLE_RADIUS),
        );
        let speed = random_range(0.5, 1.0);
        let angle = random_f32() * TAU;
        let velocity = vec2(angle.cos(), angle.sin()) * speed;

        circles.push(Circle { position, velocity });
    }

    Model {
        circles,
        color: rgba(1.0, 0.5, 0.75, 1.0), // pink
    }
}

fn update(app: &App, model: &mut Model, _update: Update) {
    let win = app.window_rect();
    let half_width = win.w() / 2.0 - CIRCLE_RADIUS; // Adjust for radius
    let half_height = win.h() / 2.0 - CIRCLE_RADIUS;

    for circle in &mut model.circles {
        circle.position += circle.velocity;

        // Bounce off walls
        if circle.position.x.abs() > half_width {
            circle.velocity.x = -circle.velocity.x;
            circle.position.x = circle.position.x.clamp(-half_width, half_width);
        }
        if circle.position.y.abs() > half_height {
            circle.velocity.y = -circle.velocity.y;
            circle.position.y = circle.position.y.clamp(-half_height, half_height);
        }
    }
}

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

    // Clear to black only on first frame
    if frame.nth() == 0 {
        draw.background().color(BLACK);
    }

    // Draw semi-transparent rect for trail effect
    draw.rect()
        .wh(win.wh())
        .xy(win.xy())
        .color(rgba(0.0, 0.0, 0.0, 0.05));

    // Draw each circle
    for circle in &model.circles {
        draw.ellipse()
            .xy(circle.position)
            .radius(CIRCLE_RADIUS)
            .color(model.color);
    }

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

📝 Line-by-Line 분석

1. Nannou의 기본 기능과 난수 생성 함수를 불러옴

use nannou::prelude::*;
use nannou::rand::{random_f32, random_range};

• prelude::* : 자주 쓰는 타입/함수(예: Point2, Vec2, Rgba, TAU 등)를 모두 포함.
• random_f32() : 0.0~1.0 사이의 부동소수점 난수.
• random_range(a, b) : a 이상 b 미만의 실수 난수.

2. 모든 원의 반지름을 고정하는 전역 상수 생성

const CIRCLE_RADIUS: f32 = 0.3; // Global constant for circle radius

3. Nannou 앱 실행 진입점 (main 함수)

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

• model: 초기 상태 생성 함수.
• update: 매 프레임마다 상태 갱신.
• run(): 루프 시작 → 창 생성, 이벤트 처리, 렌더링 반복.

4. 각 원의 상태를 저장하는 구조체

struct Circle {
	position: Point2,
    velocity: Vec2,
}

• position: 현재 화면 좌표 (x, y).
• velocity: 속도 벡터 — 프레임마다 이 값을 position에 더해 움직임 구현.

5. 전체 앱의 상태를 저장하는 모델 구조체

struct Model {
	circle: Vec<Circle>,
    color: Rgba.
}

• circles: 모든 원의 배열 (15,000개).
• color: 모든 원에 적용할 색상 — 반투명 핑크.

6. 🧠 model() 함수

fn model(app: &App) -> Model {
	let _window = app.new_window()
    	.size(1000, 1000)
        .view(view)
        .build()
        .unwrape();

앱 초기화 : 1000x1000 크기의 창을 생성하고, view 함수를 렌더러로 지정

• _window: 생성된 창의 핸들 (사용 안 해서 _ 접두사).
• .view(view): 매 프레임마다 호출될 그리기 함수 지정.

    let num_circles = 15000; // Number of circles
    let win = app.window_rect();
    let half_width = win.w() / 2.0;
    let half_height = win.h() / 2.0;
    let mut circles = Vec::with_capacity(num_circles);

원 초기화를 위한 준비

• win.window_rect(): 창의 경계 사각형 반환 → 중심 (0,0), 폭/높이 기준.
• half_width/height: 화면 반 너비/높이 — 원이 화면 밖으로 나가지 않도록 제한하기 위함.
• Vec::with_capacity: 메모리 미리 할당 → 성능 향상 (권장).

    for _ in 0..num_circles {
        let position = pt2(
            random_range(-half_width + CIRCLE_RADIUS, half_width - CIRCLE_RADIUS),
            random_range(-half_height + CIRCLE_RADIUS, half_height - CIRCLE_RADIUS),
        );

각 원의 초기 위치를 무작위로 설정

• pt2(x, y): Point2 생성자.
• + CIRCLE_RADIUS: 원이 화면 밖으로 삐져나가지 않도록 여유 공간 확보.

        let speed = random_range(0.5, 1.0);
        let angle = random_f32() * TAU;
        let velocity = vec2(angle.cos(), angle.sin()) * speed;

각 원의 초기 속도 벡터(velocity) 설정 : 무작위 방향과 속도값 이용

• TAU = 2π: 원주율의 2배 → 0~TAU는 0~360도.
• vec2(cos, sin): 단위 벡터 → 방향만 표현.
• * speed: 속도 크기 조절 (0.5~1.0).

        circles.push(Circle { position, velocity });
    }

생성된 원을 벡터에 추가

    Model {
        circles,
        color: rgba(1.0, 0.5, 0.75, 1.0), // Semi-transparent pink
    }
}

최종 모델 반환.

• 색상: 빨강 100%, 녹색 50%, 파랑 75%, 알파 100% → 불투명 핑크
• 트레일 효과는 아래 view에서 별도로 구현됨.

7. 🔄 update() 함수 — 매 프레임 상태 갱신

fn update(app: &App, model: &mut Model, _update: Update) {
    let win = app.window_rect();
    let half_width = win.w() / 2.0 - CIRCLE_RADIUS;
    let half_height = win.h() / 2.0 - CIRCLE_RADIUS;

화면 경계 계산. 원의 반지름을 뺌 → 원의 가장자리가 경계에 닿을 때 튕기도록.

    for circle in &mut model.circles {
        circle.position += circle.velocity;

위치 업데이트 — 속도를 더함으로써 움직임 구현.

• 물리학의 x = x + v * dt와 유사하나, 여기서는 dt=1로 고정 (프레임당 1단위 이동).

        // Bounce off walls
        if circle.position.x.abs() > half_width {
            circle.velocity.x = -circle.velocity.x;
            circle.position.x = circle.position.x.clamp(-half_width, half_width);
        }
        if circle.position.y.abs() > half_height {
            circle.velocity.y = -circle.velocity.y;
            circle.position.y = circle.position.y.clamp(-half_height, half_height);
        }
    }
}

벽 충돌 감지 및 반사 구현

• .abs() > half_width: 화면 좌/우 경계를 넘었는지 확인.
• velocity.x = -velocity.x: x축 속도 반전 → 튕김 효과.
• .clamp(...): 혹시라도 경계를 살짝 넘었을 경우 강제로 경계 내로 당겨옴 → 누적 오차 방지.

8. 🎨 view() 함수 — 렌더링

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

그리기 컨텍스트와 창 정보 가져오기

    // Clear to black only on first frame
    if frame.nth() == 0 {
        draw.background().color(BLACK);
    }

첫 프레임에만 배경을 검정색으로 클리어

• 이후 프레임에서는 클리어하지 않고 남겨서 trail 효과를 구현함.

    // Draw semi-transparent rect for trail effect
    draw.rect()
        .wh(win.wh())
        .xy(win.xy())
        .color(rgba(0.0, 0.0, 0.0, 0.05));

전체 화면에 거의 투명한 검정 사각형을 그림

• 알파값 0.05 → 이전 프레임을 5% 정도 남기고 95% 어둡게 → 부드러운 잔상 효과.
• 이 방식으로 "지우지 않고 덧그리는" 트레일 구현.

    // Draw each circle
    for circle in &model.circles {
        draw.ellipse()
            .xy(circle.position)
            .radius(CIRCLE_RADIUS)
            .color(model.color);
    }

모든 원을 현재 위치에 그림

• .ellipse(): 원 또는 타원 생성 — 여기선 반지름이 같아 원.
• .radius(CIRCLE_RADIUS): 전역 상수 사용 → 일관된 크기.
• .color(model.color): 모델에 저장된 색상 사용.

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

그린 내용을 실제 프레임 버퍼에 출력

• 실패 시 panic → unwrap 사용 (간단한 예제에선 괜찮음).