🔮 :: Turbulence in Circle

📝 Rust Code

use nannou::prelude::*;
use nannou::noise::{ NoiseFn, Perlin };

struct Model {
    particles: Vec<Particle>,
    noise: Perlin,
}

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

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

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

    // 초기 입자 생성
    let particles = (0..2000)
        .map(|_| {
            let x = random_range(-400.0, 400.0);
            let y = random_range(-400.0, 400.0);
            Particle {
                pos: vec2(x, y),
                vel: Vec2::ZERO,
                col: hsla(0.0, 0.0, 1.0, 0.15), // 화이트, 반투명
            }
        })
        .collect();

    Model {
        particles,
        noise: Perlin::new(),
    }
}

fn update(app: &App, model: &mut Model, _update: Update) {
    let time = (app.elapsed_frames() as f64) * 0.005;

    for p in model.particles.iter_mut() {
        // 노이즈 기반 흐름장
        let angle =
            (
                model.noise.get([(p.pos.x as f64) * 0.004, (p.pos.y as f64) * 0.004, time]) as f32 //세밀함
            ) * TAU;

        let dir = vec2(angle.cos(), angle.sin()) * 1.0; //높으면 성겨짐
        p.vel = dir;
        p.pos += p.vel;

        // 화면 밖으로 나가면 리셋
        if p.pos.length() > 300.0 {
            p.pos = vec2(random_range(-100.0, 100.0), random_range(-100.0, 100.0));
        }

        // 입자 색상은 화이트 유지 (추후 속도 기반으로 변경 가능)
        p.col = hsla(0.0, 0.0, 1.0, 0.05);
    }
}

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

    // 첫 프레임에서만 배경 초기화 (아주 어두운 배경)
    if app.elapsed_frames() == 1 {
        draw.background().color(hsla(0.0, 0.0, 0.02, 1.0));
    }

    for p in &model.particles {
        draw.ellipse().x_y(p.pos.x, p.pos.y).w_h(1.0, 1.0).color(p.col);
    }

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

📝 Rust Code + Comment

// nannou 프레임워크의 prelude 모듈을 가져옵니다.
// prelude는 Nannou를 사용하는 데 필요한 가장 일반적인 타입, 트레잇, 함수들을 포함하고 있어
// 매번 개별적으로 use 선언을 하지 않아도 편리하게 사용할 수 있게 해줍니다.
use nannou::prelude::*;

// nannou에서 제공하는 노이즈 함수 라이브러리를 가져옵니다.
// NoiseFn 트레잇은 노이즈 값을 생성하는 함수(get)를 정의하고,
// Perlin은 Perlin 노이즈 알고리즘을 구현한 구조체입니다.
use nannou::noise::{ NoiseFn, Perlin };

// 애플리케이션의 전체 상태(State)를 저장할 구조체입니다.
// Model은 Nannou 앱의 데이터 모델 역할을 하며, 앱이 실행되는 동안 계속 유지됩니다.
struct Model {
    // 화면에 그려질 모든 파티클(입자)들을 담아둘 벡터(동적 배열)입니다.
    particles: Vec<Particle>,
    // Perlin 노이즈를 생성하기 위한 인스턴스입니다. 이 노이즈를 이용해 파티클의 움직임을 제어합니다.
    noise: Perlin,
}

// 개별 파티클(입자)의 속성을 정의하는 구조체입니다.
struct Particle {
    // 파티클의 현재 위치를 나타내는 2차원 벡터(x, y)입니다.
    pos: Vec2,
    // 파티클의 속도와 방향을 나타내는 2차원 벡터입니다.
    vel: Vec2,
    // 파티클의 색상을 나타냅니다. HSLA(색상, 채도, 명도, 투명도) 모델을 사용합니다.
    col: Hsla,
}

// 프로그램의 진입점(Entry Point)입니다.
fn main() {
    // nannou 애플리케이션을 설정하고 실행합니다.
    // model 함수를 통해 초기 모델을 설정하고,
    // update 함수를 통해 매 프레임 모델의 상태를 갱신하며,
    // run()을 호출하여 앱의 메인 루프를 시작합니다.
    nannou::app(model).update(update).run();
}

