使用1D perlin noise的p5.js草图运行速度过快无法控制

波浪动画运行过快是两个逻辑问题导致的：

• 你将噪声采样起点start的累加逻辑写在了绘制竖条的for循环内部，每一帧会连续累加几十次偏移量，相当于每一帧噪声采样位置直接跳了很大一段，动画自然会过快
• 没有将「x轴方向生成波浪形态的噪声偏移」和「控制动画移动的时间偏移」拆分成独立变量，两者混用导致速度完全失控

直接替换原有JS逻辑即可，动画速度可以通过注释标注的参数自行调整：

let gap = 10;
let tOffset = 0;

function setup() {
  createCanvas(400, 400);
  frameRate(30); // 限制最高帧率，避免高刷新率屏幕上动画速度异常
}

function draw() {
  background(20);
  noStroke();
  fill(225, 225, 0);
  translate(0, height / 2);

  let xOffset = 0;
  for (let i = gap; i < width - gap; i += gap) {
    let n1 = noise(xOffset + tOffset);
    let noise1 = map(n1, 0, 1, 20, 150);
    rect(i, 0, 3, -noise1);
    xOffset += 0.1;
  }

  tOffset += 0.005; // 这个值越小波浪移动越慢，按需调整即可
}

对应的p5.js依赖引入代码保持不变：

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

• 要让波浪移动更慢：减小tOffset每帧的累加值，比如改成0.003、0.002都可以
• 要让波浪形态更平滑：减小xOffset的步进值；要让波浪更细碎：增大xOffset步进值
• 如果不需要帧率限制，删掉frameRate(30)那行即可

内容的提问来源于stack exchange，提问作者Tornado_code