🔮 :: Dynamic Color Grid ver.1

📝 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 메시지 표시 여부
}

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();
    
    Model {
        color_coefficients,
        grid_size,
        max_grid_size,
        show_too_dense: false,
    }
}

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 color_coefficient = model.color_coefficients[idx];
            
            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)
                .color(hsl(0.8, color_coefficient, 0.4));
        }
    }
    
    // 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.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.show_too_dense = false;
        }
        _ => {}
    }
}

📝 Rust Code + Comment

// nannou prelude는 앱, 그리기, 창 관리 등 nannou의 핵심 기능을 대부분 포함하고 있습니다.
use nannou::prelude::*;
// 난수 생성을 위해 rand 크레이트의 Rng 트레이트를 가져옵니다.
use rand::Rng;

// 애플리케이션의 전체 상태를 저장하는 구조체입니다.
struct Model {
    // 각 그리드 셀의 색상(채도) 계수 값을 저장하는 벡터(동적 배열)입니다.
    color_coefficients: Vec<f32>,
    // 그리드의 한 변의 셀 개수를 나타냅니다. (예: 8이면 8x8 그리드)
    grid_size: usize,
    // 그리드가 가질 수 있는 최대 크기를 제한합니다. (2^8 = 256)
    max_grid_size: usize,
    // 그리드 크기가 최대치를 초과했을 때 "Too Dense" 메시지를 표시할지 여부를 결정합니다.
    show_too_dense: bool,
}

// 프로그램의 시작점(entry point)입니다.
fn main() {
    // nannou 앱을 설정하고 실행합니다.
    // model 함수로 초기 상태를 만들고, update 함수로 상태를 갱신하며, view 함수로 화면을 그립니다.
    nannou::app(model).update(update).run();
}

// 앱이 시작될 때 한 번만 호출되어 초기 모델(상태)을 설정합니다.
fn model(app: &App) -> Model {
    // 새 창을 생성하고 설정을 추가합니다.
    app.new_window()
        .size(1000, 1000) // 창 크기를 가로 1000, 세로 1000 픽셀로 설정
        .view(view) // 매 프레임마다 화면을 그릴 함수로 view 함수를 지정
        .key_pressed(key_pressed) // 키보드 키가 눌렸을 때 호출될 함수로 key_pressed 함수를 지정
        .build() // 설정을 바탕으로 창을 빌드
        .unwrap(); // 창 생성에 실패하면 프로그램을 중단

    // 초기 그리드 크기를 2x2로 설정합니다.
    let grid_size = 2;
    // 최대 그리드 크기를 256x256으로 설정합니다. (2의 8승)
    let max_grid_size = 256;
    // 전체 셀의 개수를 계산합니다. (grid_size * grid_size)
    let total_cells = grid_size * grid_size;

    // 난수 생성기를 초기화합니다.
    let mut rng = rand::thread_rng();
    // 0부터 total_cells - 1까지 반복하면서 각 셀에 대한 랜덤한 색상 계수(0.0 ~ 1.0)를 생성합니다.
    let color_coefficients = (0..total_cells).map(|_| rng.gen_range(0.0..1.0)).collect();

    // 생성된 값들로 Model 구조체를 초기화하여 반환합니다.
    Model {
        color_coefficients,
        grid_size,
        max_grid_size,
        show_too_dense: false, // 처음에는 "Too Dense" 메시지를 표시하지 않음
    }
}

// 매 프레임마다 호출되어 모델의 상태를 업데이트합니다. (현재는 아무 작업도 하지 않음)
fn update(_app: &App, _model: &mut Model, _update: Update) {
    // 예를 들어, 여기에 'show_too_dense'를 특정 시간 후에 false로 바꾸는 로직을 추가할 수 있습니다.
}