// 애플리케이션이 처음 시작될 때 한 번만 호출되는 초기화 함수입니다.
// 앱의 초기 상태(Model)를 설정하고 반환합니다.
fn model(app: &App) -> Model {
    // 새 창을 생성하고, 가로 800, 세로 800 픽셀 크기로 설정합니다.
    // view 함수를 이 창의 그리기 콜백으로 지정하고, 최종적으로 창을 빌드합니다.
    app.new_window().size(800, 800).view(view).build().unwrap();

    // 2000개의 파티클을 생성하여 벡터에 저장합니다.
    let particles = (0..2000)
        .map(|_| { // _ 는 반복 인덱스를 사용하지 않겠다는 의미입니다.
            // 창 크기(-400 ~ 400) 내에서 무작위 x, y 좌표를 생성합니다.
            let x = random_range(-400.0, 400.0);
            let y = random_range(-400.0, 400.0);
            
            // Particle 구조체를 생성하여 반환합니다.
            Particle {
                // 위에서 생성한 무작위 좌표를 초기 위치로 설정합니다.
                pos: vec2(x, y),
                // 초기 속도는 0으로 설정합니다.
                vel: Vec2::ZERO,
                // 초기 색상은 흰색(명도 1.0)에 약간의 투명도(0.15)를 줍니다.
                col: hsla(0.0, 0.0, 1.0, 0.15),
            }
        })
        .collect(); // map을 통해 생성된 모든 Particle들을 Vec<Particle> 컬렉션으로 모읍니다.

    // 최종적으로 완성된 Model 구조체를 반환합니다.
    Model {
        // 위에서 생성한 파티클 벡터를 모델의 상태로 저장합니다.
        particles,
        // 새로운 Perlin 노이즈 생성기를 초기화하여 모델에 저장합니다.
        noise: Perlin::new(),
    }
}

// 매 프레임마다 호출되어 애플리케이션의 상태(Model)를 갱신하는 함수입니다.
// 파티클의 위치, 속도, 색상 등을 계산하고 변경하는 로직이 담깁니다.
fn update(app: &App, model: &mut Model, _update: Update) {
    // 앱이 시작된 후 경과한 프레임 수를 기반으로 시간 값을 계산합니다.
    // 이 시간 값은 Perlin 노이즈의 z축 입력으로 사용되어, 시간에 따라 흐름장이 계속 변하게 만듭니다.
    // 0.005를 곱해 시간의 흐름 속도를 조절합니다.
    let time = (app.elapsed_frames() as f64) * 0.005;

    // 모델에 저장된 모든 파티클을 순회하며 각 파티클의 상태를 업데이트합니다.
    // iter_mut()를 사용하여 각 파티클의 값을 직접 수정할 수 있도록 합니다.
    for p in model.particles.iter_mut() {
        // Perlin 노이즈를 사용하여 현재 파티클 위치와 시간(x, y, z)에 해당하는 노이즈 값을 얻습니다.
        // 이 노이즈 값은 -1.0에서 1.0 사이의 값을 가집니다.
        // 위치 값에 0.004를 곱하여 노이즈 공간의 스케일을 조절합니다. 이 값이 작을수록 부드럽고 거대한 흐름이, 클수록 자글자글한 흐름이 만들어집니다.
        let noise_val = model.noise.get([(p.pos.x as f64) * 0.004, (p.pos.y as f64) * 0.004, time]) as f32;
        
        // 노이즈 값(-1.0 ~ 1.0)을 각도(0 ~ 2π)로 변환합니다.
        // TAU는 2 * PI 와 같은 상수입니다.
        let angle = noise_val * TAU;

        // 계산된 각도를 사용하여 방향 벡터를 만듭니다.
        // 이 벡터는 파티클이 다음 프레임에 나아갈 방향을 결정합니다.
        // 뒤에 곱해지는 값(1.0)은 파티클의 속력을 조절합니다. 이 값을 키우면 파티클이 더 빨리 움직입니다.
        let dir = vec2(angle.cos(), angle.sin()) * 1.0; 
        
        // 파티클의 속도를 위에서 계산한 방향 벡터로 업데이트합니다.
        p.vel = dir;
        // 파티클의 현재 위치에 속도를 더하여 다음 위치를 계산합니다.
        p.pos += p.vel;

        // 파티클이 특정 경계(중심으로부터의 거리 300.0)를 벗어났는지 확인합니다.
        // length()는 원점(0,0)으로부터의 거리를 계산합니다.
        if p.pos.length() > 300.0 {
            // 경계를 벗어났다면, 파티클을 화면 중앙 근처의 새로운 무작위 위치로 리셋합니다.
            // 이렇게 함으로써 파티클들이 계속해서 화면 중앙 영역에서 흐름을 만들어냅니다.
            p.pos = vec2(random_range(-100.0, 100.0), random_range(-100.0, 100.0));
        }

        // 파티클의 색상을 흰색(명도 1.0)으로 설정하고, 매우 낮은 투명도(0.05)를 적용합니다.
        // 배경을 지우지 않고 계속 덧그리기 때문에, 낮은 투명도는 파티클의 이동 궤적을 부드러운 선처럼 보이게 하는 효과를 줍니다.
        p.col = hsla(0.0, 0.0, 1.0, 0.05);
    }
}

