🔮 :: Wavy Portrait

📝 Rust Code

use nannou::prelude::*;
use nannou::noise::{ Perlin, NoiseFn };
use nannou::image::{DynamicImage, GenericImageView};

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

struct Model {
    _window: window::Id,
    perlin: Perlin,
    layers: usize,
    samples: usize,
    spacing: f32,
    amplitude: f32,
    freq: f64,
    time_speed: f32,
    start_time: std::time::Instant,
    image_data: DynamicImage,
    image_dimensions: Vec2,
}

fn model(app: &App) -> Model {
    let window_id = app
        .new_window()
        .size(800, 800)
        .title("Layered Line Depth - Image Guided")
        .view(view)
        .build()
        .unwrap();

    let perlin = Perlin::default();

    // 이미지 로드 - 프로젝트 루트 기준 상대 경로
    let img_path = std::path::Path::new("assets/test_image_07.jpg");

    // nannou::image 크레이트로 이미지 로드
    let image_data = nannou::image::open(&img_path).expect("Failed to load image");
    
    // 이미지 크기 가져오기
    let (width, height) = image_data.dimensions();
    let image_dimensions = vec2(width as f32, height as f32);
    
    Model {
        _window: window_id,
        perlin,
        layers: 130,
        samples: 800,
        spacing: 6.0,
        amplitude: 100.0,
        freq: 0.005,
        time_speed: 0.2,
        start_time: std::time::Instant::now(),
        image_data,
        image_dimensions,
    }
}

fn update(_app: &App, _model: &mut Model, _update: Update) {
    // 업데이트 로직
}

fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();
    // 어두운 회색 배경
    draw.background().hsla(0.0, 0.0, 0.01, 1.0);

    let win = app.window_rect();
    let t = model.start_time.elapsed().as_secs_f32();

    let x_min = win.left();
    let x_max = win.right();
    let width = x_max - x_min;
    let center_y = 0.0;

    for i in 0..model.layers {
        let depth = (i as f32 / (model.layers - 1) as f32) * 2.0 - 1.0;
        let base_y = center_y + depth * (model.layers as f32 * 0.5 * model.spacing);

        // 아래쪽이 두껍게: depth가 -1.0일 때 두껍게, 1.0일 때 가늘게
        let stroke_w = map_range(depth, -1.0, 1.0, 2.5, 0.5);
        let alpha = map_range(depth, -1.0, 1.0, 0.3, 1.0);

        let mut pts: Vec<Point2> = Vec::with_capacity(model.samples);

        for si in 0..model.samples {
            let u = si as f32 / (model.samples - 1) as f32;
            let x = x_min + u * width;

            let v = i as f32 / (model.layers - 1) as f32;

            // 이미지 상하 반전: v를 1.0 - v로 변환
            let v_flipped = 1.0 - v;

            // 픽셀 좌표 계산 (범위 체크 포함)
            let pixel_x = ((u * model.image_dimensions.x) as u32)
                .min(model.image_dimensions.x as u32 - 1);
            let pixel_y = ((v_flipped * model.image_dimensions.y) as u32)
                .min(model.image_dimensions.y as u32 - 1);

            // 픽셀 색상 가져오기
            let pixel_color = model.image_data.get_pixel(pixel_x, pixel_y);
            
            // 밝기 계산 (정확한 방법: sRGB 가중치 적용)
            let brightness = (0.299 * pixel_color[0] as f32 
                            + 0.587 * pixel_color[1] as f32 
                            + 0.114 * pixel_color[2] as f32) / 255.0;

            // 밝기에 따른 진폭 조절
            let current_amplitude = map_range(brightness, 0.0, 1.0, 0.0, model.amplitude * 2.0);

            let nx = (x as f64) * model.freq;
            let ny = (i as f64) * 0.05 + (t as f64) * (model.time_speed as f64);

            let noise_val = model.perlin.get([nx, ny]);
            let dy = noise_val as f32 * current_amplitude * (1.0 - depth.abs());

            let edge_falloff = cubic_ease(map_range(u, 0.0, 1.0, -1.0, 1.0).abs());
            let final_y = base_y + dy * (1.0 - 0.7 * edge_falloff);

            pts.push(pt2(x, final_y));
        }

        draw.polyline()
            .weight(stroke_w)
            .points(pts)
            .rgba(1.0, 1.0, 1.0, alpha);
    }

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

