線形補間

概要

線形補間は、線分 AB 上で、時間 t の時点での位置を求める。

t は 0 ～ 1 の範囲の値で、 0 のときは A 、1 のときは B の位置を返し、その間の値、たとえば t が 0.4 の場合は、 A から B へ直線で向かう場合の 40% の位置を返す。

たとえば A = 10, B = 20, t = 0.4 の値で線形補間をすると、 14 の値が返る。

コード例

function lerp(a: number, b: number, t: number): number {
  return a + (b - a) * t;
}

console.log(lerp(10, 20, 0.0)); // 10
console.log(lerp(10, 20, 0.2)); // 12
console.log(lerp(10, 20, 0.5)); // 15
console.log(lerp(10, 20, 0.8)); // 18
console.log(lerp(10, 20, 1.0)); // 20

a ～ b の値の範囲で、 t の位置にある値を返す。 (t = 0.0 ～ 1.0)

解説/アルゴリズム

範囲が 50 ～ 200 、位置が 0.3 (30%) の値を求める。

50 ～ 200 の範囲は、 200 - 50 = 150 で下限～上限まで 150 あることが分かる。

（下限と上限を 50 引いて、50 ～ 200 を 0 ～ 150 の範囲に変換した、と考えてもいい。）

この計算によって得られた 150 というのが実際の値の範囲で、この値に求めたい位置 0.3 を掛ける。

• 150 * 0.3 = 45

この 45 というのが 0 ～ 150 の範囲で 0.3(30%) の位置にある値になる。

ただ、実際の範囲は 50 を足した 50 ～ 200 であるので、計算結果の 45 に 50 を足したものが正しい値ということになる。

• (200 - 50) * 0.3 + 50 = 95

式の変形

// 線形補間の式
v = a + (b - a) * t

// 両辺からaを引く
v - a = (b - a) * t

// (b - a)で割る
(v - a) / (b - a) = t

// 左辺と右辺を入れ替える
t = (v - a) / (b - a)

線形補間の式を、 t について解く形に変形すると、正規化のアルゴリズムとなる。

// 線形補間の式
v = a + (b - a) * t

// 右辺を展開する
v = a + b * t - a * t

// 右辺を並び替える
v = a - a * t + b * t

// 右辺をaで括る
v = a * (1 - t) + b * t

この変形して得られた (1 - t) : t の比でブレンドする線形補間の形もよく利用される。