// update 함수가 호출된 후, 매 프레임마다 화면에 그림을 그리는 함수입니다.
fn view(app: &App, model: &Model, frame: Frame) {
    // 그리기를 위한 Draw 객체를 가져옵니다.
    let draw = app.draw();

    // 앱의 첫 번째 프레임에서만 실행되는 블록입니다.
    if app.elapsed_frames() == 1 {
        // 배경을 아주 어두운 색으로 한 번만 칠합니다.
        // 이후 프레임에서는 배경을 다시 칠하지 않기 때문에, 파티클이 움직이는 궤적이 그대로 화면에 누적됩니다.
        // 이것이 이 아트워크의 핵심 시각 효과입니다.
        draw.background().color(hsla(0.0, 0.0, 0.02, 1.0));
    }

    // 모델의 모든 파티클들을 순회합니다.
    for p in &model.particles {
        // 각 파티클을 화면에 그립니다.
        draw.ellipse() // 타원(원)을 그리는 함수
            .x_y(p.pos.x, p.pos.y) // 파티클의 위치에
            .w_h(1.0, 1.0) // 가로, 세로 1.0 픽셀 크기로
            .color(p.col); // 파티클의 색상(투명도가 포함된 흰색)으로 그립니다.
    }

    // 지금까지 그린 모든 내용을 프레임에 최종적으로 적용하여 화면에 표시합니다.
    draw.to_frame(app, &frame).unwrap();
}

📝 Processing

// Nannou 코드를 Processing으로 포팅한 버전입니다.
// 2000개의 파티클이 3D 노이즈를 기반으로 생성된 흐름장(flow field)을 따라 움직입니다.

// 파티클들을 담을 ArrayList
ArrayList<Particle> particles;

// 노이즈의 3번째 차원으로 사용될 시간 변수
float time = 0;

// 파티클 클래스 정의
// Nannou의 'struct Particle'에 해당합니다.
class Particle {
  PVector pos; // 위치 (position)
  PVector vel; // 속도 (velocity)

  // 생성자 (Constructor)
  Particle(float x, float y) {
    pos = new PVector(x, y);
    vel = new PVector(0, 0); // 초기 속도는 0
  }

  // 파티클의 상태를 업데이트하는 메소드
  void update() {
    // 3D Perlin 노이즈를 사용하여 각도(angle)를 계산합니다.
    // Nannou 코드의 model.noise.get(...) * TAU 부분에 해당합니다.
    // pos.x * 0.004, pos.y * 0.004는 노이즈 스케일(디테일)을 결정합니다.
    float angle = noise(pos.x * 0.004f, pos.y * 0.004f, time) * TWO_PI;

    // 계산된 각도로부터 방향 벡터(velocity)를 생성합니다.
    vel = PVector.fromAngle(angle);

    // 위치에 속도를 더해 파티클을 이동시킵니다.
    pos.add(vel);

    // 파티클이 특정 반경(300)을 벗어나면 중앙 근처의 새로운 무작위 위치로 리셋합니다.
    // Nannou 코드의 p.pos.length() > 300.0 부분에 해당합니다.
    if (pos.mag() > 300) {
      pos.set(random(-100, 100), random(-100, 100));
    }
  }

  // 파티클을 화면에 그리는 메소드
  void display() {
    // 1x1 크기의 점을 그립니다.
    // Nannou 코드의 draw.ellipse().w_h(1.0, 1.0)에 해당합니다.
    point(pos.x, pos.y);
  }
}

