使颜色变化速度依赖于mouseX

Question

我有一个瓷砖网格，可以在红色和绿色之间缓慢改变颜色。如何使颜色变化速度依赖于 mouseX，使得小 mouseX 等于更快的颜色变化。

function colorGrid(){
    var stepSize = 20;
    var green = color(0, 255, 0);
    var red = color(255, 0, 0);
    for(var x=0;x<25;x++){
        for(var y=0;y<25;y++){
            var tX = (x*stepSize+frameCount)*0.003;
            var tY = (y*stepSize+frameCount)*0.003;
            var t = noise(tX, tY);
            var c = lerpColor(green, red, t);
            fill(c);
            noStroke();
            rect(x*stepSize,y*stepSize,stepSize,stepSize);
        }
    }
}

Answer 1

您要更改的是您在噪声中移动的速率 space。现在您使用 frameCount 在 space.

中暂时移动

所以要改变你需要玩的速度frameCount。一种方法是在 frameCount * 1（您当前的行为）和 frameCount * X 之间映射 mouseX，其中 X > 1.

function colorGrid(){
    var stepSize = 20;
    var green = color(0, 255, 0);
    var red = color(255, 0, 0);
    // Creating the factor 
    const temporalOffsetFactor = map(mouseX, 0, width, 1, 50);
    for(var x=0;x<25;x++){
        for(var y=0;y<25;y++){
            var tX = (x*stepSize+frameCount*temporalOffsetFactor)*0.003; // Using the new factor
            var tY = (y*stepSize+frameCount*temporalOffsetFactor)*0.003;
            var t = noise(tX, tY);
            var c = lerpColor(green, red, t);
            fill(c);
            noStroke();
            rect(x*stepSize,y*stepSize,stepSize,stepSize);
        }
    }
}

查看实际效果 here

编辑为避免移动鼠标时地图“跳跃”，一个可能的解决方案是去除 mouseX 以每隔 X 毫秒获取其值（我发现 500 毫秒非常有效出色地）。所以你可以在调用 setup()

之前将它添加到你的代码中

let debouncedMouseX = 1;
setInterval(() => (debouncedMouseX = mouseX), 1000);

并在 const temporalOffsetFactor = map(mouseX, 0, width, 1, 50);

行中将 mouseX 替换为 debouncedMouseX

这可能不理想，但它可以工作。我相应地更新了我的依赖关系。

使颜色变化速度依赖于mouseX

Make color change speed be dependent on mouseX

p5.js

noise