🔮 :: Particle Flow

📝 Rust Code

use nannou::noise::NoiseFn;
use nannou::prelude::*;

// ------------------ Particle ------------------

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

impl Particle {
    fn new(x: f32, y: f32) -> Particle {
        Particle {
            pos: vec2(x, y),
            vel: vec2(0.0, 0.0),
        }
    }

    fn update(&mut self, dir: Vec2) {
        self.pos += self.vel;
        self.vel += dir;
        self.vel *= 0.8;
    }
}

// ------------------ Model ------------------

struct Model {
    particles: Vec<Particle>,
}

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

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

    let rect = app.window_rect();
    let mut particles = Vec::new();

    for _ in 0..2000 {
        let x = random_range(rect.left(), rect.right());
        let y = random_range(rect.bottom(), rect.top());
        particles.push(Particle::new(x, y));
    }

    Model { particles }
}

// ------------------ Update ------------------

fn update(app: &App, model: &mut Model, _update: Update) {
    let noise = nannou::noise::Perlin::new();
    let t = app.elapsed_frames() as f64 / 100.0;

    for (i, p) in model.particles.iter_mut().enumerate() {
        let x = noise.get([
            p.pos.x as f64 / 128.0,
            p.pos.y as f64 / 137.0,
            t + i as f64 / 1000.0,
        ]);
        let y = noise.get([
            -p.pos.y as f64 / 128.0,
            p.pos.x as f64 / 137.0,
            t + i as f64 / 1000.0,
        ]);

        let force = vec2(x as f32, y as f32);
        p.update(force);
    }
}

// ------------------ View ------------------

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

    // 잔상 없는 검은 배경이 필요하면 주석 해제
    // draw.background().color(BLACK);

    for p in &model.particles {
        draw.ellipse()
            .xy(p.pos)               
            .w(1.0)                  
            .h(1.0)                  
            .color(hsla(0.5, 1.0, 0.6, 0.2)); 
    }

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

📝 Rust Code

// Nannou에서 제공하는 퍼린 노이즈(Perlin Noise) 함수 사용을 위한 모듈 임포트
use nannou::noise::NoiseFn;
// Nannou의 기본 기능(색상, 벡터, 창 관리 등)을 사용하기 위한 prelude 임포트
use nannou::prelude::*;

// ------------------ Particle 구조체 정의 ------------------
// Particle은 화면 상에서 움직이는 개별 점(파티클)을 표현하는 사용자 정의 타입입니다.

/// `Particle` 구조체: 각 파티클의 상태를 저장
/// - `pos`: 현재 위치 (2D 벡터)
/// - `vel`: 현재 속도 (2D 벡터)
struct Particle {
    pos: Vec2, // 위치 (x, y)
    vel: Vec2, // 속도 (x, y 방향 이동량)
}

// ------------------ Particle 구조체에 대한 메서드 구현 ------------------
// `impl` 블록은 `Particle` 타입에 메서드(함수)를 추가하는 방식입니다.
// 이를 통해 `Particle::new()`나 `particle.update()`처럼 객체 지향 스타일로 코드를 작성할 수 있습니다.

impl Particle {
    /// 생성자 메서드: 주어진 (x, y) 좌표에 위치한 새 파티클을 생성
    /// - 초기 속도는 (0, 0)으로 설정 → 정지 상태에서 시작
    fn new(x: f32, y: f32) -> Particle {
        Particle {
            pos: vec2(x, y),     // 위치 초기화
            vel: vec2(0.0, 0.0), // 속도 초기화 (정지)
        }
    }

    /// 파티클 상태를 업데이트하는 메서드
    /// - `dir`: 외부에서 받은 가속도(힘) 벡터
    /// - 물리 시뮬레이션: 위치 += 속도, 속도 += 가속도, 속도 *= 감속 계수
    fn update(&mut self, dir: Vec2) {
        self.pos += self.vel;    // 현재 속도만큼 위치 이동
        self.vel += dir;         // 외부 힘(dir)에 의해 속도 변경 (가속)
        self.vel *= 0.8;         // 감속: 공기 저항처럼 속도를 80%로 감소 (에너지 소실)
    }
}

// ------------------ 애플리케이션 최상위 상태 구조체 ------------------

/// `Model` 구조체: 애플리케이션 전체 상태를 저장
/// - `particles`: 화면에 표시될 모든 파티클의 목록
struct Model {
    particles: Vec<Particle>, // 파티클 벡터 (동적 배열)
}

// ------------------ 프로그램 진입점 ------------------

/// `main` 함수: 프로그램 실행 시작점
/// - Nannou 애플리케이션 빌더를 사용해 초기화, 업데이트, 뷰 함수 연결
fn main() {
    nannou::app(model)    // 초기 상태 생성 함수 지정
        .update(update)   // 매 프레임 상태 갱신 함수 지정
        .run();           // 애플리케이션 실행
}

// ------------------ 초기화 함수 ------------------

