p5.js map() 动态变化的变量

Question

我有 2 个问题围绕着下面的 blueHueDecrease 和 blueHueIncrease 变量。这段代码所做的是根据光标在 canvas 上的位置更改 canvas 的背景颜色。这段代码应该做三件事：1) blueHueDecrease 从像素位置 0 到 canvas 上的 width/2 从 255 减少到 0，并且在整个过程中 blueHueIncrease 等于 0范围，2) blueHueDecrease 和 blueHueIncrease 在 canvas 上的 width/2 处等于 0，并且 3) 从像素位置 width/2 开始，blueHueDecrease 等于 0 ] 到 canvas 和 blueHueIncrease 上的宽度在此范围内从 0 增加到 255。

var blueStartingValue;
var blueHueDecrease;
var blueHueIncrease;

function setup()
{
    createCanvas(800, 600);

    blueStartingValue = 255;
    blueHueDecrease = 0;
    blueHueIncrease = 0;  
}

function draw()
{
    blueHueDecrease = map(mouseX,0,width/2,blueStartingValue,0); //decreases blue from 255 to 0 within first half of canvas width
    blueHueIncrease = map(mouseX,width/2,width,blueHueDecrease,255); //increases blue from 0 to 255 within second half of canvas width, blueHueDecrease should equal 0 through out this range
    console.log("decrease: ",blueHueDecrease);
    console.log("increase: ",blueHueIncrease);
    background(0,0, max(blueHueDecrease,blueHueIncrease));
}

当我从上面的设置函数中得到两行时：

blueHueDecrease = map(mouseX,0,width/2,blueStartingValue,0); //decreases blue from 255 to 0 within first half of canvas width
blueHueIncrease = map(mouseX,width/2,width,blueHueDecrease,255); //increases blue from 0 to 255 within second half of canvas width, blueHueDecrease should equal 0 through out this range

blueHueIncrease 应该更改从 width/2 开始的值；相反，它的值贯穿整个 canvas 宽度。为什么是这样？如何将此变量的映射值限制在 width/2 和宽度之间？

当我将地图函数中的布尔参数设置为 true 时，给出：

blueHueDecrease = map(mouseX,0,width/2,blueStartingValue,0,true); //decreases blue from 255 to 0 within first half of canvas width
blueHueIncrease = map(mouseX,width/2,width,blueHueDecrease,255,true); //increases blue from 0 to 255 within second half of canvas width, blueHueDecrease should equal 0 through out this range

blueHueDecrease 适当地限制在 0 和 width/2 之间，但是 blueHueIncrease 不会限制在 width/2 和宽度之间；这是为什么？

Answer 1

当mouseX > width/2时，则blueHueDecrease = 255和blueHueIncrease正确映射到[0, 255]。

当mouseX < width/2时，则blueHueDecrease映射到[0, 255]和blueHueIncrease = blueHueDecrease，因为blueHueDecrease是

中的下界

map(mouseX,width/2,width,blueHueDecrease,255,true);

并且在 mouseX < width/2 的这种情况下，blueHueIncrease 被限制为下限，因为 map 中的最后一个参数 (true).

如果你想映射blueHueDecrease鼠标左键和blueHueIncrease鼠标右键，那么你必须：

var blueHueDecrease = map(mouseX, 0, width/2, 255, 0, true); 
var blueHueIncrease = map(mouseX, width/2, width, 0, 255, true);

如果您想将蓝色限制在最低限度，那么您必须使用不同的 blueStartingValue 并从 blueStartingValue 映射到 255，而不是从 0 映射到 blueStartingValue:

var blueStartingValue = 128;
var blueHueDecrease = map(mouseX, 0, width/2, 255, blueStartingValue, true); 
var blueHueIncrease = map(mouseX, width/2, width, blueStartingValue, 255, true);

查看演示不同行为的示例：

var blueStartingValue = 255;
var blueStartingValue3 = 128;

function setup() {
    createCanvas(400, 210);
}

function draw() {
    var blueHueDecrease = map(mouseX,0,width/2,blueStartingValue,0);
    var blueHueIncrease = map(mouseX,width/2,width,blueHueDecrease,255); 
    
    var blueHueDecrease2 = map(mouseX,0,width/2,blueStartingValue,0,true); 
    var blueHueIncrease2 = map(mouseX,width/2,width,blueHueDecrease2,255,true); 

    var blueHueDecrease3 = map(mouseX, 0, width/2, 255, 0, true); 
    var blueHueIncrease3 = map(mouseX, width/2, width, 0, 255, true); 

    var blueHueDecrease4 = map(mouseX, 0, width/2, 255, blueStartingValue3, true); 
    var blueHueIncrease4 = map(mouseX, width/2, width, blueStartingValue3, 255, true); 
    
    background(0);
    textSize(25);

    fill(0, 0, blueHueDecrease);
    rect(10, 10, 40, 40);
    fill(0, 0, blueHueIncrease);
    rect(60, 10, 40, 40);
    fill(255);
    text(`map(,,,, false)`, 110, 45);

    fill(0, 0, blueHueDecrease2);
    rect(10, 60, 40, 40);
    fill(0, 0, blueHueIncrease2);
    rect(60, 60, 40, 40);
    fill(255);
    text(`map(,,,, true)`, 110, 95);

    fill(0, 0, blueHueDecrease3);
    rect(10, 110, 40, 40);
    fill(0, 0, blueHueIncrease3);
    rect(60, 110, 40, 40);
    fill(255);
    text(`new approach`, 110, 145);

    fill(0, 0, blueHueDecrease4);
    rect(10, 160, 40, 40);
    fill(0, 0, blueHueIncrease4);
    rect(60, 160, 40, 40);
    fill(255);
    text(`start = ` + str(blueStartingValue3), 110, 195);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

p5.js map() 动态变化的变量

p5.js map() dynamically changing variable

javascript

processing

p5.js