🎛️ :: app.time() 이해하기

Nannou에서 app.time() 완벽 이해하기

시간에 따라 변화하는 애니메이션을 구현할 때 가장 자주 사용하는 메서드가 바로 app.time()이다.
이 메서드는 단순히 “현재 경과 시간”을 반환하는 것 같지만,
정확히 언제, 어떤 단위로, 어떻게 갱신되는지를 이해하면 훨씬 더 유연한 애니메이션을 만들 수 있다.

🧩 1. app.time()의 기본 개념

app.time()은 Nannou의 App 구조체에 포함된 메서드로,
애플리케이션이 시작된 이후 경과한 시간을 초 단위(f32)로 반환한다.

let t = app.time();

• 반환값 타입: f32
• 단위: 초(seconds)
• 기준점: app 실행(윈도우 생성) 시점

즉, 프로그램이 실행된 후부터 현재까지의 누적 시간이야.
이 시간은 프레임과 관계없이 지속적으로 증가하기 때문에,
프레임 드랍이 있더라도 전체 시간 흐름은 일정하게 유지돼.

---

🧠 2. 내부 동작 원리

Nannou는 내부적으로 프레임 루프(프레임 단위 업데이트)를 관리하지만,
app.time()은 프레임 루프와 별개로 시스템의 실제 경과 시간을 기반으로 갱신된다.

항목	내용
반환 타입 / 필드 타입	f32 — App.time 필드가 f32 타입으로 정의되어 있음 (docs.rs)
의미	앱이 시작된 이후 흐른 시간(초 단위)
제공 이유	app.duration.since_start.secs()를 매번 호출하지 않고 간편하게 접근하려는 용도 (docs.rs)
한계	장시간 실행에는 부동소수점 정밀도 손실 가능성 있음 — 문서에서 권장하지 않음 (docs.rs)
더 정밀한 대안	app.duration.since_start 또는 app.duration.since_prev_update 등 Duration 기반 필드 사용 (docs.rs)
시간 유틸리티	nannou::time 모듈에서 DurationF64 등 Duration → f64 변환 유틸리티 제공 (docs.rs)

💡 참고
Nannou는 내부적으로 App 구조체에 Instant::now()를 기록해두고,
app.time() 호출 시 Instant::now() - start_time 값을 초 단위로 변환해 반환한다.

---

⏱️ 3. 자주 쓰이는 패턴

🎵 예제 1. 사인파 움직임 만들기

fn view(app: &App, _model: &Model, frame: Frame) {
    let draw = app.draw();
    draw.background().color(BLACK);

    let t = app.time();
    let x = (t * 2.0).sin() * 200.0;
    let y = (t * 3.0).cos() * 200.0;

    draw.ellipse()
        .x_y(x, y)
        .radius(20.0)
        .color(RED);

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

fn view(app: &App, _model: &Model, frame: Frame) {
    let draw = app.draw();

    // 앱 시작 후 경과된 초
    let t = app.time;

    // t를 사용해서 움직임이나 애니메이션 처리
    let center = pt2(t.cos(), t.sin()) * 100.0;
    draw.rect()
        .x_y(center.x, center.y)
        .w_h(100.0, 100.0);

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

➡️ app.time()으로 얻은 t를 sin과 cos 함수에 적용하면,
시간에 따라 주기적으로 움직이는 패턴을 손쉽게 만들 수 있다.

🌈 예제 2. 컬러 애니메이션

fn view(app: &App, _model: &Model, frame: Frame) {
    let draw = app.draw();
    draw.background().color(BLACK);

    let t = app.time();
    let hue = (t * 30.0) % 360.0;
    let color = hsv(hue / 360.0, 1.0, 1.0);

    draw.rect()
        .w_h(300.0, 300.0)
        .color(color);

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

➡️ 시간 기반으로 색상(Hue)을 순환시켜,
지속적으로 변화하는 시각적 리듬을 표현할 수 있다.

---

⚙️ 4. app.time()과 update()의 차이

보통 Nannou 프로젝트는 아래 구조를 가진다.

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

• update()는 매 프레임마다 호출되는 함수다.

• app.time()은 전역 시간으로, 프레임과 관계없이 흘러간 시간을 나타낸다.

구분	app.time()	update()
역할	경과 시간 반환	상태 갱신 로직 처리
단위	초 단위(f64)	프레임 단위
갱신 주기	실시간	FPS 의존
용도	애니메이션, 주기 제어	파티클, 물리 계산 등

둘을 함께 사용하면
“시간 기반 + 프레임 기반”의 하이브리드 업데이트가 가능하다.

---

🔁 5. 변형 활용: app.elapsed_frames()

app.time()이 초 단위라면,
app.elapsed_frames()는 프레임 카운터다.

let frame_count = app.elapsed_frames();

• 단위: 프레임 수 (정수형 u64)

• FPS가 일정하면 app.time()과 비례 관계

💡 예를 들어 FPS가 60이라면,
app.elapsed_frames() ≈ app.time() * 60.0

둘을 함께 써서, 프레임 기반 타이밍 제어도 가능하다.

---

⚠️ 6. 주의할 점

1. app.time()은 멈추지 않는다.

   • 윈도우가 일시정지되더라도, app.time()은 계속 증가할 수 있다.
   • 일시정지 가능한 타이머를 원한다면 별도 변수를 만들어 delta_time을 더해주는 방식이 필요하다.

2. 리셋 불가능

   • app.time() 자체는 초기화 후 변경 불가능.

   • 리셋이 필요하면 start_time = app.time() 형태로 기준점을 수동 저장해야 한다.

3. 부동소수점 오차

   • 매우 긴 런타임(수시간 이상)에서는 f64의 오차가 누적될 수 있다.

   • 일반적인 제너레이티브 아트에서는 무시해도 무방하다.

---

🧮 7. 직접 리셋 가능한 타이머 구현 예시

struct Model {
    start_time: f64,
}

fn model(app: &App) -> Model {
    Model {
        start_time: app.time(),
    }
}

fn view(app: &App, model: &Model, frame: Frame) {
    let t = app.time() - model.start_time; // 리셋 가능한 상대 시간
    let draw = app.draw();
    draw.background().color(BLACK);

    let x = (t * 2.0).sin() * 200.0;
    draw.ellipse().x_y(x, 0.0).radius(30.0).color(WHITE);

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

➡️ model.start_time을 기준점으로 두면,
언제든지 start_time을 갱신하여 타이머를 리셋할 수 있다.

---