javascript - 1D perlin 噪声中无法控制的快速 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

您调用noise()在 for 循环中多次以相同的值开始，以相同的数量递增，因此高度条相同。
(类似于调用噪声一次，然后在 for 循环中重新使用该值)。
你还需要两种成分:

存储初始噪声值的数组(用于更新这些值)

用不同的值初始化初始值。
这些将有助于获得每个柱的不同值。

在速度方面，只需减小增量值( 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>