🔮 :: Circle Array Animation

📝 Rust Code

use nannou::prelude::*;

const SCREEN_SIZE: u32 = 800;
const GRID_COUNT: usize = 20;

fn main() {
    nannou::app(model).update(update).simple_window(view).size(SCREEN_SIZE, SCREEN_SIZE).run();
}

struct Model;

fn model(_app: &App) -> Model {
    Model
}

fn update(_app: &App, _model: &mut Model, _update: Update) {
    // 업데이트 로직이 필요하면 여기에 추가
}

fn ease_in_out(t: f32) -> f32 {
    3.0 * t.powi(2) - 2.0 * t.powi(3)
}

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

    draw.background().color(rgba(0.05, 0.05, 0.08, 1.0));

    let color = rgb(0.1, 0.8, 0.7);

    // 그리드 셀 크기와 최대 반지름 계산
    let grid_cell_size = (SCREEN_SIZE as f32) / (GRID_COUNT as f32);
    let max_radius = grid_cell_size * 0.5;

    let delay_per_circle = 10.0 / 60.0;

    for row in 0..GRID_COUNT {
        for col in 0..GRID_COUNT {
            // 각 원의 위치를 그리드 중앙에 배치
            let x = ((col as f32) + 0.5) * grid_cell_size - (SCREEN_SIZE as f32) * 0.5;
            let y = ((row as f32) + 0.5) * grid_cell_size - (SCREEN_SIZE as f32) * 0.5;

            // 각 원마다 고유한 인덱스로 지연시간 계산
            let circle_index = row * GRID_COUNT + col;
            let t = app.time - (circle_index as f32) * delay_per_circle;
            let cycle = t.rem_euclid(4.0) / 4.0;
            let raw = if cycle < 0.5 { cycle * 2.0 } else { (1.0 - cycle) * 2.0 };

            let eased = ease_in_out(raw);
            let radius = max_radius * eased;

            draw.ellipse().x_y(x, y).radius(radius).color(color);
        }
    }
    draw.to_frame(app, &frame).unwrap();
}

📝 Rust Code + Interaction Ver.

// `nannou` 크레이트의 `prelude` 모듈에서 자주 사용되는 타입과 함수들을 가져옵니다.
// 이는 벡터, 색상, 앱 설정 등 핵심 기능을 포함합니다.
use nannou::prelude::*;

// 화면의 크기를 픽셀 단위로 정의합니다. 정사각형 화면 기준.
const SCREEN_SIZE: u32 = 800;

// 그리드(격자)의 행/열 개수. 총 GRID_COUNT × GRID_COUNT 개의 원이 그려집니다.
const GRID_COUNT: usize = 20;

// 각 원이 애니메이션 시작 시점에서 얼마나 지연될지를 정의합니다.
// 10프레임(60fps 기준) 만큼 지연되므로, 원들이 순차적으로 움직입니다.
const DELAY_PER_CIRCLE: f32 = 10.0 / 60.0;

// 마우스 영향 범위: 마우스 위치에서 이 거리 내에 있는 원만 영향을 받습니다.
const MOUSE_INFLUENCE_RANGE: f32 = 300.0;

// 마우스 근처에 있을 때 원의 크기가 얼마나 커질지를 결정하는 배율.
// 0.5이면 최대 50% 더 커집니다.
const MOUSE_INFLUENCE_SCALE: f32 = 0.5;

// 마우스 클릭 시 시간 오프셋(time_offset)에 더해지는 값.
// 이 값이 클수록 애니메이션의 전체 타이밍이 빨라집니다.
const TIME_OFFSET_INCREMENT: f32 = 0.05;

// 마우스를 떼면 시간 오프셋이 서서히 감소하도록 만드는 감쇠 비율.
// 0.95는 매 프레임마다 5%씩 줄어든다는 의미입니다.
const TIME_OFFSET_DECAY: f32 = 0.95;

// 프로그램 진입점: nannou 앱을 초기화하고 실행합니다.
// `model` 함수로 초기 상태를 만들고, `update`로 매 프레임 상태를 갱신하며, `run()`으로 실행합니다.
fn main() {
    nannou::app(model).update(update).run();
}

// 앱의 상태를 저장하는 구조체.
// 마우스 위치, 마우스 클릭 여부, 시간 오프셋을 관리합니다.
struct Model {
    mouse_pos: Vec2,        // 현재 마우스 좌표 (화면 중앙 기준)
    mouse_pressed: bool,    // 마우스 왼쪽 버튼이 눌려 있는지 여부
    time_offset: f32,       // 애니메이션 타이밍을 조절하는 오프셋 값
}

// Model 구조체에 대한 메서드 구현
impl Model {
    // 초기 상태를 생성하는 함수
    fn new() -> Self {
        Self {
            mouse_pos: Vec2::ZERO,   // 초기 마우스 위치는 (0, 0) → 화면 중앙
            mouse_pressed: false,    // 처음엔 마우스 안 눌림
            time_offset: 0.0,        // 시간 오프셋도 0부터 시작
        }
    }

