🔮 :: Drifting Geometry

📝 Rust Code

use nannou::prelude::*;

struct Shape {
    pos_x: f32,
    pos_y: f32,
    vel_x: f32,
    vel_y: f32,
    size: f32,
    color: Hsla,
    kind: ShapeKind,
}

enum ShapeKind {
    Circle,
    Rectangle,
}

struct Model {
    shapes: Vec<Shape>,
}

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

fn model(app: &App) -> Model {
    app.new_window().size(1080, 1080).title("Moving Shapes with Trail").view(view).build().unwrap();

    let mut shapes = Vec::new();

    for _ in 0..50 {
        let shape = Shape {
            pos_x: rand::random_range(-540.0..=540.0),
            pos_y: rand::random_range(-540.0..=540.0),
            vel_x: rand::random_range(-0.5..0.5),
            vel_y: rand::random_range(-0.5..0.5),
            size: rand::random_range(5.0..100.0),
            color: hsla(rand::random_range(0.0..1.0), 0.0, 0.7, 0.5),
            kind: if rand::random() {
                ShapeKind::Circle
            } else {
                ShapeKind::Rectangle
            },
        };
        shapes.push(shape);
    }

    Model { shapes }
}

fn update(app: &App, model: &mut Model, _update: Update) {
    let win_rect = app.window_rect();

    for shape in &mut model.shapes {
        shape.pos_x += shape.vel_x;
        shape.pos_y += shape.vel_y;

        if shape.pos_x > win_rect.right() + 50.0 {
            shape.pos_x = win_rect.left() - 50.0;
        } else if shape.pos_x < win_rect.left() - 50.0 {
            shape.pos_x = win_rect.right() + 50.0;
        }

        if shape.pos_y > win_rect.top() + 50.0 {
            shape.pos_y = win_rect.bottom() - 50.0;
        } else if shape.pos_y < win_rect.bottom() - 50.0 {
            shape.pos_y = win_rect.top() + 50.0;
        }
    }
}

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

    let frame_no = frame.nth();
    if frame_no == 0 {
        draw.background().color(hsla(0.0, 0.0, 0.0, 1.0));
    } else {
        draw.rect().wh(app.window_rect().wh()).color(hsla(0.0, 0.0, 0.0, 0.02));
    }

    for shape in &model.shapes {
        match shape.kind {
            ShapeKind::Circle => {
                draw.ellipse()
                    .x_y(shape.pos_x, shape.pos_y)
                    .radius(shape.size / 2.0)
                    .color(shape.color);
            }
            ShapeKind::Rectangle => {
                draw.rect()
                    .x_y(shape.pos_x, shape.pos_y)
                    .w_h(shape.size, shape.size)
                    .color(shape.color);
            }
        }
    }

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

📝 Rust Code + Comment

// Nannou의 기본 기능을 사용하기 위한 모듈 임포트
// 이 안에는 자주 쓰이는 타입(Point2, Vec2), 색상(Hsla, rgba 등),
// 랜덤 함수(random, random_range), 수학 상수(TAU) 등이 포함됨
use nannou::prelude::*;

// === Shape 구조체: 움직이는 도형의 상태를 저장 ===
struct Shape {
    pos_x: f32,   // x 좌표 (화면 중앙 기준)
    pos_y: f32,   // y 좌표
    vel_x: f32,   // x 방향 속도 (픽셀/프레임)
    vel_y: f32,   // y 방향 속도
    size: f32,    // 크기 — 원이면 지름, 사각형이면 한 변의 길이
    color: Hsla,  // 색상 (HSLA 모델: 색조, 채도, 밝기, 투명도)
    kind: ShapeKind, // 도형 종류 (원 또는 사각형) — enum 사용
}

// === ShapeKind 열거형(enum): 도형의 종류를 표현 ===
// enum은 "하나의 값이 여러 가능한 변형(variant) 중 하나임"을 표현할 때 사용
// → 이 경우, 도형은 'Circle'이거나 'Rectangle' 중 하나여야 함
enum ShapeKind {
    Circle,      // 원형 도형
    Rectangle,   // 사각형 도형
}

// === Model 구조체: 애플리케이션 전체 상태 ===
struct Model {
    shapes: Vec<Shape>, // 여러 도형을 저장하는 벡터
}

