p5.js map()用法及代碼示例

p5.js 中的 map() 函數用於將 min1 到 max1 範圍內的數字標準化，範圍為 min2 到 max2。

如果您要縮放元素，規範化在 p5.js 中非常有用。因為我們知道歸一化處理縮放中的所有比例，所以我們得到了一個完全平衡的縮放。

不僅是縮放，而且在任何轉換操作中，標準化都非常有幫助。

用法:

map(value, start1, stop1, start2, stop2, [withinBounds])

參數：該函數接受上述和以下所述的六個參數：

value:要標準化的值。
分鍾1：值當前範圍的最小值。
最大1：值當前範圍的最大值。
分鍾2：值的目標範圍的最小值。
最大2：值的目標範圍的最大值。
範圍內(可選)：這將 value 的歸一化值限製在 [min2, max2] 範圍內。

範例1：默認情況下，WithinBounds 為 false。

Javascript


function setup() {
    noLoop();
}
  
function draw() {
  
    background(220);
  
    // Assume value has range [0, 100]
    let value = 50;
  
    // We want to convert value 
    // in range of [0, 50]
    let newValue = map(value, 0, 100, 0, 50);
  
    console.log(newValue);
}

輸出：

範例2：注意insideBounds 如何約束值的範圍

Javascript


function setup() {
    noLoop();
}
  
function draw() {
  
    background(204);
  
    // Value has a range[0, 100]
    let value = 150;
  
    // We are mapping it in range of [0, 50]
    let newValue1 = map(value, 0, 100, 0, 50);
  
    console.log(newValue1);
  
    // Notice the last parameter is true
    // we are mapping it in range of [0, 50]
    let newValue2 = map(value, 0, 100, 0, 50, true);
  
    console.log(newValue2);
}

輸出：

75
50

相關用法

注：本文由純淨天空篩選整理自pratikraut0000大神的英文原創作品 p5.js map() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。