    // 매 프레임마다 마우스 상태를 업데이트하는 함수
    fn update_mouse_state(&mut self, app: &App) {
        // 현재 마우스 위치를 가져옴 (화면 중앙이 (0, 0)인 좌표계)
        self.mouse_pos = app.mouse.position();
        
        // 마우스 왼쪽 버튼이 눌려 있는지 확인
        // `is_down()`은 nannou의 MouseButtonState 메서드로,
        // 해당 버튼이 현재 눌려 있는지 여부를 bool로 반환합니다.
        if app.mouse.buttons.left().is_down() {
            self.mouse_pressed = true;
            // 마우스를 누르면 time_offset 증가 → 애니메이션 가속
            self.time_offset += TIME_OFFSET_INCREMENT;
        } else {
            self.mouse_pressed = false;
            // 마우스를 떼면 time_offset이 서서히 감소 (감쇠 효과)
            self.time_offset *= TIME_OFFSET_DECAY;
        }
    }

    // 마우스 X 좌표에 따라 색상을 계산하는 함수
    fn calculate_color(&self) -> Hsl {
        // `map_range`: 값 하나를 특정 범위에서 다른 범위로 선형 변환합니다.
        // 여기서는 마우스 X좌표(-400 ~ 400)를 색상 휴(hue) 범위(0.0 ~ 1.0)로 매핑.
        let hue = map_range(self.mouse_pos.x, -400.0, 400.0, 0.0, 1.0);
        
        // `fract()`: 실수의 소수 부분만 반환합니다. (예: 1.7 → 0.7)
        // hue가 0~1 범위를 벗어날 수 있으므로, 이를 순환시키기 위해 사용.
        // 이는 색상이 빨강 → 초록 → 파랑 → 빨강... 순환되도록 만듭니다.
        hsl(hue.fract(), 0.8, 0.6) // 채도 80%, 명도 60% 고정
    }

    // 마우스와 원 사이 거리에 따라 원의 반지름을 조정하는 함수
    fn calculate_circle_radius(&self, position: Vec2, base_radius: f32) -> f32 {
        // `distance()`: 두 Vec2 사이의 유클리드 거리를 계산합니다.
        let dist = self.mouse_pos.distance(position);
        
        // 거리에 따라 영향도(influence) 계산: 거리가 멀수록 0에 가까워짐
        // `max(0.0)`은 음수가 되지 않도록 보장 (거리가 범위 밖이면 영향 없음)
        let influence = (1.0 - (dist / MOUSE_INFLUENCE_RANGE)).max(0.0);
        
        // 기본 반지름에 영향도를 곱해 확장된 반지름 반환
        base_radius * (1.0 + influence * MOUSE_INFLUENCE_SCALE)
    }
}

// 그리드에 배치된 각 원을 나타내는 구조체
struct GridCircle {
    position: Vec2, // 원의 중심 좌표
    index: usize,   // 그리드 내 고유 인덱스 (0부터 시작)
}

impl GridCircle {
    // 새 GridCircle 인스턴스를 생성하는 함수
    fn new(row: usize, col: usize, grid_cell_size: f32, screen_size: f32) -> Self {
        // 각 셀의 중심에 원을 배치: (col + 0.5) * 셀 크기
        // 화면 중앙이 (0,0)이 되도록 screen_size * 0.5를 뺌
        let x = ((col as f32) + 0.5) * grid_cell_size - screen_size * 0.5;
        let y = ((row as f32) + 0.5) * grid_cell_size - screen_size * 0.5;
        
        // 1차원 인덱스 계산: row * GRID_COUNT + col
        let index = row * GRID_COUNT + col;

        Self {
            position: Vec2::new(x, y),
            index,
        }
    }

    // 시간에 따라 부드럽게 확장-수축하는 반지름을 계산하는 함수
    fn calculate_animated_radius(&self, time: f32, time_offset: f32, max_radius: f32) -> f32 {
        // 각 원마다 지연을 주기 위해 인덱스에 따라 시간을 오프셋
        let t = time - (self.index as f32) * DELAY_PER_CIRCLE + time_offset;
        
        // `rem_euclid()`: 유클리드 나머지 연산. 음수도 양수 결과를 보장.
        // 예: -0.5.rem_euclid(4.0) → 3.5
        // 이를 통해 t를 0~4 사이의 주기적 값으로 변환 → 4초 주기 애니메이션
        let cycle = t.rem_euclid(4.0) / 4.0; // 0.0 ~ 1.0 사이로 정규화

        // 삼각파(▲ 모양) 형태의 raw 신호 생성:
        // 0~0.5: 증가 (0 → 1), 0.5~1.0: 감소 (1 → 0)
        let raw = if cycle < 0.5 {
            cycle * 2.0
        } else {
            (1.0 - cycle) * 2.0
        };

        // `ease_in_out`: 부드러운 입/출력 이징 함수 (아래 정의됨)
        let eased = ease_in_out(raw);
        
        // 최대 반지름에 이징 적용
        max_radius * eased
    }
}

