在一维柏林噪声中无法控制的快速p5.js草图

Question

对于我的生命，我无法想出一个办法让这个草图以缓慢的速度运行，以清楚地看到移动的波浪图案。它的节奏快得令人发狂。使用一维柏林噪声

let gap = 10;
let start = 0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(20);
noStroke();
fill(225, 225, 0);
translate(0, height / 2);
for (let i = gap; i < width - gap; i += gap) {
let n1 = noise(start);
let noise1 = map(n1, 0, 1, 20, 150);
rect(i, 0, 3, -noise1);
start += 0.1;
}
}

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

Answer 1

在for循环中多次调用noise()，从相同的值开始，以相同的量递增，因此具有相同的高度条。(类似于调用一次noise，然后在for循环中重用该值)。

你还需要两种材料:

1. 一个数组，用于存储初始噪声值(可用于更新这些值)
2. 用不同的值初始化初始值。这将有助于获得每个条的不同值。

在速度方面，只需减小增量值(start += 0.1;变为start += 0.001;)

我的意思是:

let gap = 10;
let start = new Array(39);
function setup() {
createCanvas(400, 400);
// init array with different values
for(let  i = 0 ; i < 39; i++){
start[i] = 0.1 * i;
}
}
function draw() {
background(20);
noStroke();
fill(225, 225, 0);
translate(0, height / 2);
for (let i = gap, nIndex = 0; i < width - gap; i += gap, nIndex++) {
let n1 = noise(start[nIndex]);
let noise1 = map(n1, 0, 1, 20, 150);
rect(i, 0, 3, -noise1);
start[nIndex] += 0.01;
}
}

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

我个人会将for循环切换为使用索引迭代，而不是使用x位置偏移量，但这可能是偏好问题:

let gap = 10;
let numBars = 42;
let noiseXValues = new Array(numBars);
function setup() {
createCanvas(400, 400);
// init array with different values
for(let  i = 0 ; i < numBars; i++){
noiseXValues[i] = 0.1 * i;
}
}
function draw() {
background(20);
noStroke();
fill(225, 225, 0);
translate(0, height / 2);
let barWidth = (width - gap) / numBars;
for (let i = 0; i < numBars; i++) {
let x = gap + (barWidth * i);
let noiseValue = noise(noiseXValues[i]);
let mappedNoiseValue = map(noiseValue, 0, 1, 20, 150);
rect(x, 0, 3, -mappedNoiseValue);
noiseXValues[i] += 0.01;
}
}

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