🔮 :: Make You Own Constellation

📝 Rust Code

use nannou::prelude::*;
use rand::Rng;
use std::time::{SystemTime, UNIX_EPOCH};
use std::collections::HashMap;

const CONNECT_DISTANCE: f32 = 150.0;
const PARTICLE_MIN_SIZE: f32 = 1.0;  
const PARTICLE_MAX_SIZE: f32 = 5.0;  
const PARTICLE_MIN_SPEED: f32 = 10.0;
const PARTICLE_MAX_SPEED: f32 = 80.0;
const PARTICLE_MIN_LIFETIME: f32 = 7.0;
const PARTICLE_MAX_LIFETIME: f32 = 10.0;
const VELOCITY_DAMPING: f32 = 0.995;
const MIN_LINE_ALPHA: f32 = 0.01;

struct Particle {
    pos: Vec2,
    vel: Vec2,
    born: f32,
    lifetime: f32,
    size: f32,  
    color: Rgba,
}

impl Particle {
    fn new(origin: Vec2, now: f32) -> Self {
        let mut rng = rand::thread_rng();
        let angle = rng.gen_range(0.0..TAU);
        let speed = rng.gen_range(PARTICLE_MIN_SPEED..PARTICLE_MAX_SPEED);
        let vel = vec2(angle.cos() * speed, angle.sin() * speed);
        let lifetime = rng.gen_range(PARTICLE_MIN_LIFETIME..PARTICLE_MAX_LIFETIME);
        let size = rng.gen_range(PARTICLE_MIN_SIZE..PARTICLE_MAX_SIZE);  
        let hue = rng.gen_range(0.5..0.72);
        let color = hsla(hue, 0.7, 0.5, 1.0).into();

        Self {
            pos: origin,
            vel,
            born: now,
            lifetime,
            size, 
            color,
        }
    }

    fn age(&self, now: f32) -> f32 {
        now - self.born
    }

    fn life_ratio(&self, now: f32) -> f32 {
        1.0 - (self.age(now) / self.lifetime).clamp(0.0, 1.0)
    }

    fn alive(&self, now: f32) -> bool {
        self.age(now) < self.lifetime
    }

    fn update(&mut self, dt: f32) {
        self.pos += self.vel * dt;
        self.vel *= VELOCITY_DAMPING;
    }
}

struct Model {
    particles: Vec<Particle>,
    show_title: bool,
    is_fullscreen: bool,
    grid: HashMap<(i32, i32), Vec<usize>>,
    cell_size: f32,
}

impl Model {
    fn new() -> Self {
        Self {
            particles: Vec::new(),
            show_title: true,
            is_fullscreen: false,
            grid: HashMap::new(),
            cell_size: CONNECT_DISTANCE,
        }
    }

    fn update_grid(&mut self) {
        self.grid.clear();
        for (i, particle) in self.particles.iter().enumerate() {
            let cell_x = (particle.pos.x / self.cell_size).floor() as i32;
            let cell_y = (particle.pos.y / self.cell_size).floor() as i32;
            self.grid.entry((cell_x, cell_y)).or_insert_with(Vec::new).push(i);
        }
    }

    fn clear_particles(&mut self) {
        self.particles.clear();
        self.grid.clear();
        self.show_title = true;
    }
}

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

fn model(app: &App) -> Model {
    app.new_window()
        .size(1080, 1080)
        .key_pressed(key_pressed)
        .mouse_pressed(mouse_pressed)
        .view(view)
        .title("별자리만들기")
        .build()
        .unwrap();

    Model::new()
}

fn key_pressed(app: &App, model: &mut Model, key: Key) {
    match key {
        Key::F => {
            model.is_fullscreen = !model.is_fullscreen;
            app.main_window().set_fullscreen(model.is_fullscreen);
        }
        Key::S => {
            let ts = SystemTime::now().duration_since(UNIX_EPOCH).unwrap().as_secs();
            let filename = format!("constellation_{}.png", ts);
            app.main_window().capture_frame(filename);
            println!("📸 Screenshot saved!");
        }
        Key::N => {
            model.clear_particles();
        }
        Key::C => {
            let now = app.time as f32;
            model.particles.retain(|p| p.alive(now));
            model.update_grid();
        }
        _ => (),
    }
}