// 앱 시작 시 호출되어 초기 모델과 창을 설정하는 함수
fn model(app: &App) -> Model {
    // 새로운 창 생성: 크기, 뷰 함수 지정
    app.new_window()
        .size(SCREEN_SIZE, SCREEN_SIZE)      // 창 크기 설정
        .view(view)                          // 렌더링할 함수 지정
        .build()                             // 창 빌드
        .unwrap();                           // 오류 발생 시 패닉 (간단한 예제용)

    // 초기 모델 반환
    Model::new()
}

// 매 프레임마다 호출되어 모델 상태를 업데이트하는 함수
fn update(app: &App, model: &mut Model, _update: Update) {
    // 마우스 상태 갱신
    model.update_mouse_state(app);
}

// 부드러운 입/출력 이징(easing) 함수: t ∈ [0,1] → [0,1]
// 시작과 끝에서 가속/감속 효과를 줌 (자연스러운 움직임)
fn ease_in_out(t: f32) -> f32 {
    // 3t² - 2t³: 허밋(Hermite) 보간 기반의 부드러운 이징
    3.0 * t.powi(2) - 2.0 * t.powi(3)
}

// 매 프레임마다 화면을 그리는 함수
fn view(app: &App, model: &Model, frame: Frame) {
    // 그리기 객체 생성
    let draw = app.draw();
    
    // 배경색 설정: 진한 남색 계열
    draw.background().color(rgba(0.05, 0.05, 0.08, 1.0));

    // 현재 마우스 위치에 따라 색상 계산
    let color = model.calculate_color();
    
    // 그리드 셀 크기 계산 (화면 크기 / 그리드 수)
    let grid_cell_size = (SCREEN_SIZE as f32) / (GRID_COUNT as f32);
    
    // 원의 최대 반지름: 셀 크기의 절반 (셀 안에 꽉 차게)
    let max_radius = grid_cell_size * 0.5;

    // 그리드 전체 순회
    for row in 0..GRID_COUNT {
        for col in 0..GRID_COUNT {
            // 현재 셀에 대한 GridCircle 생성
            let circle = GridCircle::new(row, col, grid_cell_size, SCREEN_SIZE as f32);
            
            // 시간 기반 애니메이션 반지름 계산
            let base_radius = circle.calculate_animated_radius(
                app.time,           // 전체 경과 시간 (초 단위)
                model.time_offset,  // 마우스 클릭에 따른 시간 오프셋
                max_radius,
            );
            
            // 마우스 위치에 따라 반지름 조정
            let adjusted_radius = model.calculate_circle_radius(circle.position, base_radius);

            // 원 그리기
            draw.ellipse()
                .xy(circle.position)     // 중심 좌표
                .radius(adjusted_radius) // 조정된 반지름
                .color(color);           // 동적 색상
        }
    }

    // 그린 내용을 프레임에 출력
    draw.to_frame(app, &frame).unwrap();
}

1. fract()

• f32 또는 f64 타입의 메서드
• 기능: 실수의 소수 부분만 반환. 정수 부분을 제거.
• 예: 3.7.fract() → 0.7, -1.3.fract() → 0.7 (Rust는 음수에서도 양의 소수 반환)
• 용도: 색상 휴(hue)를 0~1 사이로 순환시키기 위해 사용.

2. distance()

• Vec2 (2D 벡터)의 메서드
• 기능: 두 점 사이의 유클리드 거리 계산: √((x2-x1)² + (y2-y1)²)
• 용도: 마우스와 원 사이 거리 측정 → 영향도 계산.

3. rem_euclid()

• f32 또는 f64의 메서드
• 기능: 유클리드 나머지 연산. 항상 0 이상의 결과를 반환.
• 일반 %와 차이: -1.5 % 4.0 = -1.5지만, -1.5.rem_euclid(4.0) = 2.5
• 용도: 시간을 주기적 신호로 변환할 때 음수 시간도 안전하게 처리.

4. is_down()

• MouseButtonState (예: app.mouse.buttons.left())
• 기능: 해당 마우스 버튼이 현재 눌려 있는지 여부를 bool로 반환.
• 용도: 마우스 클릭 상태 감지.

5. map_range()

• nannou 제공 유틸리티 함수
• 기능: 값 하나를 한 범위에서 다른 범위로 선형 매핑.
• 형식: map_range(value, in_min, in_max, out_min, out_max)
• 용도: 마우스 좌표를 색상 휴 값으로 변환.