fn cubic_ease(x: f32) -> f32 {
    let x = x.clamp(0.0, 1.0);
    x * x * (3.0 - 2.0 * x)
}

📝 Rust Code + Comment

use nannou::prelude::*;                                      // Nannou의 기본 기능 임포트
use nannou::noise::{Perlin, NoiseFn};                        // Perlin 노이즈 관련 기능 임포트
use nannou::image::{DynamicImage, GenericImageView};         // 이미지 처리 관련 기능 임포트

// 전역 상수
const WINDOW_WIDTH: u32 = 1000;                               // 윈도우 너비 (픽셀 단위)
const WINDOW_HEIGHT: u32 = 1000;                              // 윈도우 높이 (픽셀 단위)
const WINDOW_TITLE: &str = "Layered Line Depth";             // 윈도우 제목
const DEFAULT_LAYERS: usize = 130;                           // 기본 레이어 수
const DEFAULT_SAMPLES: usize = 800;                          // 각 레이어당 샘플 포인트 수
const DEFAULT_SPACING: f32 = 6.0;                            // 레이어 간 간격
const DEFAULT_AMPLITUDE: f32 = 30.0;                        // 기본 파동 진폭
const DEFAULT_FREQ: f64 = 0.005;                             // 노이즈 주파수 (값이 작을수록 더 넓은 파동)
const DEFAULT_TIME_SPEED: f32 = 0.2;                         // 시간에 따른 애니메이션 속도
const IMAGE_PATH: &str = "assets/test4.jpg";                 // 로드할 이미지 파일 경로 
const BACKGROUND_GRAY: f32 = 0.01;                           // 배경색의 회색조 값 (0=검정, 1=하양)
const MIN_STROKE_WEIGHT: f32 = 0.5;                          // 라인의 최소 두께
const MAX_STROKE_WEIGHT: f32 = 2.5;                          // 라인의 최대 두께
const MIN_ALPHA: f32 = 0.3;                                  // 라인의 최소 투명도
const MAX_ALPHA: f32 = 1.0;                                  // 라인의 최대 투명도 (불투명)
const EDGE_FALLOFF_FACTOR: f32 = 0.7;                        // 가장자리 감쇠 계수


// Model 구조체 정의 - 프로그램의 상태를 저장하는 데이터 구조
struct Model {
    perlin: Perlin,                                        // Perlin 노이즈 생성기 (랜덤한 자연스러운 패턴 생성)
    layers: usize,                                         // 레이어 수 (수직으로 그려질 라인의 수)
    samples: usize,                                        // 각 레이어의 샘플 수 (각 레이어를 구성하는 점의 수)
    spacing: f32,                                          // 레이어 간 간격 (수직 간격)
    amplitude: f32,                                        // 기본 진폭 (파동의 높이)
    freq: f64,                                             // 노이즈 주파수 (파동의 밀도)
    time_speed: f32,                                       // 시간에 따른 변화 속도
    start_time: std::time::Instant,                        // 프로그램 시작 시간 (애니메이션 시간 계산용)
    image_data: DynamicImage,                              // 로드된 이미지 데이터
    image_dimensions: Vec2,                                // 이미지 차원 (너비, 높이)
}

// 애플리케이션 메인 함수 - 프로그램 진입점
fn main() {
    nannou::app(model)                                     // Nannou 애플리케이션 생성 및 model 함수(설정) 전달
        .update(update)                                    // 업데이트 함수 설정
        .run();                                            // 애플리케이션 실행
}

