使颜色变化速度依赖于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

你想要改变的是你在噪音空间中移动的速度。现在，您可以使用frameCount临时在这个空间中移动。

因此，要改变速度，您需要使用frameCount。一种方法是将mouseX映射到frameCount * 1 (您当前的行为)和frameCount * X where 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);
        }
    }
}

在行动中看到它，这里

编辑以避免移动鼠标时的地图“跳跃”--一种可能的解决方案是取消mouseX，只获得它的每一个X的值(我发现500 ms运行得很好)。因此，您可以在调用setup()之前将其添加到代码中。

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

并将mouseX替换为const temporalOffsetFactor = map(mouseX, 0, width, 1, 50);行中的debouncedMouseX

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