🔮 :: Connecting Dots ver2

📝 Rust Code

use nannou::prelude::*;
use std::path::Path;

const POINT_COLOR: (u8, u8, u8) = (255, 255, 255); 
const LINE_COLOR: (u8, u8, u8)  = (255, 255, 255); 
const LINE_ALPHA: u8 = 16;                         
const POINT_SPEED: f32 = 0.3;                      

struct Point {
    position: Vec2,
    velocity: Vec2,
    color: Srgb<u8>,
}

struct Model {
    points: Vec<Point>,
    counter: u32,
}

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

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

    let num_points = 3000;
    let mut points = Vec::new();
    for _ in 0..num_points {
        let position = pt2(
            random_range(-500.0, 500.0),
            random_range(-500.0, 500.0),
        );
        let velocity = pt2(
            random_range(-POINT_SPEED, POINT_SPEED),
            random_range(-POINT_SPEED, POINT_SPEED),
        );
        points.push(Point {
            position,
            velocity,
            color: Srgb::new(POINT_COLOR.0, POINT_COLOR.1, POINT_COLOR.2),
        });
    }

    Model { points, counter: 1 }
}

fn update(_app: &App, model: &mut Model, _update: Update) {
    for point in &mut model.points {
        point.position += point.velocity;

        if point.position.x > 500.0 || point.position.x < -500.0 {
            point.velocity.x *= -1.0;
        }
        if point.position.y > 500.0 || point.position.y < -500.0 {
            point.velocity.y *= -1.0;
        }
    }
}

fn event(app: &App, model: &mut Model, event: Event) {
    if let Event::WindowEvent { simple: Some(WindowEvent::KeyPressed(key)), .. } = event {
        match key {
            Key::P => save_frame(app, model, "png"),
            Key::J => save_frame(app, model, "jpg"),
            _ => {}
        }
    }
}

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

    for point in &model.points {
        draw.ellipse()
            .x_y(point.position.x, point.position.y)
            .radius(1.0)
            .color(point.color);
    }

    for i in 0..model.points.len() {
        for j in i + 1..model.points.len() {
            let p1 = &model.points[i];
            let p2 = &model.points[j];
            let distance = p1.position.distance(p2.position);

            if distance < 40.0 {
                draw.line()
                    .start(p1.position)
                    .end(p2.position)
                    .weight(0.4)
                    .color(Srgba::new(
                        LINE_COLOR.0,
                        LINE_COLOR.1,
                        LINE_COLOR.2,
                        LINE_ALPHA,
                    ));
            }
        }
    }

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

fn save_frame(app: &App, model: &mut Model, format: &str) {
    let filename = format!("output_{}.{}", model.counter, format);
    let path = Path::new(&filename);
    app.main_window().capture_frame(path);
    println!("Frame saved as {}", filename);
    model.counter += 1;
}

📝 Rust Code + Comment

// Nannou의 기본 기능과 표준 라이브러리의 경로 처리 기능을 임포트
use nannou::prelude::*;
use std::path::Path;

// ===== 전역 상수 정의 (코드 전체에서 사용되는 고정값) =====
// RGB 색상은 0~255 범위의 u8 타입으로 정의
const POINT_COLOR: (u8, u8, u8) = (255, 255, 255); // 점 색상: 흰색 (R=255, G=255, B=255)
const LINE_COLOR: (u8, u8, u8)  = (255, 255, 255); // 선 색상: 흰색 (나중에 투명도 조절)
const LINE_ALPHA: u8 = 16;                         // 선의 투명도 (0=완전 투명, 255=완전 불투명)
                                                   // 16은 약 6% 투명도 → 매우 흐릿한 선
const POINT_SPEED: f32 = 0.3;                      // 점의 최대 이동 속도 (픽셀/프레임 단위)
// =================================

// 개별 점의 상태를 저장하는 구조체
struct Point {
    position: Vec2,        // 현재 위치 (x, y)
    velocity: Vec2,        // 속도 벡터 (x, y 방향 이동량)
    color: Srgb<u8>,       // 색상 — Srgb<u8>는 0~255 범위의 RGB 색상 타입
}

// 애플리케이션 전체 상태를 저장하는 구조체
struct Model {
    points: Vec<Point>,    // 수천 개의 점을 저장하는 벡터
    counter: u32,          // 프레임 저장 시 사용할 일련번호 (1, 2, 3, ...)
}

// 프로그램 진입점: Nannou 애플리케이션 설정
fn main() {
    nannou::app(model)
        .update(update)    // 매 프레임 상태 갱신
        .event(event)      // 키보드 이벤트 처리
        .view(view)        // 화면 렌더링
        .run();            // 실행 시작
}