// 매 프레임마다 화면에 내용을 그리는 함수입니다.
fn view(app: &App, model: &Model, frame: Frame) {
    // 그리기를 위한 Draw 객체를 생성합니다.
    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 { // 행(row) 반복
        for j in 0..grid_size { // 열(column) 반복
            // 2차원 인덱스 (i, j)를 1차원 벡터의 인덱스로 변환합니다.
            let idx = i * grid_size + j;

            // 계산된 인덱스가 color_coefficients 벡터의 유효한 범위 내에 있는지 확인합니다.
            // (그리드 크기가 변경되는 동안 발생할 수 있는 오류 방지)
            if idx >= model.color_coefficients.len() {
                continue; // 범위를 벗어나면 다음 셀로 넘어갑니다.
            }

            // 현재 셀의 색상 계수 값을 가져옵니다.
            let color_coefficient = model.color_coefficients[idx];

            // 셀을 그릴 화면상의 x, y 좌표를 계산합니다.
            // Nannou의 좌표계는 중앙이 (0.0, 0.0)입니다.
            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) // 사각형의 너비와 높이 설정
                .color(hsl(0.8, color_coefficient, 0.4)); // HSL 색상 모델로 색 지정
                                                                // H(색상): 0.8 (푸른 계열)
                                                                // S(채도): 랜덤 계수 값
                                                                // L(명도): 0.4
        }
    }

    // 'show_too_dense' 플래그가 true이면 메시지를 표시합니다.
    if model.show_too_dense {
        draw.text("Too Dense") // 표시할 텍스트
            .x_y(0.0, 0.0) // 화면 중앙에 위치
            .color(WHITE) // 텍스트 색상을 흰색으로
            .font_size(48) // 폰트 크기를 48로
            .align_text_middle_y(); // 수직 정렬을 중앙으로
    }

    // 지금까지 그린 모든 내용을 프레임에 렌더링하여 화면에 표시합니다.
    draw.to_frame(app, &frame).unwrap();
}

// 키보드 키가 눌렸을 때 호출되는 이벤트 핸들러 함수입니다.
fn key_pressed(_app: &App, model: &mut Model, key: Key) {
    // 눌린 키의 종류에 따라 다른 동작을 수행합니다.
    match key {
        // 'C' 키를 눌렀을 경우
        Key::C => {
            // 현재 그리드의 총 셀 개수를 계산합니다.
            let total_cells = model.grid_size * model.grid_size;

            // 혹시 모를 상황에 대비해 색상 계수 배열의 크기를 현재 셀 개수와 맞춥니다.
            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);
            }
            // "Too Dense" 메시지는 숨깁니다.
            model.show_too_dense = false;
        }
        // 위쪽 화살표 키를 눌렀을 경우
        Key::Up => {
            // 그리드 크기를 2배로 늘렸을 때 최대 크기를 넘지 않는지 확인합니다.
            if model.grid_size * 2 <= model.max_grid_size {
                // 그리드 크기를 2배로 늘립니다.
                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();
                // "Too Dense" 메시지는 숨깁니다.
                model.show_too_dense = false;
            } else {
                // 최대 크기를 초과하면 "Too Dense" 메시지를 표시하도록 플래그를 설정합니다.
                model.show_too_dense = true;
            }
        }
        // 아래쪽 화살표 키를 눌렀을 경우
        Key::Down => {
            // 그리드 크기가 1보다 클 때만 (최소 1x1은 유지) 크기를 줄입니다.
            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();
            }
            // "Too Dense" 메시지는 숨깁니다.
            model.show_too_dense = false;
        }
        // 위에서 지정한 키 외의 다른 키가 눌렸을 경우
        _ => {} // 아무 작업도 하지 않습니다.
    }
}

📝 코드 분석 (Gemini)

1. 라이브러리 임포트 (use):

• nannou::prelude::*: Nannou 프레임워크의 거의 모든 주요 기능을 가져옵니다. 앱 생성, 그리기, 이벤트 처리 등에 필요한 기본 요소들이 포함되어 있습니다.

• rand::Rng: 난수 생성을 위한 Rng 트레이트를 가져옵니다. gen_range와 같은 메서드를 사용하여 특정 범위의 난수를 만들 수 있습니다.

2. Model 구조체:

• 애플리케이션의 상태를 저장하는 데이터 구조입니다.

• color_coefficients: 각 그리드 셀의 색상(여기서는 색상(hue)의 계수)을 결정하는 f32 값들을 저장하는 벡터입니다.

• grid_size: 현재 그리드의 크기 (예: grid_size가 8이면 8x8 그리드)를 나타냅니다.

• max_grid_size: 그리드가 가질 수 있는 최대 크기를 제한합니다.

• show_too_dense: 그리드 크기가 최대치를 초과했을 때 "Too Dense" 메시지를 표시할지 여부를 결정하는 불리언 값입니다.

3. main 함수:

• 프로그램의 진입점입니다.

• nannou::app(model).update(update).run(): Nannou 애플리케이션을 설정하고 실행합니다.

  • app: model 함수를 사용해 앱의 초기 상태를 설정합니다.

  • update: update 함수를 매 프레임마다 호출하여 앱의 상태를 업데이트합니다.

  • run: 애플리케이션의 이벤트 루프를 시작합니다.

4. model 함수:

• 애플리케이션이 처음 시작될 때 한 번만 호출됩니다. Model 구조체의 초기 인스턴스를 생성하고 반환합니다.