// Model을 생성하고 초기화하는 설정 함수
fn model(app: &App) -> Model {
    // 이미지 로딩 디버깅 코드
    match std::env::current_dir() {
        Ok(path) => println!("현재 작업 디렉토리: {}", path.display()),
        Err(e) => println!("현재 작업 디렉토리를 가져올 수 없음: {}", e),
    }

    // 윈도우 생성
    app.new_window()                                       // 새 윈도우 생성 시작
        .size(WINDOW_WIDTH, WINDOW_HEIGHT)                 // 윈도우 크기 설정
        .title(WINDOW_TITLE)                               // 윈도우 제목 설정
        .view(view)                                        // 뷰 함수 설정 (그리기 콜백)
        .build()                                           // 윈도우 생성 완료
        .expect("윈도우 생성에 실패했습니다.");                // 윈도우 생성 실패 시 프로그램 종료

    // Perlin 노이즈 생성기 초기화 - 자연스러운 랜덤 패턴 생성에 사용
    let perlin = Perlin::default();

    // 이미지 로드 (경로를 포함한 상수를 직접 사용)
    let image_data = match nannou::image::open(IMAGE_PATH) { 
        Ok(img) => img,
        Err(e) => {
            eprintln!("이미지 로드 실패 (경로: {:?}): {}", IMAGE_PATH, e);
            std::process::exit(1);
        }
    };
    
    // 이미지 크기 가져오기
    let (width, height) = image_data.dimensions();              // 이미지의 너비와 높이 가져오기
    let image_dimensions = vec2(width as f32, height as f32);   // Vec2 타입으로 변환
    
    // Model 인스턴스 반환 - 모든 필드 초기화
    Model {
        perlin,
        layers: DEFAULT_LAYERS,
        samples: DEFAULT_SAMPLES,
        spacing: DEFAULT_SPACING,
        amplitude: DEFAULT_AMPLITUDE,
        freq: DEFAULT_FREQ,
        time_speed: DEFAULT_TIME_SPEED,
        start_time: std::time::Instant::now(),
        image_data,
        image_dimensions,
    }
}

// 업데이트 함수 - 매 프레임마다 Model의 상태를 변경 (현재는 비어있음)
fn update(_app: &App, _model: &mut Model, _update: Update) {
    // 상태 업데이트 로직이 필요하다면 여기에 추가
}

