lerp関数（線形補間）について

自分が使ってきていた式と違う式を見たのでメモ。

始点と終点の二つの数値の間で、指定した補間値による数値を取得することができる。

関数にしてループで使用する。
返ってきた値をまた始点に設定して使用すると、終点に達するまでの数値を取得し続けることができる。

用途としては、主にオブジェクトを滑らかに移動させたり、色や透明度などのプロパティを変化させる場合などに使用する。

/**
 * t 補間値 0〜1 の数にする
 * limit 始点と終点の差がこの数値以下になったら、終点の値にする
 */
function lerp(start, end, n, limit = 0.001) {
  let current = (1 - n) * start + n * end;
  if (Math.abs(end - current) < limit) current = end;
  return current;
}

// 今までこんな感じのを使っていた
function lerp2(start, end, n, limit = 0.001) {
  let current = start + (end - start) * n; // この行の式が違う
  if (Math.abs(end - current) < limit) current = end;
  return current;
}

新しく知ったのは点に1から補間値を引いている数値を乗算している。
今勉強しているglslでは、0〜1を結構頻繁に使っている感じがする。

使用例

// 使用例

let reqId;

let start = 0;
const end = 100;
const n = 0.5;

function animation() {
  reqId = window.requestAnimationFrame(animation);
  start = lerp(start, end, n);

  if (start === end) {
    window.cancelAnimationFrame(reqId);
  }
}

animation();

1回目のループ 50 が返ってくる。

返ってきた値は次のループの start に代入されるので、

2回目のループ 75 が返ってくる。
3回目のループ 87.5
4回目のループ 93.75

…

start と end の差が limit(0.001) 以下になると、end の値を start に代入してループ終了。