🔮 :: Monotone Dots based on a image

📝 Rust Code

// nannou 프레임워크의 거의 모든 기능을 포함하는 prelude를 가져옵니다.
// 앱 생성, 그리기, 색상 등 핵심 기능에 쉽게 접근할 수 있습니다.
use nannou::prelude::*;
// image 라이브러리의 open 함수를 가져와 이미지 파일을 불러올 수 있게 합니다.
use image::open;

// --- 상수 정의 ---
// 이미지를 샘플링할 격자의 크기를 정의합니다. 100x100 격자를 의미합니다.
const GRID_SIZE: usize = 100;
// 캔버스(창)의 가로/세로 크기를 정의합니다.
const CANVAS_SIZE: f32 = 1080.0;

// --- 데이터 모델 정의 ---
// 앱의 상태(state)를 저장할 구조체입니다.
// 이 예제에서는 이미지 각 픽셀의 밝기 값을 0.0 ~ 1.0 사이로 변환하여 저장합니다.
struct Model {
    brightness_grid: Vec<f32>,
}

// --- 주 실행 함수 ---
// 프로그램의 시작점(entry point)입니다.
fn main() {
    // nannou 앱을 초기화하고 model 함수를 설정합니다.
    // .update()는 매 프레임마다 호출될 로직을, .run()은 앱을 실행시킵니다.
    nannou::app(model).update(update).run();
}

// --- 모델 초기화 함수 ---
// 앱이 처음 시작될 때 딱 한 번 호출됩니다.
// 앱의 초기 상태를 설정하고 필요한 데이터를 로드하는 역할을 합니다.
fn model(app: &App) -> Model {
    // 1. 창(window) 설정
    // 앱의 창을 만들고, 크기를 CANVAS_SIZE로 지정하며, view 함수를 렌더링 루프로 연결합니다.
    // 이렇게 model 함수에서 창을 생성하면 시작 시 크기를 명확하게 제어할 수 있습니다.
    app.new_window()
        .size(CANVAS_SIZE as u32, CANVAS_SIZE as u32)
        .view(view) // 이 창에서 그림을 그릴 함수로 view를 지정
        .build()
        .unwrap();

    // 2. 이미지 파일 경로 설정 (이식 가능한 방식)
    // app.assets_path()는 'assets' 폴더의 경로를 동적으로 찾아줍니다.
    // 이를 통해 다른 컴퓨터에서도 프로젝트 구조만 같다면 코드를 수정 없이 실행할 수 있습니다.
    let assets = app.assets_path().expect("assets 폴더를 찾을 수 없습니다.");
    let img_path = assets.join("input.jpg"); // 'assets/input.jpg' 경로 생성

    // 3. 이미지 불러오기 및 에러 처리
    let img = match open(&img_path) {
        Ok(img) => img, // 성공 시 이미지 데이터를 반환
        Err(e) => {
            // 실패 시 에러 메시지를 터미널에 출력하고 프로그램을 종료합니다.
            eprintln!("이미지를 불러오지 못했습니다: {:?}. 경로: {:?}", e, img_path);
            std::process::exit(1);
        }
    };

    // 4. 이미지 리사이즈 및 픽셀 데이터 추출
    // 이미지를 GRID_SIZE x GRID_SIZE 크기로 리사이즈합니다.
    // Lanczos3 필터는 품질 저하를 최소화하는 고품질 리샘플링 알고리즘입니다.
    // to_rgba8()을 통해 각 픽셀을 R, G, B, Alpha(투명도) 채널로 변환합니다.
    let resized = img
        .resize_to_fill(
            GRID_SIZE as u32,
            GRID_SIZE as u32,
            image::imageops::FilterType::Lanczos3,
        )
        .to_rgba8();

    // 5. 밝기 값 계산 및 저장
    // GRID_SIZE * GRID_SIZE 만큼의 공간을 미리 할당하여 성능을 최적화합니다.
    let mut brightness_grid = Vec::with_capacity(GRID_SIZE * GRID_SIZE);
    
    // 리사이즈된 이미지의 모든 픽셀을 순회합니다.
    for pixel in resized.pixels() {
        // 각 픽셀의 R, G, B 값을 f32 타입으로 가져옵니다.
        let r = pixel[0] as f32;
        let g = pixel[1] as f32;
        let b = pixel[2] as f32;
        
        // 간단한 평균법으로 흑백(grayscale) 밝기 값을 계산합니다. (R+G+B)/3
        // 255.0으로 나누어 값을 0.0 ~ 1.0 범위로 정규화(normalize)합니다.
        let gray = (r + g + b) / 3.0 / 255.0;
        brightness_grid.push(gray);
    }

    // 계산된 밝기 값들이 담긴 grid를 Model 구조체에 담아 반환합니다.
    Model { brightness_grid }
}