/// `model` 함수: 애플리케이션 시작 시 한 번만 호출
/// - 창 생성 및 초기 파티클 배치
fn model(app: &App) -> Model {
    // 800x800 픽셀 크기의 새 창 생성, 뷰 함수 연결
    app.new_window().size(800, 800).view(view).build().unwrap();

    // 현재 창의 경계 정보 가져오기 (좌표계: 중심이 (0,0))
    let rect = app.window_rect();
    let mut particles = Vec::new(); // 파티클 저장 벡터 초기화

    // 2000개의 파티클을 화면 전체에 랜덤 배치
    for _ in 0..2000 {
        // x 좌표: 창의 왼쪽(rect.left()) ~ 오른쪽(rect.right()) 사이 랜덤
        let x = random_range(rect.left(), rect.right());
        // y 좌표: 창의 아래(rect.bottom()) ~ 위(rect.top()) 사이 랜덤
        let y = random_range(rect.bottom(), rect.top());
        // 새 파티클 생성 후 벡터에 추가
        particles.push(Particle::new(x, y));
    }

    // 초기 Model 반환
    Model { particles }
}

// ------------------ 상태 업데이트 함수 ------------------

/// `update` 함수: 매 프레임 호출되어 파티클 움직임 계산
fn update(app: &App, model: &mut Model, _update: Update) {
    // 3D 퍼린 노이즈 생성기 인스턴스 생성
    // → 부드럽고 자연스러운 유기적 패턴 생성에 사용
    let noise = nannou::noise::Perlin::new();
    
    // 시간 변수: 프레임 수를 기반으로 부드러운 애니메이션을 위한 시간 흐름
    // - 100.0으로 나누어 속도 조절 (값이 작을수록 느림)
    let t = app.elapsed_frames() as f64 / 100.0;

    // 모든 파티클을 순회하며 업데이트
    for (i, p) in model.particles.iter_mut().enumerate() {
        // X 방향 노이즈 값 계산:
        // - 공간 좌표(p.pos.x, p.pos.y)를 스케일링(128, 137)하여 노이즈 입력
        // - 시간(t)과 파티클 고유 ID(i)를 추가해 시간에 따라 변화하고, 각 파티클이 고유한 움직임을 가지도록 함
        let x = noise.get([
            p.pos.x as f64 / 128.0,
            p.pos.y as f64 / 137.0,
            t + i as f64 / 1000.0,
        ]);
        
        // Y 방향 노이즈 값 계산:
        // - 좌표를 회전(-y, x)하여 X와 다른 방향의 흐름 생성 → 유기적 소용돌이 효과
        let y = noise.get([
            -p.pos.y as f64 / 128.0,
            p.pos.x as f64 / 137.0,
            t + i as f64 / 1000.0,
        ]);

        // 노이즈 값을 f32 벡터로 변환 (노이즈는 -1.0 ~ +1.0 범위)
        let force = vec2(x as f32, y as f32);
        // 파티클 업데이트: 계산된 힘(force)을 적용
        p.update(force);
    }
}

// ------------------ 렌더링 함수 ------------------

/// `view` 함수: 매 프레임 화면을 그리는 함수
fn view(app: &App, model: &Model, frame: Frame) {
    // 그리기 명령을 담을 Draw 객체 생성
    let draw = app.draw();

    // ⚠️ 배경을 명시적으로 검은색으로 지우지 않음 → 이전 프레임이 남아 잔상 효과 발생
    // 만약 잔상 없이 깔끔한 애니메이션을 원하면 다음 줄 주석 해제:
    // draw.background().color(BLACK);

    // 모든 파티클을 작은 원으로 그리기
    for p in &model.particles {
        draw.ellipse()
            .xy(p.pos)               // 원 중심 위치
            .w(1.0)                  // 너비: 1.0 픽셀
            .h(1.0)                  // 높이: 1.0 픽셀 (원형)
            .color(hsla(0.5, 1.0, 0.6, 0.2)); // 색상: 청록색(H=0.5), 채도 100%, 밝기 60%, 투명도 20%
    }

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

📝 Rust Code + 시퀀스 저장

[dependencies]
nannou = "0.19"
gif = "0.13"
image = "0.24"

use gif::{Encoder, Frame as GifFrame, Repeat};
use image::io::Reader as ImageReader;
use nannou::noise::NoiseFn;
use nannou::prelude::*;
use std::fs::{self, File};
use std::sync::{Arc, Mutex};
use std::thread;

// ------------------ Particle ------------------

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

impl Particle {
    fn new(x: f32, y: f32) -> Particle {
        Particle {
            pos: vec2(x, y),
            vel: vec2(0.0, 0.0),
        }
    }

    fn update(&mut self, dir: Vec2) {
        self.pos += self.vel;
        self.vel += dir;
        self.vel *= 0.8;
    }
}

// ------------------ Model ------------------

struct Model {
    particles: Vec<Particle>,
    gif_created: Arc<Mutex<bool>>,
}

fn main() {
    // frames 폴더 생성 및 정리
    let frames_dir = std::path::Path::new("frames");
    if frames_dir.exists() {
        fs::remove_dir_all(frames_dir).unwrap();
    }
    fs::create_dir_all(frames_dir).unwrap();

    nannou::app(model).update(update).exit(on_exit).run();
}

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

    let rect = app.window_rect();
    let r = rect.right();
    let l = rect.left();
    let w = l - r;

    let t = rect.top();
    let b = rect.bottom();
    let h = t - b;

    let mut p = vec![];
    for _i in 0..2000 {
        let x = random::<f32>() * w + r;
        let y = random::<f32>() * h + b;
        p.push(Particle::new(x, y));
    }

    Model { 
        particles: p,
        gif_created: Arc::new(Mutex::new(false)),
    }
}

