:: BASIC_23_smoooth_moving_box

📝 Rust Code

use nannou::prelude::*;

fn main() {
    nannou::sketch(view).size(800, 800).run();
}

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

    // 1. 배경 설정
    draw.background().color(hsv(0.0, 0.0, 0.1));

    // 2. 사각형 및 그리드 설정
    let num_rows = 10;
    let num_cols = 10;
    let square_color = rgba(0.1, 0.8, 0.7, 1.0);

    // 캔버스에 여백(margin)을 주고 그 안에서 그리드를 계산합니다.
    let margin = 50.0;
    let grid_rect = win.pad(margin);
    let cell_w = grid_rect.w() / (num_cols as f32);
    let cell_h = grid_rect.h() / (num_rows as f32);
    let square_size = cell_w.min(cell_h) * 0.8;

    // 3. 애니메이션 설정
    let total_anim_time = 5.0;
    let row_anim_duration = 2.5;
    let row_stagger = 0.1;

    let current_time = app.time % total_anim_time;

    // 4. 그리기 루프
    for i in 0..num_rows {
        let row_start_time = (i as f32) * row_stagger;
        let row_end_time = row_start_time + row_anim_duration;

        let progress = map_range(current_time, row_start_time, row_end_time, 0.0, 1.0).clamp(
            0.0,
            1.0
        );

        // smoothstep easing 함수
        let eased_progress = progress * progress * (3.0 - 2.0 * progress);

        let y = grid_rect.top() - (i as f32) * cell_h - cell_h * 0.5;

        for j in 0..num_cols {
            let start_x = grid_rect.left() + cell_w * 0.5;
            let end_x = grid_rect.left() + (j as f32) * cell_w + cell_w * 0.5;

            // 방법 1: map_range를 사용한 선형 보간
            // let current_x = map_range(eased_progress, 0.0, 1.0, start_x, end_x);

            // 방법 2: lerp 함수 직접 정의 (수동으로 선형 보간 계산)
            let current_x = lerp(start_x, end_x, eased_progress);

            draw.rect().x_y(current_x, y).w_h(square_size, square_size).color(square_color);
        }
    }

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

// 방법 2: lerp 함수 직접 정의 (방법 1일때는 필요없음)
fn lerp(start: f32, end: f32, t: f32) -> f32 {
    start + (end - start) * t
}