在for循环中，从相同的值开始多次调用noise()，并以相同的量递增，从而得到相同的高度条.
您还需要两种配料:
- 存储初始噪波值的数组(用于更新这些值)
- 使用不同的值初始化初始值.
就速度而言，只需减少增量值(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>