// 뷰 함수 구현 - 프레임마다 호출되어 화면에 그리기 수행
fn view(app: &App, model: &Model, frame: Frame) {
    let draw = app.draw();                                   // 드로잉 컨텍스트 생성

    draw.background().hsla(0.0, 0.0, BACKGROUND_GRAY, 1.0);  // HSLA 색상 모델로 배경색 설정

    let win = app.window_rect();                             // 현재 윈도우의 크기 정보 가져오기
    let t = model.start_time.elapsed().as_secs_f32();        // 시작 시간부터 경과한 시간(초) 계산

    // 0으로 나누기 방지를 위해 분모가 0이 되지 않도록 보장
    let layers_denom = (model.layers.saturating_sub(1)).max(1) as f32;
    let samples_denom = (model.samples.saturating_sub(1)).max(1) as f32;

    // 각 레이어에 대한 라인 그리기
    for i in 0..model.layers {                                                  // 0부터 레이어 수만큼 반복
        let depth = (i as f32 / layers_denom) * 2.0 - 1.0;                      // -1.0(아래)에서 1.0(위) 까지의 깊이 값
        let base_y = 0.0 + depth * (model.layers as f32 * 0.5 * model.spacing); // 레이어의 기본 y 위치 계산 (center_y=0.0)

        // 아래쪽이 두껍게: depth가 -1.0일 때 두껍게, 1.0일 때 가늘게
        let stroke_w = map_range(depth, -1.0, 1.0, MAX_STROKE_WEIGHT, MIN_STROKE_WEIGHT); // 깊이에 따라 라인 두께 매핑
        let alpha = map_range(depth, -1.0, 1.0, MIN_ALPHA, MAX_ALPHA);                    // 깊이에 따라 투명도 매핑

        let mut pts: Vec<Point2> = Vec::with_capacity(model.samples);  // 샘플 포인트를 저장할 벡터 (용량 미리 할당)

        // 각 레이어의 샘플 포인트 계산
        for si in 0..model.samples {                         // 0부터 샘플 수만큼 반복
            let u = si as f32 / samples_denom;               // 0.0에서 1.0까지의 정규화된 x 위치
            let x = win.left() + u * win.w();                // 실제 x 좌표 계산
            
            let v = i as f32 / layers_denom;                 // 0.0에서 1.0까지의 정규화된 y 위치 (레이어 인덱스 기반)
            let v_flipped = 1.0 - v;                         // 이미지를 상하 반전시키기 위해 y 좌표 변환

            // 픽셀 좌표 계산 (범위 체크 포함)
            let pixel_x = ((u * model.image_dimensions.x) as u32)
                .clamp(0, model.image_dimensions.x as u32 - 1);             // 이미지 경계를 벗어나지 않도록 클램핑
            let pixel_y = ((v_flipped * model.image_dimensions.y) as u32)
                .clamp(0, model.image_dimensions.y as u32 - 1);             // 이미지 경계를 벗어나지 않도록 클램핑

            // 픽셀 색상 가져오기
            let pixel_color = model.image_data.get_pixel(pixel_x, pixel_y); // 지정된 픽셀의 색상 값 가져오기
            
            // 밝기 계산 - sRGB 가중치 적용 (R: 0.299, G: 0.587, B: 0.114)
            let brightness = (0.299 * pixel_color[0] as f32 
                            + 0.587 * pixel_color[1] as f32 
                            + 0.114 * pixel_color[2] as f32) / 255.0;       // 0.0에서 1.0까지의 값으로 정규화

            // 밝기에 따른 진폭 맵핑 - 밝은 영역에서 더 큰 진폭을 가짐
            let current_amplitude = map_range(brightness, 0.0, 1.0, 0.0, model.amplitude * 2.0);

            let nx = (x as f64) * model.freq;                                    // 노이즈 x 좌표 (실제 x 좌표에 주파수 곱하기)
            let ny = (i as f64) * 0.05 + (t as f64) * (model.time_speed as f64); // 노이즈 y 좌표 (레이어 인덱스와 시간에 따라 변화)

            let noise_val = model.perlin.get([nx, ny]);                          // Perlin 노이즈 값 가져오기 (-1.0에서 1.0 사이)
            let dy = noise_val as f32 * current_amplitude * (1.0 - depth.abs()); // y 방향 변위 계산
            let edge_falloff = cubic_ease((u * 2.0 - 1.0).abs());       // 가장자리에서 부드럽게 감소 (u를 -1~1 범위로 변환 후 절대값)
            
            // 최종 y 좌표 계산
            let final_y = base_y + dy * (1.0 - EDGE_FALLOFF_FACTOR * edge_falloff); 

            pts.push(pt2(x, final_y));                  // 계산된 점을 포인트 벡터에 추가
        }

        // 다각형 라인 그리기
        draw.polyline()                                 // 다각형 라인 그리기 시작
            .weight(stroke_w)                           // 라인 두께 설정
            .points(pts)                                // 그림 포인트들 설정
            .rgba(1.0, 1.0, 1.0, alpha);                // RGB 색상과 알파(투명도) 설정
    }

    // 프레임에 그리기 - 화면에 최종 결과 표시
    draw.to_frame(app, &frame).unwrap();                // 그린 내용을 프레임에 적용
}

// 입방 보간 함수 (cubic easing) - 부드러운 전환을 위한 보간 함수
fn cubic_ease(x: f32) -> f32 {
    let x = x.clamp(0.0, 1.0);                          // 입력 값을 0.0과 1.0 사이로 제한
    x * x * (3.0 - 2.0 * x)                             // 입방 보간 공식 적용
}