// --- 업데이트 함수 ---
// 매 프레임마다 view 함수가 호출되기 직전에 호출됩니다.
// 모델의 상태를 변경하거나 애니메이션 로직을 넣을 때 사용합니다.
// 이 예제는 정적이므로 아무런 작업을 하지 않습니다.
fn update(_app: &App, _model: &mut Model, _update: Update) {}

// --- 뷰(그리기) 함수 ---
// 매 프레임마다 화면에 그림을 그리는 역할을 합니다.
fn view(app: &App, model: &Model, frame: Frame) {
    // 'draw' 인스턴스는 그림을 그릴 수 있는 도구들을 제공합니다.
    let draw = app.draw();

    // 배경을 검은색으로 칠합니다.
    draw.background().color(BLACK);

    // 그리드의 한 칸(cell)의 크기를 계산합니다.
    let cell_size = CANVAS_SIZE / GRID_SIZE as f32;
    // 원이 그려질 최대 반지름을 계산합니다. (셀 크기의 절반)
    let max_radius = cell_size / 2.0;

    // 저장된 모든 밝기 값을 순회하면서 인덱스(i)와 밝기 값(brightness)을 함께 가져옵니다.
    for (i, &brightness) in model.brightness_grid.iter().enumerate() {
        // 1차원 배열의 인덱스(i)를 2차원 그리드의 행(row)과 열(col)로 변환합니다.
        let row = i / GRID_SIZE;
        let col = i % GRID_SIZE;

        // nannou의 좌표계(-CANVAS_SIZE/2 ~ +CANVAS_SIZE/2)에 맞춰 원의 중심 (x, y)를 계산합니다.
        let x = col as f32 * cell_size + cell_size / 2.0 - CANVAS_SIZE / 2.0;
        let y = -(row as f32 * cell_size + cell_size / 2.0 - CANVAS_SIZE / 2.0); // y 좌표를 뒤집어 이미지의 위쪽이 캔버스 위쪽과 맞게 함

        // 이미지의 밝기(brightness)에 따라 원의 반지름(radius)을 결정합니다.
        // 밝을수록(1.0) 반지름이 커지고, 어두울수록(0.0) 작아집니다.
        let radius = brightness * max_radius;

        // 계산된 위치와 반지름으로 흰색 원을 그립니다.
        draw.ellipse()
            .x_y(x, y)
            .radius(radius)
            .color(WHITE);
    }

    // 지금까지 그린 모든 내용을 프레임에 최종적으로 렌더링합니다.
    draw.to_frame(app, &frame).unwrap();
}

visualizing the pulsating radii

중앙에서부터 물결이 퍼져나가는 듯한 패턴을 만들려면 시간과 각 점의 중심으로부터의 거리를 함께 사용합니다.

• 시간 (time): update 함수에서 계속 증가하는 변수를 두어 애니메이션의 기반으로 삼습니다.

• 거리 (dist): 각 점이 캔버스 중앙(0, 0)에서 얼마나 떨어져 있는지 계산합니다.

• 사인 함수 (sin)의 활용
  sin(시간 - 거리) 와 같은 형태로 사인 함수를 사용하면, 시간에 따라 진동하면서도 거리에 따라 위상(phase)이 달라지는 효과를 만들 수 있습니다. 이것이 바로 물결 패턴의 원리입니다.

📝 Rust Code @Animation

use nannou::prelude::*;
use image::open;

// --- 상수 정의 ---
const GRID_SIZE: usize = 100;
const CANVAS_SIZE: f32 = 1080.0;

// --- 데이터 모델 정의 ---
// 앱의 상태를 저장할 구조체입니다.
// 이미지 밝기 값과 함께 애니메이션을 위한 'time' 변수를 추가합니다.
struct Model {
    brightness_grid: Vec<f32>,
    time: f32, // 시간의 흐름을 저장할 변수
}

// --- 주 실행 함수 ---
fn main() {
    nannou::app(model).update(update).run();
}

// --- 모델 초기화 함수 ---
fn model(app: &App) -> Model {
    app.new_window()
        .size(CANVAS_SIZE as u32, CANVAS_SIZE as u32)
        .view(view)
        .build()
        .unwrap();

    let assets = app.assets_path().expect("assets 폴더를 찾을 수 없습니다.");
    let img_path = assets.join("input.jpg");

    let img = match open(&img_path) {
        Ok(img) => img,
        Err(e) => {
            eprintln!("이미지를 불러오지 못했습니다: {:?}. 경로: {:?}", e, img_path);
            std::process::exit(1);
        }
    };

    let resized = img
        .resize_to_fill(
            GRID_SIZE as u32,
            GRID_SIZE as u32,
            image::imageops::FilterType::Lanczos3,
        )
        .to_rgba8();

    let mut brightness_grid = Vec::with_capacity(GRID_SIZE * GRID_SIZE);
    for pixel in resized.pixels() {
        let r = pixel[0] as f32;
        let g = pixel[1] as f32;
        let b = pixel[2] as f32;
        let gray = (r + g + b) / 3.0 / 255.0;
        brightness_grid.push(gray);
    }

    // Model을 초기화할 때 time 값을 0.0으로 설정합니다.
    Model {
        brightness_grid,
        time: 0.0,
    }
}

