🔮 :: Dynamic Color Grid ver.2

📝 Rust Code

use nannou::prelude::*;
use rand::Rng;

struct Model {
    color_coefficients: Vec<f32>, // 각 그리드 셀의 hue 계수 값을 저장
    grid_size: usize,             // 그리드 크기 (N x N)
    max_grid_size: usize,         // 최대 그리드 크기 (2^8 = 256)
    show_too_dense: bool,         // Too Dense 메시지 표시 여부\
    animation_offset: Vec<f32>    // 각 셀의 애니메이션 시작 시간을 다르게 하기 위한 오프셋
}

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

fn model(app: &App) -> Model {
    app.new_window()
        .size(1000, 1000)
        .view(view)
        .key_pressed(key_pressed)
        .build()
        .unwrap();
    
    // 초기 그리드 크기를 2로 설정, 최대 크기는 2^8 = 256
    let grid_size = 2;
    let max_grid_size = 256; // 2^8
    let total_cells = grid_size * grid_size;
    
    // 랜덤한 hue 계수 값으로 그리드 색상 초기화
    let mut rng = rand::thread_rng();
    let color_coefficients = (0..total_cells).map(|_| rng.gen_range(0.0..1.0)).collect();
    
    // 애니메이션 오프셋 벡터를 랜덤하게 생성
    // PI * 2.0으로 한 주기를 구현
    let animation_offset = (0..total_cells).map(|_| rng.gen_range(0.0..PI * 2.0)).collect();
    
    Model {
        color_coefficients,
        grid_size,
        max_grid_size,
        show_too_dense: false,
        animation_offset,
    }
}

fn update(_app: &App, _model: &mut Model, _update: Update) {
    // Too Dense 메시지를 일정 시간 후에 사라지게 함
    // 간단한 구현: 다음 프레임에서 계속 표시
}

fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();
    let win = app.window_rect();
    
    // 배경을 검은색으로
    draw.background().color(BLACK);
    
    let grid_size = model.grid_size;
    let cell_width = win.w() / grid_size as f32;
    let cell_height = win.h() / grid_size as f32;
    
    for i in 0..grid_size {
        for j in 0..grid_size {
            let idx = i * grid_size + j;
            
            if idx >= model.color_coefficients.len() {
                continue;
            }
            
            // ✨ 애니메이션 로직 시작
            let base_saturation = model.color_coefficients[idx];
            let animation_offset = model.animation_offset[idx];

            // app.time에 따라 -1.0 ~ 1.0 사이를 반복하는 사인파(sin) 값을 구합니다.
            // 여기에 각 셀의 고유 오프셋을 더해 모두 다른 타이밍에 움직이게 합니다.
            let sin_wave = (app.time + animation_offset).sin();
            
            // 사인파 결과(-1.0 ~ 1.0)를 0.0 ~ 1.0 범위로 변환합니다.
            // (sin_wave + 1.0) -> 0.0 ~ 2.0  /  2.0 -> 0.0 ~ 1.0
            let time_coefficient = (sin_wave + 1.0) / 2.0;

            // 최종 채도는 (기본 채도 * 시간 계수)로 계산하여 반짝이는 효과를 줍니다.
            let color_factor = base_saturation * time_coefficient;
            // ✨ 애니메이션 로직 끝

            let x = win.left() + cell_width * (j as f32 + 0.5);
            let y = win.top() - cell_height * (i as f32 + 0.5);
            
            draw.rect()
                .x_y(x, y)
                .w_h(cell_width, cell_height)
                // HSL의 S(채도) 값에 방금 계산한 animated_saturation을 사용합니다.
                .color(hsl(color_factor, color_factor, 0.7));
        }
    }
    
    // Too Dense 메시지 표시
    if model.show_too_dense {
        draw.text("Too Dense")
            .x_y(0.0, 0.0)
            .color(WHITE)
            .font_size(48)
            .align_text_middle_y();
    }
    
    draw.to_frame(app, &frame).unwrap();
}

fn key_pressed(_app: &App, model: &mut Model, key: Key) {
    match key {
        Key::C => {
            // C 키를 누르면 모든 셀의 hue 계수 값을 랜덤하게 변경
            let total_cells = model.grid_size * model.grid_size;
            
            // 색상 계수 배열 크기가 맞는지 확인하고 필요시 resize
            if model.color_coefficients.len() != total_cells {
                model.color_coefficients.resize(total_cells, 0.0);
            }
            
            let mut rng = rand::thread_rng();
            for coefficient in &mut model.color_coefficients {
                *coefficient = rng.gen_range(0.0..1.0);
            }
            model.show_too_dense = false;
        }
        Key::Up => {
            // 위 화살표: 그리드 크기 2배 (최대 크기 제한)
            if model.grid_size * 2 <= model.max_grid_size {
                model.grid_size *= 2;
                let total_cells = model.grid_size * model.grid_size;
                
                // 새로운 크기에 맞게 색상 계수 배열 재생성
                let mut rng = rand::thread_rng();
                model.color_coefficients = (0..total_cells)
                    .map(|_| rng.gen_range(0.0..1.0))
                    .collect();
                // 그리드 크기가 바뀌었으니 오프셋도 새로 생성
                model.animation_offset = (0..total_cells)
                    .map(|_| rng.gen_range(0.0..PI * 2.0))
                    .collect();
                model.show_too_dense = false;
            } else {
                // 최대 크기 초과시 메시지 표시
                model.show_too_dense = true;
            }
        }
        Key::Down => {
            // 아래 화살표: 그리드 크기 절반 (최소 1 유지)
            if model.grid_size > 1 {
                model.grid_size /= 2;
                let total_cells = model.grid_size * model.grid_size;
                
                // 새로운 크기에 맞게 색상 계수 배열 재생성
                let mut rng = rand::thread_rng();
                model.color_coefficients = (0..total_cells)
                    .map(|_| rng.gen_range(0.0..1.0))
                    .collect();
                // 그리드 크기가 바뀌었으니 오프셋도 새로 생성
                model.animation_offset = (0..total_cells)
                    .map(|_| rng.gen_range(0.0..PI * 2.0))
                    .collect();
            }
            model.show_too_dense = false;
        }
        _ => {}
    }
}
---