指定範囲へ数値の再マッピング【JavaScript】
April 06, 2020
p5.jsなどを用いたクリエイティブコーディングでよく使う、数値の再マッピングをする関数の模倣です。
ライブラリ外でも使いたくて自前に用意したので、ついでに解説します。
数値の再マッピング？
ある範囲にある数値を、指定範囲での同位の数値へ変換するという事です。
例えば、
0 ~ 10 という範囲上での 2 を、
-50 ~ 50 の範囲上での数値に変換すると -30 になります。
計算式
(target_num - in_max) * (out_max - out_min) / (in_max - in_min) + out_max
- target_num : 変換したい数値
- in_min : 入力の最小値
- in_max : 入力の最大値
- out_min : 出力の最小値
- out_max : 出力の最大値
解説
分かりやすく区分けして書きます。
const map = (target_num, in_min, in_max, out_min, out_max) => {
// 入力値(最大)と変換したい値の "差"
const input_diff = in_max - target_num
// 入力値の長さ
const input_range = in_max - in_min
// 出力値の長さ
const output_range = out_max - out_min
// (差 / 長さ) で "割合" を出す
const percentage = input_diff / input_range
// 前項の "割合" を使って "出力値側" の、最大値との "差" を出す
const out_diff = percentage * output_range
// "出力の最大値" から "出力値側の差" を除く
// ※ "output_range" からではなく "out_max" から
const rs = out_max - out_diff
//結果
return rs
}
“差” を出す・除く部分で in_min , out_min を代わりに使っても同様の結果を出せます。