// 프로그램 진입점
fn main() {
    nannou::app(model)    // 초기 상태 생성
        .update(update)   // 매 프레임 업데이트
        .run();           // 실행
}

// 초기화 함수: 창 생성 및 도형 초기 배치
fn model(app: &App) -> Model {
    // 1080x1080 픽셀 창 생성, 제목 설정, 뷰 함수 연결
    app.new_window()
        .size(1080, 1080)
        .title("Moving Shapes with Trail")
        .view(view)
        .build()
        .unwrap();

    let mut shapes = Vec::new();

    // 50개의 랜덤 도형 생성
    for _ in 0..50 {
        let shape = Shape {
            // 위치: 창 전체 범위 (-540 ~ +540, -540 ~ +540)
            pos_x: rand::random_range(-540.0..=540.0),
            pos_y: rand::random_range(-540.0..=540.0),
            // 속도: 매우 느리게 (-0.5 ~ +0.5 픽셀/프레임)
            vel_x: rand::random_range(-0.5..0.5),
            vel_y: rand::random_range(-0.5..0.5),
            // 크기: 5 ~ 100 픽셀 사이
            size: rand::random_range(5.0..100.0),
            // 색상: 무작위 색조(Hue), 무채색(채도=0), 밝기 70%, 투명도 50%
            color: hsla(rand::random_range(0.0..1.0), 0.0, 0.7, 0.5),
            // 도형 종류: 50% 확률로 원 또는 사각형
            kind: if rand::random() {
                ShapeKind::Circle
            } else {
                ShapeKind::Rectangle
            },
        };
        shapes.push(shape);
    }

    Model { shapes }
}

// 매 프레임 상태 업데이트 함수: 도형 이동 및 경계 처리
fn update(app: &App, model: &mut Model, _update: Update) {
    let win_rect = app.window_rect(); // 창 경계 정보

    for shape in &mut model.shapes {
        // 위치 갱신: 현재 속도만큼 이동
        shape.pos_x += shape.vel_x;
        shape.pos_y += shape.vel_y;

        // X축 경계 처리: 화면 오른쪽 끝을 넘으면 왼쪽 끝으로, 반대도 마찬가지
        // → 50픽셀 여유를 둬서 도형이 완전히 사라진 후 등장 (시각적 자연스러움)
        if shape.pos_x > win_rect.right() + 50.0 {
            shape.pos_x = win_rect.left() - 50.0;
        } else if shape.pos_x < win_rect.left() - 50.0 {
            shape.pos_x = win_rect.right() + 50.0;
        }

        // Y축 경계 처리: 위/아래도 동일
        if shape.pos_y > win_rect.top() + 50.0 {
            shape.pos_y = win_rect.bottom() - 50.0;
        } else if shape.pos_y < win_rect.bottom() - 50.0 {
            shape.pos_y = win_rect.top() + 50.0;
        }
    }
}

// 매 프레임 렌더링 함수
fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();

    // 잔상(trail) 효과 구현:
    // - 첫 프레임(frame_no == 0)만 완전 검은 배경
    // - 이후 프레임은 매우 투명한 검정 사각형 덮어쓰기 → 이전 프레임이 서서히 흐려짐
    let frame_no = frame.nth();
    if frame_no == 0 {
        draw.background().color(hsla(0.0, 0.0, 0.0, 1.0));
    } else {
        draw.rect()
            .wh(app.window_rect().wh()) // 창 전체 크기
            .color(hsla(0.0, 0.0, 0.0, 0.02)); // 알파 0.02 → 매우 투명
    }

    // 모든 도형 그리기
    for shape in &model.shapes {
        match shape.kind {
            // enum의 variant에 따라 다른 그리기 방식 선택
            ShapeKind::Circle => {
                draw.ellipse()
                    .x_y(shape.pos_x, shape.pos_y)     // 중심 좌표
                    .radius(shape.size / 2.0)          // 반지름 = 지름 / 2
                    .color(shape.color);
            }
            ShapeKind::Rectangle => {
                draw.rect()
                    .x_y(shape.pos_x, shape.pos_y)     // 중심 좌표
                    .w_h(shape.size, shape.size)       // 정사각형
                    .color(shape.color);
            }
        }
    }

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