// --- 업데이트 함수 ---
// 매 프레임마다 호출되어 모델의 상태를 업데이트합니다.
// 이제 이 함수는 애니메이션의 핵심 역할을 합니다.
fn update(_app: &App, model: &mut Model, _update: Update) {
    // 매 프레임마다 time 값을 조금씩 증가시킵니다.
    // 이 값을 조절하여 애니메이션의 전체 속도를 제어할 수 있습니다.
    model.time += 0.03;
}

// --- 뷰(그리기) 함수 ---
// 매 프레임마다 화면에 그림을 그립니다.
fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();
    draw.background().color(BLACK);

    let cell_size = CANVAS_SIZE / GRID_SIZE as f32;
    let max_radius = cell_size / 2.0;

    for (i, &brightness) in model.brightness_grid.iter().enumerate() {
        let row = i / GRID_SIZE;
        let col = i % GRID_SIZE;

        let x = col as f32 * cell_size + cell_size / 2.0 - CANVAS_SIZE / 2.0;
        let y = -(row as f32 * cell_size + cell_size / 2.0 - CANVAS_SIZE / 2.0);

        // --- 애니메이션 로직 시작 ---

        // 1. 캔버스 중심(0,0)으로부터 현재 점까지의 거리를 계산합니다. (피타고라스 정리)
        let dist = (x.powi(2) + y.powi(2)).sqrt();

        // 2. 시간과 거리를 조합하여 사인 함수의 입력값(위상, phase)을 만듭니다.
        // model.time: 시간이 흐르면서 전체적인 파동을 만듭니다.
        // dist * 0.02: 거리에 따라 파동의 시작점을 다르게 하여 물결 효과를 줍니다.
        let phase = model.time - dist * 0.02;

        // 3. 사인 함수의 결과(-1.0 ~ 1.0)를 크기 배율(0.0 ~ 1.0)로 변환합니다.
        // (sin(phase) + 1.0) -> 0.0 ~ 2.0 범위로 변환
        // * 0.5             -> 0.0 ~ 1.0 범위로 최종 변환
        let scale = (phase.sin() + 1.0) * 0.5;

        // 4. 이미지 밝기에 따른 기본 반지름을 계산합니다.
        let base_radius = brightness * max_radius;

        // 5. 기본 반지름에 애니메이션 배율(scale)을 곱하여 최종 반지름을 결정합니다.
        let radius = base_radius * scale;
        
        // --- 애니메이션 로직 끝 ---

        draw.ellipse()
            .x_y(x, y)
            .radius(radius)
            .color(WHITE);
    }

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

핵심 로직 변경점 🎯

1. Model 구조체

• time: f32 필드가 추가되어 앱 전역에서 시간 값을 공유합니다.

2. update 함수

• 더 이상 비어있지 않고, model.time 값을 매 프레임 증가시켜 애니메이션을 구동합니다.

3. view 함수 내부

• 각 점의 좌표 (x, y)를 이용해 중심으로부터의 거리 dist를 계산합니다.
• model.time과 dist를 조합해 사인파의 phase를 만듭니다.
• 사인파의 결과를 0.0 ~ 1.0 사이의 scale 값으로 변환합니다.
• 기존의 brightness * max_radius에 이 scale 값을 곱하여 최종 radius를 결정합니다.

🛠️ 애니메이션 조절하기
코드를 직접 수정하며 다른 느낌의 패턴을 만들어볼 수 있습니다.

🛠️ 속도 조절
update 함수의 model.time += 0.03; 에서 0.03을 더 큰 값으로 바꾸면 애니메이션이 빨라지고, 작은 값으로 바꾸면 느려집니다.

🛠️ 물결 간격 조절
view 함수의 let phase = model.time - dist * 0.02; 에서 0.02를 더 큰 값으로 바꾸면 물결이 더 촘촘해지고(파장이 짧아지고), 작은 값으로 바꾸면 더 넓게 퍼집니다.

✅⚙️🛠️📄📚🎨🖼️🧩🧠🧮🕹️🧿⏳🎛️🔮🌌🪩🗂️📝🧰🔒

아보카도
Sample
Important
Highlighting
비색
적황색
purple
hot pink
yellow
살구색
orange
green
blue