// 애플리케이션 초기화 함수
fn model(app: &App) -> Model {
    // 1000x1000 픽셀의 정사각형 창 생성
    app.new_window().size(1000, 1000).view(view).build().unwrap();

    // 3000개의 점을 랜덤하게 생성
    let num_points = 3000;
    let mut points = Vec::new();
    for _ in 0..num_points {
        // 위치: 화면 전체 범위 (-500 ~ +500, -500 ~ +500)
        let position = pt2(
            random_range(-500.0, 500.0),
            random_range(-500.0, 500.0),
        );
        // 속도: -0.3 ~ +0.3 범위의 매우 느린 속도
        let velocity = pt2(
            random_range(-POINT_SPEED, POINT_SPEED),
            random_range(-POINT_SPEED, POINT_SPEED),
        );
        // 점 생성 및 벡터에 추가
        points.push(Point {
            position,
            velocity,
            // 전역 상수 POINT_COLOR를 Srgb<u8> 타입으로 변환
            color: Srgb::new(POINT_COLOR.0, POINT_COLOR.1, POINT_COLOR.2),
        });
    }

    // 초기 Model 반환 — counter는 1부터 시작 (파일명에 사용)
    Model { points, counter: 1 }
}

// 매 프레임 상태를 업데이트하는 함수
fn update(_app: &App, model: &mut Model, _update: Update) {
    // 모든 점을 순회하며 위치 갱신
    for point in &mut model.points {
        // 위치 = 위치 + 속도 (프레임 독립적 이동은 아님 — 매우 느려서 무관)
        point.position += point.velocity;

        // 화면 경계(-500 ~ +500)에서 튕기는 로직:
        if point.position.x > 500.0 || point.position.x < -500.0 {
            point.velocity.x *= -1.0; // x 방향 속도 반전
        }
        if point.position.y > 500.0 || point.position.y < -500.0 {
            point.velocity.y *= -1.0; // y 방향 속도 반전
        }
    }
}

// 키보드 이벤트 처리 함수
fn event(app: &App, model: &mut Model, event: Event) {
    // 키보드 키가 눌렸는지 확인
    if let Event::WindowEvent { simple: Some(WindowEvent::KeyPressed(key)), .. } = event {
        match key {
            Key::P => save_frame(app, model, "png"), // 'P' 키: PNG로 저장
            Key::J => save_frame(app, model, "jpg"), // 'J' 키: JPG로 저장
            _ => {} // 다른 키는 무시
        }
    }
}

// 매 프레임 화면을 그리는 함수
fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();

    // 배경을 검은색으로 설정 (rgb(0.0, 0.0, 0.0) = 검정)
    draw.background().rgb(0.0, 0.0, 0.0);

    // 모든 점을 작은 원(반지름 1.0)으로 그리기
    for point in &model.points {
        draw.ellipse()
            .x_y(point.position.x, point.position.y) // 중심 좌표
            .radius(1.0)                             // 매우 작은 점
            .color(point.color);                     // 흰색
    }

    // 점들 사이의 거리가 가까우면 선으로 연결 — "연결된 점" 효과
    // ⚠️ 이중 루프이므로 O(n²) 복잡도 → 3000개 점이면 약 450만 회 비교!
    //   성능에 민감한 환경에서는 최적화 필요 (예: 공간 분할)
    for i in 0..model.points.len() {
        for j in i + 1..model.points.len() { // 중복 연결 방지 (i-j와 j-i는 동일)
            let p1 = &model.points[i];
            let p2 = &model.points[j];
            let distance = p1.position.distance(p2.position); // 두 점 사이 거리 계산

            // 거리가 40.0 픽셀 미만이면 선 연결
            if distance < 40.0 {
                draw.line()
                    .start(p1.position) // 선 시작점
                    .end(p2.position)   // 선 끝점
                    .weight(0.4)        // 매우 얇은 선
                    .color(Srgba::new(  // Srgba는 알파(투명도)를 포함한 색상
                        LINE_COLOR.0,
                        LINE_COLOR.1,
                        LINE_COLOR.2,
                        LINE_ALPHA,     // 0~255 범위의 투명도
                    ));
            }
        }
    }

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

// 현재 프레임을 이미지 파일로 저장하는 함수
fn save_frame(app: &App, model: &mut Model, format: &str) {
    // 파일명: output_1.png, output_2.jpg, ...
    let filename = format!("output_{}.{}", model.counter, format);
    let path = Path::new(&filename);

    // Nannou의 창 캡처 기능으로 현재 프레임을 이미지로 저장
    app.main_window().capture_frame(path);

    // 콘솔에 저장 완료 메시지 출력
    println!("Frame saved as {}", filename);

    // 다음 저장을 위해 카운터 증가
    model.counter += 1;
}