P5.js map()函数

在P5.js中，map()函数用于将一个数字的值从一个指定范围映射到另一个指定范围。这个函数在可视化的数据映射时非常有用，比如将实际的数据值映射到屏幕上的坐标。

语法

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

其中:

• value：要映射的值。必须是数字。
• start1：输入值的最小值。
• stop1：输入值的最大值。
• start2：输出值的最小值。
• stop2：输出值的最大值。
• withinBounds (可选)：是否限制返回值在输出范围内。默认为false。

示例

下面是一个简单的例子，将一些值从0到10的范围内映射到0到255的范围内。

let value = 5;
let start1 = 0;
let stop1 = 10;
let start2 = 0;
let stop2 = 255;

let mappedValue = map(value, start1, stop1, start2, stop2);

console.log(mappedValue); // 输出结果为 128

在上面的例子中，将value值从0到10的范围内映射到了0到255的范围内。因为value为5，对应的mappedValue为128。这是因为：

(value-start1)/(stop1-start1) = (5-0)/(10-0) = 0.5

mappedValue = start2 + (stop2 - start2) * (value-start1) / (stop1 - start1)
            = 0 + (255 - 0) * 0.5
            = 127.5

在计算机中所有的数字都是离散的，所以mappedValue的结果会被四舍五入为整数。

withinBounds参数

如果设置了withinBounds参数，则会将映射结果限制在输出范围内。比如，当映射结果小于输出范围的最小值时，会返回最小值；当映射结果大于输出范围的最大值时，会返回最大值。

let value = 15;
let start1 = 0;
let stop1 = 10;
let start2 = 0;
let stop2 = 255;

let mappedValue = map(value, start1, stop1, start2, stop2, true);

console.log(mappedValue); // 输出结果为 255

在上面的例子中，value的值为15，超出了0到10的范围。因为设置了withinBounds为true，映射结果被限制在了输出范围内，即255。

总结

map()函数在P5.js中用于将一个数字的值从一个指定范围映射到另一个指定范围。使用这个函数可以方便地将实际的数据值映射到屏幕上的坐标或颜色等可视化元素上。语法比较简单，但使用时需要注意withinBounds参数的作用。