fn mouse_pressed(app: &App, model: &mut Model, _button: MouseButton) {
    if model.show_title {
        model.show_title = false;
    }

    let mut rng = rand::thread_rng();
    let count = rng.gen_range(15..=30);
    let now = app.time as f32;
    let origin = app.mouse.position();

    for _ in 0..count {
        model.particles.push(Particle::new(origin, now)); 
    }
    
    model.update_grid();
}

fn update(app: &App, model: &mut Model, _update: Update) {
    let dt = app.duration.since_prev_update.as_secs_f32();
    let now = app.time as f32;

    for particle in &mut model.particles {
        particle.update(dt);
    }

    model.particles.retain(|p| p.alive(now));
    
    model.update_grid();
}

fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();
    draw.background().color(BLACK);
    let now = app.time as f32;
    let win_rect = app.window_rect();

    for p in &model.particles {
        let lr = p.life_ratio(now);
        let mut col = p.color;
        col.alpha *= lr;
        draw.ellipse().xy(p.pos).radius(p.size).color(col); 
    }

    let grid = &model.grid;
    let connect_distance_sq = CONNECT_DISTANCE * CONNECT_DISTANCE;

    for (cell_pos, indices) in grid {
        for &i in indices {
            let a = &model.particles[i];
            if !a.alive(now) { continue; }
            
            for dx in -1..=1 {
                for dy in -1..=1 {
                    let neighbor_cell = (cell_pos.0 + dx, cell_pos.1 + dy);
                    if let Some(neighbor_indices) = grid.get(&neighbor_cell) {
                        for &j in neighbor_indices {
                            if j <= i { continue; }
                            
                            let b = &model.particles[j];
                            if !b.alive(now) { continue; }
                            
                            let d_sq = a.pos.distance_squared(b.pos);
                            if d_sq <= connect_distance_sq {
                                let d = d_sq.sqrt();
                                let dist_alpha = 1.0 - d / CONNECT_DISTANCE;
                                let alpha = dist_alpha * a.life_ratio(now) * b.life_ratio(now);
                                
                                if alpha > MIN_LINE_ALPHA {
                                    let col = rgba(
                                        (a.color.red + b.color.red) * 0.5,
                                        (a.color.green + b.color.green) * 0.5,
                                        (a.color.blue + b.color.blue) * 0.5,
                                        alpha
                                    );
                                    draw.line().start(a.pos).end(b.pos).weight(0.8).color(col);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    if model.show_title {

        draw.text("CONSTELLATION")
            .color(WHITE)
            .font_size(120)
            .x_y(0.0, 150.0)
            .center_justify()
            .wh(win_rect.wh());
            
        draw.text("Create your own star constellations")
            .color(SILVER)
            .font_size(36)
            .x_y(0.0, 0.0)
            .center_justify()
            .wh(win_rect.wh());
            
        draw.text("CLICK TO CREATE STARS  •  F: FULLSCREEN  •  S: SCREENSHOT  •  N: NEW")
            .color(GRAY)
            .font_size(24)
            .x_y(0.0, -150.0)
            .center_justify()
            .wh(win_rect.wh());
    }

    if !model.show_title {
        draw.text(&format!("Particles: {}", model.particles.len()))
            .color(GRAY)
            .font_size(18)
            .x_y(-500.0, 500.0);
    }

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

📝 Rust Code + Comment

use nannou::prelude::*;   				  // Nannou 그래픽 프레임워크의 기본 기능들을 가져옴
use rand::Rng;            				  // 랜덤 숫자 생성을 위한 라이브러리
use std::time::{SystemTime, UNIX_EPOCH};  // 시스템 시간 관련 기능
use std::collections::HashMap;            // 해시맵 자료구조

////////////////////////////////////////////////////////////////////////////////
// 상수 정의 - 프로그램 전반에서 사용되는 설정값들
////////////////////////////////////////////////////////////////////////////////

const CONNECT_DISTANCE: f32 = 150.0;      // 별들 사이를 연결하는 최대 거리
const PARTICLE_MIN_SIZE: f32 = 2.0;       // 별의 최소 크기
const PARTICLE_MAX_SIZE: f32 = 8.0;       // 별의 최대 크기
const PARTICLE_MIN_SPEED: f32 = 10.0;     // 별의 최소 이동 속도
const PARTICLE_MAX_SPEED: f32 = 80.0;     // 별의 최대 이동 속도
const PARTICLE_MIN_LIFETIME: f32 = 7.0;   // 별의 최소 수명 (초)
const PARTICLE_MAX_LIFETIME: f32 = 10.0;  // 별의 최대 수명 (초)
const VELOCITY_DAMPING: f32 = 0.995;      // 매 프레임별 속도 감소율 (마찰 효과)
const MIN_LINE_ALPHA: f32 = 0.01;         // 연결선을 그릴 최소 투명도 값

////////////////////////////////////////////////////////////////////////////////
// Particle 구조체 - 개별 별을 나타내는 데이터
////////////////////////////////////////////////////////////////////////////////

struct Particle {
    pos: Vec2,      // 별의 현재 위치 (x, y 좌표)
    vel: Vec2,      // 별의 이동 속도와 방향
    born: f32,      // 별이 생성된 시간
    lifetime: f32,  // 별의 총 수명
    size: f32,      // 별의 크기 (반지름)
    color: Rgba,    // 별의 색상 (RGBA 값)
}

impl Particle {
    // 새로운 별 생성 함수
    fn new(origin: Vec2, now: f32) -> Self {
        let mut rng = rand::thread_rng();                    // 랜덤 숫자 생성기 초기화
        let angle = rng.gen_range(0.0..TAU);                 // 0~2π 사이의 랜덤 각도
        let speed = rng.gen_range(PARTICLE_MIN_SPEED..PARTICLE_MAX_SPEED);  // 랜덤 속도
        let vel = vec2(angle.cos() * speed, angle.sin() * speed);  // 각도와 속도를 x,y 속도로 변환
        let lifetime = rng.gen_range(PARTICLE_MIN_LIFETIME..PARTICLE_MAX_LIFETIME);  // 랜덤 수명
        let size = rng.gen_range(PARTICLE_MIN_SIZE..PARTICLE_MAX_SIZE);     		 // 랜덤 크기
        let hue = rng.gen_range(0.5..0.72);                  // 파란색 계열의 랜덤 색상
        let color = hsla(hue, 0.7, 0.5, 1.0).into();         // HSL 색상을 RGBA로 변환

        // 생성된 값들로 새로운 Particle 인스턴스 반환
        Self {
            pos: origin,    // 시작 위치는 마우스 클릭 위치
            vel,            // 계산된 속도 벡터
            born: now,      // 현재 시간을 생성 시간으로 저장
            lifetime,       // 랜덤하게 결정된 수명
            size,           // 랜덤하게 결정된 크기
            color,          // 결정된 색상
        }
    }

    // 별의 현재 나이 계산 (현재 시간 - 생성 시간)
    fn age(&self, now: f32) -> f32 {
        now - self.born
    }

    // 별의 수명 비율 계산 (1.0 = 새로 생성, 0.0 = 수명 종료)
    fn life_ratio(&self, now: f32) -> f32 {
        1.0 - (self.age(now) / self.lifetime).clamp(0.0, 1.0)  // 0~1 사이로 제한
    }

    // 별이 아직 살아있는지 확인
    fn alive(&self, now: f32) -> bool {
        self.age(now) < self.lifetime  // 나이가 수명보다 작으면 살아있음
    }

    // 별의 위치와 속도 업데이트
    fn update(&mut self, dt: f32) {
        self.pos += self.vel * dt;     // 속도에 시간을 곱해서 위치 이동
        self.vel *= VELOCITY_DAMPING;  // 속도에 감쇠율을 곱해서 점점 느려지게 함
    }
}

////////////////////////////////////////////////////////////////////////////////
// Model 구조체 - 프로그램의 전체 상태를 관리
////////////////////////////////////////////////////////////////////////////////

struct Model {
    particles: Vec<Particle>,           	// 모든 별들을 저장하는 벡터
    show_title: bool,                   	// 제목 화면 표시 여부
    is_fullscreen: bool,                	// 전체 화면 모드 여부
    grid: HashMap<(i32, i32), Vec<usize>>,  // 공간 분할을 위한 그리드 시스템
    cell_size: f32,                     	// 그리드의 각 셀 크기
}

impl Model {
    // 새로운 모델 인스턴스 생성
    fn new() -> Self {
        Self {
            particles: Vec::new(),      	// 빈 별 목록으로 시작
            show_title: true,           	// 처음에는 제목 화면 표시
            is_fullscreen: false,       	// 전체 화면 모드는 꺼진 상태로 시작
            grid: HashMap::new(),       	// 빈 그리드로 시작
            cell_size: CONNECT_DISTANCE,	// 셀 크기를 연결 거리와 동일하게 설정
        }
    }

    // 공간 그리드 업데이트 - 성능 최적화를 위해
    fn update_grid(&mut self) {
        self.grid.clear();  // 기존 그리드 비우기
        
        // 모든 별들을 그리드에 배치
        for (i, particle) in self.particles.iter().enumerate() {
            // 별의 위치를 셀 좌표로 변환
            let cell_x = (particle.pos.x / self.cell_size).floor() as i32;
            let cell_y = (particle.pos.y / self.cell_size).floor() as i32;
            
            // 해당 셀에 별의 인덱스 추가 (없으면 새 벡터 생성)
            self.grid.entry((cell_x, cell_y)).or_insert_with(Vec::new).push(i);
        }
    }

    // 모든 별들 제거하고 초기 상태로 리셋
    fn clear_particles(&mut self) {
        self.particles.clear();   	// 별 목록 비우기
        self.grid.clear();        	// 그리드 비우기
        self.show_title = true;   	// 제목 화면 다시 표시
    }
}

////////////////////////////////////////////////////////////////////////////////
// 메인 함수 및 프로그램 초기화
////////////////////////////////////////////////////////////////////////////////

fn main() {
    // Nannou 앱 시작: 모델 생성 → 업데이트 함수 → 뷰 함수 순으로 실행
    nannou::app(model).update(update).run();
}

// 프로그램 모델 초기화 함수
fn model(app: &App) -> Model {
    // 새로운 윈도우 생성 및 설정
    app<.new_window()
        .size(1080, 1080)                // 윈도우 크기 1080x1080 픽셀
        .key_pressed(key_pressed)        // 키 입력 이벤트 처리 함수 연결
        .mouse_pressed(mouse_pressed)    // 마우스 클릭 이벤트 처리 함수 연결
        .view(view)                      // 화면 그리기 함수 연결
        .title("별자리만들기")         	 // 윈도우 제목 설정
        .build()                         // 윈도우 생성
        .unwrap();                       // 생성 실패 시 프로그램 종료

    Model::new()  						 // 새로운 모델 인스턴스 반환
}

////////////////////////////////////////////////////////////////////////////////
// 키보드 입력 처리 함수
////////////////////////////////////////////////////////////////////////////////

fn key_pressed(app: &App, model: &mut Model, key: Key) {
    match key {
        Key::F => {
            // F 키: 전체 화면 토글
            model.is_fullscreen = !model.is_fullscreen;
            app.main_window().set_fullscreen(model.is_fullscreen);
        }
        Key::S => {
            // S 키: 스크린샷 저장
            let ts = SystemTime::now().duration_since(UNIX_EPOCH).unwrap().as_secs();
            let filename = format!("constellation_{}.png", ts);  // 시간 기반으로 파일명 생성
            app.main_window().capture_frame(filename);           // 현재 프레임 캡처
            println!("📸 Screenshot saved!");                    // 성공 메시지 출력
        }
        Key::N => {
            // N 키: 새로운 별자리 시작 (모든 별 제거)
            model.clear_particles();
        }
        Key::C => {
            // C 키: 죽은 별들 정리 (디버깅용)
            let now = app.time as f32;
            model.particles.retain(|p| p.alive(now));  			// 살아있는 별들만 남기기
            model.update_grid();                       			// 그리드 다시 계산
        }
        _ => (),  // 다른 키는 무시
    }
}

////////////////////////////////////////////////////////////////////////////////
// 마우스 입력 처리 함수
////////////////////////////////////////////////////////////////////////////////

fn mouse_pressed(app: &App, model: &mut Model, _button: MouseButton) {
    // 마우스 클릭 시 제목 화면 숨기기
    if model.show_title {
        model.show_title = false;
    }

    let mut rng = rand::thread_rng();                     // 랜덤 숫자 생성기
    let count = rng.gen_range(15..=30);                   // 생성할 별 개수 (15~30개)
    let now = app.time as f32;                            // 현재 시간
    let origin = app.mouse.position();                    // 마우스 클릭 위치

    // 지정된 개수만큼 별 생성
    for _ in 0..count {
        model.particles.push(Particle::new(origin, now)); // 새 별을 목록에 추가
    }
    
    model.update_grid();  							      // 그리드 업데이트 (새로운 별들을 반영)
}

////////////////////////////////////////////////////////////////////////////////
// 게임 상태 업데이트 함수 (매 프레임 호출됨)
////////////////////////////////////////////////////////////////////////////////

fn update(app: &App, model: &mut Model, _update: Update) {
    let dt = app.duration.since_prev_update.as_secs_f32();  // 이전 프레임부터의 시간 간격
    let now = app.time as f32;                              // 현재 시간

    // 모든 별들 업데이트
    for particle in &mut model.particles {
        particle.update(dt);  // 각 별의 위치와 속도 업데이트
    }

    // 수명이 끝난 별들 제거
    model.particles.retain(|p| p.alive(now));
    
    model.update_grid();     // 변경된 위치를 반영하여 그리드 업데이트
}

////////////////////////////////////////////////////////////////////////////////
// 화면 그리기 함수 (매 프레임 호출됨)
////////////////////////////////////////////////////////////////////////////////

fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();              // 그림 그리기 객체 생성
    draw.background().color(BLACK);     // 배경을 검은색으로 지우기
    let now = app.time as f32;          // 현재 시간
    let win_rect = app.window_rect();   // 윈도우 크기 정보

    ////////////////////////////////////////////////////////////////////////////
    // 1. 모든 별들 그리기
    ////////////////////////////////////////////////////////////////////////////
    
    for p in &model.particles {
        let lr = p.life_ratio(now);     // 별의 현재 수명 비율 계산 (1.0~0.0)
        let mut col = p.color;          // 별의 기본 색상 복사
        col.alpha *= lr;                // 수명에 따라 투명도 조절 (점점 사라짐)
        draw.ellipse()                  // 원형으로 별 그리기
            .xy(p.pos)                  // 별의 위치에
            .radius(p.size)             // 별의 크기로
            .color(col);                // 조절된 색상으로
    }

    ////////////////////////////////////////////////////////////////////////////
    // 2. 별들 사이 연결선 그리기 (성능 최적화된 버전)
    ////////////////////////////////////////////////////////////////////////////
    
    let grid = &model.grid;                             // 공간 그리드 참조
    let connect_distance_sq = CONNECT_DISTANCE.powi(2); // 제곱 거리 (성능을 위해)

    // 각 그리드 셀을 순회
    for (cell_pos, indices) in grid {
        // 현재 셀의 각 별에 대해
        for &i in indices {
            let a = &model.particles[i];      // 첫 번째 별
            if !a.alive(now) { continue; }    // 죽은 별은 건너뛰기
            
            // 주변 3x3 셀들 검사 (인접한 셀들만)
            for dx in -1..=1 {
                for dy in -1..=1 {
                    let neighbor_cell = (cell_pos.0 + dx, cell_pos.1 + dy);  // 이웃 셀 좌표
                    
                    // 이웃 셀이 존재하는지 확인
                    if let Some(neighbor_indices) = grid.get(&neighbor_cell) {
                        // 이웃 셀의 각 별에 대해
                        for &j in neighbor_indices {
                            if j <= i { continue; }  // 중복 검사 방지 (i < j 조건)
                            
                            let b = &model.particles[j];  // 두 번째 별
                            if !b.alive(now) { continue; }  // 죽은 별은 건너뛰기
                            
                            // 두 별 사이의 제곱 거리 계산 (성능을 위해 sqrt 회피)
                            let d_sq = a.pos.distance_squared(b.pos);
                            
                            // 연결 가능한 거리인지 확인
                            if d_sq <= connect_distance_sq {
                                let d = d_sq.sqrt();  // 실제 거리 계산
                                let dist_alpha = 1.0 - d / CONNECT_DISTANCE;  // 거리에 따른 투명도
                                let alpha = dist_alpha * a.life_ratio(now) * b.life_ratio(now);  // 최종 투명도
                                
                                // 충분히 보이는 선만 그리기
                                if alpha > MIN_LINE_ALPHA {
                                    // 두 별 색상의 평균값으로 선 색상 결정
                                    let col = rgba(
                                        (a.color.red + b.color.red) * 0.5,
                                        (a.color.green + b.color.green) * 0.5,
                                        (a.color.blue + b.color.blue) * 0.5,
                                        alpha  // 계산된 투명도 적용
                                    );
                                    // 연결선 그리기
                                    draw.line()
                                        .start(a.pos)   // 첫 번째 별에서
                                        .end(b.pos)     // 두 번째 별까지
                                        .weight(0.8)    // 선 두께
                                        .color(col);    // 결정된 색상으로
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    ////////////////////////////////////////////////////////////////////////////
    // 3. 제목 화면 그리기
    ////////////////////////////////////////////////////////////////////////////
    
    if model.show_title {
        // 메인 제목 - 중앙 상단
        draw.text("CONSTELLATION")
            .color(WHITE)                // 흰색 텍스트
            .font_size(120)              // 큰 글씨 크기
            .x_y(0.0, 150.0)             // 화면 중앙 상단 위치
            .center_justify()            // 가운데 정렬
            .wh(win_rect.wh());          // 창 전체 너비 사용 (줄바꿈 방지)
            
        // 부제목 - 화면 중앙
        draw.text("Create your own star constellations")
            .color(SILVER)               // 은색 텍스트
            .font_size(36)               // 중간 글씨 크기
            .x_y(0.0, 0.0)               // 화면 정중앙 위치
            .center_justify()            // 가운데 정렬
            .wh(win_rect.wh());          // 창 전체 너비 사용
            
        // 조작법 안내 - 중앙 하단
        draw.text("CLICK TO CREATE STARS  •  F: FULLSCREEN  •  S: SCREENSHOT  •  N: NEW")
            .color(GRAY)                 // 회색 텍스트
            .font_size(24)               // 작은 글씨 크기
            .x_y(0.0, -150.0)            // 화면 중앙 하단 위치
            .center_justify()            // 가운데 정렬
            .wh(win_rect.wh());          // 창 전체 너비 사용 (한 줄로 표시)
    }

    ////////////////////////////////////////////////////////////////////////////
    // 4. 디버깅 정보 표시
    ////////////////////////////////////////////////////////////////////////////
    
    if !model.show_title {
        // 현재 별 개수 표시 (화면 좌측 상단)
        draw.text(&format!("Particles: {}", model.particles.len()))
            .color(GRAY)                // 회색 텍스트
            .font_size(18)              // 매우 작은 글씨
            .x_y(-500.0, 500.0);        // 좌측 상단 코너 위치
    }

    // 그리기 명령들을 실제 프레임에 적용
    draw.to_frame(app, &frame).unwrap();
}