• app.new_window(): 새 창을 생성합니다.

  • .size(1000, 1000): 창의 가로와 세로 크기를 1000픽셀로 설정합니다.

  • .view(view): view 함수를 렌더링(그리기) 함수로 지정합니다.

  • .key_pressed(key_pressed): key_pressed 함수를 키보드 입력 처리 함수로 지정합니다.

  • .build().unwrap(): 설정을 바탕으로 창을 빌드합니다. unwrap()은 빌드 실패 시 프로그램을 패닉 상태로 만듭니다.

• 초기 그리드 크기를 2로 설정하고, 최대 크기는 256 (2의 8제곱)으로 설정합니다.

• rand::thread_rng(): 현재 스레드에서 사용할 난수 생성기를 초기화합니다.

• color_coefficients: map과 collect를 사용하여 초기 그리드 셀 개수만큼 0.0에서 1.0 사이의 무작위 부동소수점 숫자를 생성하여 벡터에 저장합니다.

• 설정된 값들로 Model 구조체를 초기화하여 반환합니다.

5. update 함수:

• 매 프레임마다 view 함수가 호출되기 직전에 호출됩니다. 앱의 논리를 업데이트하는 데 사용됩니다.

• 현재 코드에서는 비어 있지만, 예를 들어 "Too Dense" 메시지를 특정 시간 후에 자동으로 사라지게 하는 로직을 여기에 추가할 수 있습니다.

6. view 함수:

매 프레임마다 화면에 그림을 그리는 역할을 합니다.

• app.draw(): 그리기를 위한 Draw 인스턴스를 생성합니다.

• draw.background().color(BLACK): 창 배경을 검은색으로 칠합니다.

• cell_width, cell_height: 전체 창 크기를 현재 그리드 크기로 나누어 각 셀의 너비와 높이를 계산합니다.

• 이중 for 루프: 그리드의 모든 행(i)과 열(j)을 순회하며 각 셀을 그립니다.

  • idx: 1차원 벡터인 color_coefficients에서 현재 셀(i, j)에 해당하는 색상 계수를 찾기 위한 인덱스를 계산합니다.

  • idx >= model.color_coefficients.len(): 그리드 크기가 변경되는 과정에서 인덱스가 벡터의 범위를 벗어나는 것을 방지하기 위한 안전장치입니다.

• x, y: 셀이 그려질 화면상의 중심 좌표를 계산합니다. Nannou의 좌표계는 중앙이 (0,0)입니다.

• draw.rect(): 사각형을 그립니다.

  • .x_y(x, y): 사각형의 중심 좌표를 설정합니다.

  • .w_h(cell_width, cell_height): 사각형의 너비와 높이를 설정합니다.

  • .color(hsl(0.8, color_coefficient, 0.4)): 셀의 색상을 HSL 색 공간을 이용해 설정합니다.

    • Hue (색상): 0.8 (푸른 계열)로 고정되어 있습니다.
    • Saturation (채도): color_coefficient 값 (0.0 ~ 1.0)에 따라 달라집니다.
    • Lightness (명도): 0.4로 고정되어 있습니다.

• if model.show_too_dense: show_too_dense가 true이면 화면 중앙에 "Too Dense"라는 텍스트를 흰색으로 그립니다.

• draw.to_frame(app, &frame).unwrap(): 지금까지 그린 모든 내용을 프레임에 최종적으로 렌더링하여 화면에 표시합니다.

7. key_pressed 함수:

• 키보드 키가 눌렸을 때 호출됩니다. Model의 상태를 변경하여 상호작용을 처리합니다.

• match key: 눌린 키의 종류에 따라 다른 동작을 수행합니다.

• Key::C: 그리드 크기는 유지한 채, 모든 셀의 색상 계수를 새로운 난수로 다시 채웁니다. show_too_dense 플래그는 false로 리셋합니다.

• Key::Up: 그리드 크기를 2배로 늘립니다.

  • 단, 새로운 크기가 max_grid_size를 초과하지 않을 경우에만 실행됩니다.

  • 크기가 변경되면, 새로운 총 셀 개수에 맞춰 color_coefficients 벡터를 완전히 새로 생성합니다.

  • 최대 크기를 초과하면 show_too_dense를 true로 설정하여 메시지를 표시하도록 합니다.

• Key::Down: 그리드 크기를 2로 나눕니다.

  • 그리드 크기가 1보다 클 경우에만 실행됩니다.

  • 크기가 변경되면, 마찬가지로 color_coefficients 벡터를 새로 생성합니다.

  • show_too_dense 플래그는 false로 리셋합니다.

• _ => {}: 그 외 다른 키가 눌렸을 때는 아무 작업도 하지 않습니다.