Блог

У меня есть сетка плиток, которые медленно меняют цвета между красным и зеленым. Как мне сделать так, чтобы скорость изменения цвета зависела от 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);
        }
    }
}
 

Что вы хотите изменить, так это скорость, с которой вы перемещаетесь в шумовом пространстве. На данный момент вы используете 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 мс работает довольно хорошо). Таким образом, вы могли бы добавить это в свой код перед вызовом setup()

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

и заменить mouseX на debouncedMouseX в строке const temporalOffsetFactor = map(mouseX, 0, width, 1, 50);

Это может быть не идеально, но это может сработать. Я соответствующим образом обновил свой codepend.