一维柏林噪声中无法控制的快速 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 循环中重新使用该值）。

你还需要两种成分：

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>