// ------------------ Update ------------------

fn update(app: &App, model: &mut Model, _update: Update) {
    let noise = nannou::noise::Perlin::new();
    let t = app.elapsed_frames() as f64 / 100.0;

    for (i, p) in model.particles.iter_mut().enumerate() {
        let x = noise.get([
            p.pos.x as f64 / 128.0,
            p.pos.y as f64 / 137.0,
            t + i as f64 / 1000.0,
        ]);
        let y = noise.get([
            -p.pos.y as f64 / 128.0,
            p.pos.x as f64 / 137.0,
            t + i as f64 / 1000.0,
        ]);

        let a = vec2(x as f32, y as f32);
        p.update(a);
    }

    // 200 프레임 이후 종료
    if app.elapsed_frames() >= 300 {
        app.quit();
    }
}

// ------------------ View ------------------

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

    for p in &model.particles {
        draw.ellipse()
            .xy(p.pos)
            .w(1.0)
            .h(1.0)
            .color(hsla(0.5, 1.0, 0.6, 0.2));
    }

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

    // PNG 저장
    let file_path = captured_frame_path(app, &frame);
    app.main_window().capture_frame(file_path);
}

// ------------------ Exit handler ------------------

fn on_exit(_app: &App, model: Model) {
    println!("앱 종료 중... GIF 생성을 시작합니다.");
    
    // GIF 생성을 별도 스레드에서 실행
    let gif_created = model.gif_created.clone();
    let handle = thread::spawn(move || {
        pngs_to_gif("frames", "output.gif", 800, 800);
        let mut created = gif_created.lock().unwrap();
        *created = true;
        println!("✅ GIF saved as output.gif");
    });
    
    // GIF 생성 완료까지 대기
    handle.join().unwrap();
}

// ------------------ Helper functions ------------------

fn captured_frame_path(app: &App, frame: &nannou::Frame) -> std::path::PathBuf {
    app.project_path()
        .expect("failed to locate `project_path`")
        .join("frames")
        .join(format!("{:04}", frame.nth()))
        .with_extension("png")
}

fn pngs_to_gif(folder: &str, output: &str, width: u16, height: u16) {
    println!("GIF 생성 중...");
    
    // PNG 파일들 읽기
    let mut paths: Vec<_> = match fs::read_dir(folder) {
        Ok(entries) => entries
            .filter_map(|e| e.ok())
            .map(|e| e.path())
            .filter(|p| p.extension().unwrap_or_default() == "png")
            .collect(),
        Err(e) => {
            eprintln!("폴더 읽기 실패: {}", e);
            return;
        }
    };
    
    if paths.is_empty() {
        eprintln!("PNG 파일을 찾을 수 없습니다.");
        return;
    }
    
    paths.sort(); // 프레임 순서대로 정렬
    println!("{}개의 PNG 파일을 찾았습니다.", paths.len());

    // GIF 파일 생성
    let mut image = match File::create(output) {
        Ok(file) => file,
        Err(e) => {
            eprintln!("GIF 파일 생성 실패: {}", e);
            return;
        }
    };
    
    let mut encoder = match Encoder::new(&mut image, width, height, &[]) {
        Ok(enc) => enc,
        Err(e) => {
            eprintln!("인코더 생성 실패: {}", e);
            return;
        }
    };
    
    if let Err(e) = encoder.set_repeat(Repeat::Infinite) {
        eprintln!("반복 설정 실패: {}", e);
        return;
    }

    // 각 PNG를 GIF 프레임으로 변환
    for (i, path) in paths.iter().enumerate() {
        match process_frame(&path, &mut encoder, width, height) {
            Ok(_) => {
                if (i + 1) % 50 == 0 || i == paths.len() - 1 {
                    println!("진행상황: {}/{}", i + 1, paths.len());
                }
            }
            Err(e) => {
                eprintln!("프레임 처리 실패 {:?}: {}", path, e);
            }
        }
    }
    
    println!("GIF 인코딩 완료");
}

fn process_frame(
    path: &std::path::Path, 
    encoder: &mut Encoder<&mut File>, 
    width: u16, 
    height: u16
) -> Result<(), Box<dyn std::error::Error>> {
    let img = ImageReader::open(path)?.decode()?.to_rgba8();
    let mut pixels = img.into_raw();
    
    let mut frame = GifFrame::from_rgba_speed(width, height, &mut pixels, 10);
    frame.delay = 3; // 약 30fps (100/3 ≈ 33ms)
    
    encoder.write_frame(&frame)?;
    Ok(())
}