🎛️ :: Rect 구조체

nannou의 Rect 구조체는 2D 사각형을 표현하는 핵심적인 타입입니다.

🧩 Rect 구조체 개요

Rect는 중심점(center)과 크기(wh) 로 정의되는 사각형으로, 그래픽 프로그래밍에서 화면 영역, 경계 상자 등을 표현하는 데 사용됩니다.

🧩 주요 생성 방법

use nannou::prelude::*;

// 다양한 방법으로 Rect 생성
let rect1 = Rect::from_wh(vec2(100.0, 50.0));          // 크기로부터 (중심은 (0,0))
let rect2 = Rect::from_corners(pt2(-50.0, -25.0), pt2(50.0, 25.0)); // 모서리로부터
let rect3 = Rect::from_x_y_w_h(10.0, 20.0, 100.0, 50.0); // 위치와 크기로부터
let rect4 = Rect::from_w_h(200.0, 100.0);              // 너비, 높이로부터

🧩 주요 필드와 메서드

🔸 기본 속성

let win = app.window_rect();

// 중심점과 크기
let center: Point2 = win.xy();     // 중심점 (0.0, 0.0)
let size: Vec2 = win.wh();         // 크기 (Vec2)
let width: f32 = win.w();          // 너비
let height: f32 = win.h();         // 높이

// 모서리 좌표
let left: f32 = win.left();        // 왼쪽 X
let right: f32 = win.right();      // 오른쪽 X  
let top: f32 = win.top();          // 위쪽 Y
let bottom: f32 = win.bottom();    // 아래쪽 Y

// 모서리 점들
let top_left: Point2 = win.top_left();
let top_right: Point2 = win.top_right();
let bottom_left: Point2 = win.bottom_left();
let bottom_right: Point2 = win.bottom_right();

🔸 범위 관련 메서드

// 경계 확인
let point = pt2(50.0, 30.0);
let contains: bool = win.contains(point); // 점이 내부에 있는지 확인

// 교차 확인
let other_rect = Rect::from_wh(vec2(50.0, 50.0));
let intersection: Option<Rect> = win.intersect(other_rect); // 교차 영역

// 패딩 적용
let padded = win.pad(10.0);        // 모든 방향 패딩
let padded_top = win.pad_top(5.0); // 위쪽만 패딩

🔸 변형 메서드

// 이동
let moved = win.shift(vec2(10.0, -5.0)); // 이동

// 크기 조정
let scaled = win.scale(1.5);       // 비율로 스케일

// 정렬
let aligned_top = Rect::from_x_y_w_h(
    other_rect.x(),
    win.top() - other_rect.h() * 0.5,
    other_rect.w(),
    other_rect.h()
);

// X축으로 늘리기
let stretched_x = Rect::from_x_y_w_h(
    win.x(),
    win.y(),
    win.w() * 2.0,
    win.h()
);

// 매핑 유틸리티
// (현재 좌표, 정규화 0.0, 정규화 1.0, 화면 왼쪽 좌표, 화면 오른쪽 좌표)
let x = map_range(0.5, 0.0, 1.0, win.left(), win.right());
// (현재 좌표, 정규화 0.0, 정규화 1.0, 화면 아래쪽 좌표, 화면 위쪽 좌표)
let y = map_range(0.5, 0.0, 1.0, win.bottom(), win.top());

🔸 분할 메서드

// 비율 기반 분할 (0.0 ~ 1.0)
win.split_left(0.3)    // 왼쪽 30%
win.split_right(0.3)   // 오른쪽 30%  
win.split_top(0.3)     // 위쪽 30%
win.split_bottom(0.3)  // 아래쪽 30%

// 절반 분할 (편의 메서드)
win.left_half()        // 왼쪽 절반 = split_left(0.5)
win.right_half()       // 오른쪽 절반 = split_right(0.5)
win.top_half()         // 위쪽 절반 = split_top(0.5)
win.bottom_half()      // 아래쪽 절반 = split_bottom(0.5)

🧩 실제 사용 예제

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();
    
    draw.background().color(BLACK);

    let quadrants = [
        Rect::from_corners(win.top_left(), win.xy()),
        Rect::from_corners(win.xy(), win.top_right()),
        Rect::from_corners(win.bottom_left(), win.xy()),
        Rect::from_corners(win.xy(), win.bottom_right()),
    ];
    
    // 색상 팔레트
    let colors = [
        hsla(220.0 / 360.0, 0.5, 0.1, 1.0),
        hsla(330.0 / 360.0, 0.5, 0.5, 1.0), 
        hsla(160.0 / 360.0, 0.5, 0.5, 1.0),
        hsla(270.0 / 360.0, 0.5, 0.5, 1.0), 
    ];
    
    // 사분면 그리기
    for (i, quadrant) in quadrants.iter().enumerate() {
        draw.rect()
            .xy(quadrant.xy())
            .wh(quadrant.wh())
            .color(colors[i]);
    }
    
    // 화면 중앙에 정사각형
    let square_size = win.w().min(win.h()) * 0.2;
    let square_rect = Rect::from_w_h(square_size, square_size);
    
    draw.rect()
        .xy(square_rect.xy())
        .wh(square_rect.wh())
        .color(WHITE);
        
    // === 막대 그래프 로직 수정 ===
    let mouse_pos = app.mouse.position();
    
    // 막대가 시작될 왼쪽 x좌표를 고정합니다. (여백 0%)
    let start_x = win.left();
    let bar_h = 20.0;

    // 막대의 너비 = (마우스 x좌표 - 시작점 x좌표). 너비가 음수가 되지 않도록 clamp합니다.
    let bar_w = (mouse_pos.x - start_x).max(0.0);

    // 막대의 중심 x좌표 = 시작점 + (계산된 너비 / 2)
    let bar_x = start_x + bar_w * 0.5;
    let bar_y = win.bottom() + bar_h * 0.5 + 10.0; // 화면 하단에 약간의 여유 공간 추가

    draw.rect()
        .x_y(bar_x, bar_y)
        .w_h(bar_w, bar_h)
        .color(PURPLE);

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

🔸 주요 사항

• Rect의 좌표계는 중심을 원점(0,0) 으로 사용합니다

• left(), right(), top(), bottom()은 해당 모서리의 좌표 값을 반환합니다

• wh()는 Vec2 타입으로 너비와 높이를 반환합니다

• 윈도우 Rect는 일반적으로 app.window_rect()로 얻을 수 있습니다