使颜色变化速度取决于mouseX答案

【问题标题】：Make color change speed be dependent on mouseX使颜色变化速度取决于mouseX
【发布时间】：2020-12-01 13:12:50
【问题描述】：

我有一个网格，可以在红色和绿色之间缓慢改变颜色。如何使颜色变化速度依赖于 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);
        }
    }
}

【问题讨论】：

您的问题将受益于更多细节，目前尚不清楚您所说的颜色变化速度取决于mouseX是什么意思。您只是想在 tX 和 tY 初始化中将 frameCount 替换为 mouseX 吗？还是您在寻找其他东西？
@statox 使小mouseX 等于更快的颜色变化，而大mouseX 等于更慢的颜色变化。颜色变化的速度取决于我的 mouseX 的位置。

标签： p5.js noise

【解决方案1】：

您要更改的是您在噪声空间中移动的速率。现在你使用frameCount 在这个空间中临时移动。

所以要改变你需要用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 的颜色变化速度一样，如果我的鼠标是静止的，但每次我移动它时，颜色都会变得混乱。然后我停止移动，又好了。
@ahmadalibin 检查我的编辑我尝试添加一些去抖来避免这种跳跃。
我正在使用使用 p5.js 的括号，它有解析错误：此行的意外令牌setInterval(() => (debouncedMouseX = mouseX), 1000);。
如您所见here, on line 2 它工作正常。 “Unexpected token”表示您在此行之前没有正确格式化代码，请检查是否缺少引号或赋值或任何语法错误。
好的，即使出现错误，我仍然可以编译。我不确定使用 debounce 还是不使用 debounce 效果更好，因为它看起来非常不稳定，但它确实可以通过停止“跳跃”来工作，所以我想这是我更喜欢的那个。无论如何，感谢您的所有帮助。你很有帮助。