Ex falso sequitur quodlibet

Curves & interpolation · 7 / 10

Lerp / Inverse Lerp / Remap

値を混ぜたり範囲を変えて色や大きさへ対応させる。

Compare in motion

Interactive demo

色が変わるUI

Synchronized comparison
AReference
値を一瞬で切り替える

値を一瞬で切り替える

BLerp / Inverse Lerp / Remap100%
二つの状態を連続的につなげる

二つの状態を連続的につなげる

Loading demo…

Scrub to pause and inspect. At 0%, B matches A; at 100%, B shows the effect. The scene repeats every 8 seconds.

Look for: 比率に沿って中間値を取る → 終了色と大きさ。

A small visual example of a game use case. Games combine these techniques with assets and other effects.

Read the storyboard

例: 色が変わるUI

  1. 1. Start

    開始色と大きさ

  2. 2. Change

    比率に沿って中間値を取る

  3. 3. Result

    終了色と大きさ

二つの状態を連続的につなげる。時間変化を示す模式図です。実際の描画結果や処理速度を再現したものではありません。

How it works

  1. 1. Input

    値 A・B と比率 t

  2. 2. Process

    線形補間・値域変換

  3. 3. Result

    範囲内の中間値

A schematic of Lerp / Inverse Lerp / Remap. It shows the relationship between input, process, and result; exact values and rendering depend on the implementation.

Further reading

The Book of Shaders — Shaping Functions ↗

A general reference for this subcategory.