// 초기 설정을 위한 setup() 함수
// Nannou의 model() 함수와 유사한 역할을 합니다.
void setup() {
  size(800, 800);

  // 파티클 ArrayList 초기화
  particles = new ArrayList<Particle>();

  // 2000개의 파티클 생성
  for (int i = 0; i < 2000; i++) {
    float x = random(-400, 400);
    float y = random(-400, 400);
    particles.add(new Particle(x, y));
  }

  // Nannou 코드에서 첫 프레임에만 배경을 그리는 것과 동일한 효과를 줍니다.
  // 어두운 회색(R:5, G:5, B:5)으로 배경을 한 번만 칠해, 파티클의 궤적이 계속 남도록 합니다.
  // hsla(0.0, 0.0, 0.02, 1.0)는 약 RGB(5, 5, 5)에 해당합니다.
  background(5);
}

// 매 프레임마다 호출되는 draw() 함수
// Nannou의 update()와 view() 함수의 역할을 모두 수행합니다.
void draw() {
  // Nannou와 같이 (0,0)을 화면 중앙으로 사용하기 위해 좌표계를 이동시킵니다.
  translate(width / 2, height / 2);

  // 시간 변수 업데이트
  // Nannou의 (app.elapsed_frames() as f64) * 0.005 부분에 해당합니다.
  time += 0.005;

  // 파티클의 색상과 두께 설정
  // hsla(0.0, 0.0, 1.0, 0.05)는 흰색에 알파값 0.05를 의미합니다.
  // Processing의 알파값은 0-255 범위이므로 0.05 * 255 ≈ 13으로 변환합니다.
  stroke(255, 13);
  strokeWeight(1);

  // 모든 파티클에 대해 update와 display를 호출합니다.
  for (Particle p : particles) {
    p.update();
    p.display();
  }
}

Nannou(Rust)와 Processing(Java)은 구조와 문법이 다르므로, 몇 가지 핵심적인 변환 포인트를 이해하는 것이 중요합니다.

1. 구조 : model, update, view → setup, draw

• Nannou는 model (초기화), update (상태 변경), view (그리기) 함수로 명확하게 역할이 분리되어 있습니다.

• Processing은 setup() (초기화)과 draw() (매 프레임 상태 변경 및 그리기) 함수로 구성됩니다. 따라서 Nannou의 update와 view 로직이 모두 Processing의 draw() 함수 안에 포함됩니다.

2. 데이터 구조 : struct와 Vec → class와 ArrayList

• Rust의 데이터 묶음인 struct Particle은 Java의 객체지향 class Particle로 변환되었습니다.

• 파티클 목록을 저장하던 Rust의 동적 배열 Vec<Particle>은 Java의 ArrayList<Particle>로 대체되었습니다. 기능적으로 거의 동일한 역할을 합니다.

3. 좌표계 (Coordinate System)

• Nannou는 기본적으로 윈도우의 중앙이 (0, 0) 입니다.

• Processing은 기본적으로 윈도우의 좌측 상단이 (0, 0) 입니다.

• 원본과 동일한 시각적 결과물을 얻기 위해 Processing의 draw() 함수 시작 부분에 translate(width / 2, height / 2);를 추가하여 좌표계의 원점을 화면 중앙으로 이동시켰습니다.

4. 벡터: Vec2 → PVector

• Nannou의 2D 벡터 타입인 Vec2는 Processing의 내장 벡터 클래스인 PVector로 대체되었습니다. PVector는 위치, 속도 등을 다루는 데 필요한 다양한 메소드(add, mag, fromAngle 등)를 제공하여 매우 편리합니다.

5. 노이즈 (Noise)

• Nannou에서는 Perlin 노이즈 객체를 직접 생성해서 사용했지만, Processing은 noise() 함수를 내장하고 있어 별도의 객체 생성 없이 바로 사용할 수 있습니다.

• 원본 코드의 3차원 노이즈 noise.get([x, y, time])는 Processing의 noise(x, y, time)으로 간단하게 변환됩니다.

6. 렌더링과 색상 (Rendering & Color)

• 궤적 효과: Nannou 코드에서는 첫 프레임에만 draw.background()를 호출하여 파티클의 궤적이 계속 남도록 했습니다. Processing에서도 background()를 draw()가 아닌 setup()에 한 번만 호출하여 동일한 효과를 구현했습니다.

• 색상 표현: Nannou의 hsla(h, s, l, a) 색상값은 0.0에서 1.0 사이의 실수를 사용합니다. 원본의 hsla(0.0, 0.0, 1.0, 0.05)는 '채도 0, 밝기 100%'이므로 흰색이며, 알파(투명도)는 5%입니다. 이를 Processing의 stroke(gray, alpha)로 변환했습니다. 색상은 255 (흰색), 알파값은 0.05 * 255, 즉 약 13이 됩니다.

  ---