如何优化缩短p5.js绘制多色波浪线代码，可使用curveVertex与循环

你当前的代码可以大幅简化，完全可以通过curveVertex+循环的方式实现相同效果，以下是优化思路和最终代码：

核心优化点 #

• 修复原始代码的全局变量泄漏问题：原代码中未加let/const声明的变量会自动挂载到全局window对象，容易引发命名冲突
• 移除冗余类封装：无需单独定义Curve和Curves两个类存储曲线属性，直接通过双层循环即可完成绘制，代码量缩减近50%
• 所有可调参数抽为顶部常量，调整效果无需修改逻辑代码
• 保留了原代码的噪声生成波浪、curveVertex绘制平滑曲线的核心逻辑，输出效果和原代码完全一致

优化后完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<script>
// 可调参数
const LINE_WIDTH = 5; // 单条线的宽度
const NOISE_DETAIL = 0.02; // 波浪的细腻程度，数值越小波浪越平缓
const LINE_COUNT = 150; // 绘制的波浪线总数量
const WAVE_HEIGHT = 100; // 波浪上下波动的最大幅度
const VERTEX_STEP = 3; // 曲线顶点的采样间隔，数值越小曲线越平滑

function setup() {
  createCanvas(windowWidth, windowHeight);
  noFill();
  strokeWeight(LINE_WIDTH);

  // 外层循环：遍历生成每一条波浪线
  for (let lineIndex = 0; lineIndex < LINE_COUNT; lineIndex++) {
    // 随机生成当前线的颜色
    stroke(random(255), random(255), random(255));
    // 当前线的基准Y轴位置
    const baseY = lineIndex * LINE_WIDTH;
    // 噪声偏移量初始化
    let noiseOffset = 0;
    beginShape();
    // 内层循环：生成单条波浪线的所有顶点
    for (let x = 0; x < width; x += VERTEX_STEP) {
      noiseOffset += NOISE_DETAIL;
      // 计算当前顶点的Y轴坐标
      const y = baseY + noise(noiseOffset) * WAVE_HEIGHT;
      curveVertex(x, y);
    }
    endShape();
  }
}
</script>

如果需要实现动态流动的波浪效果，只需要把绘制逻辑放到draw()函数中，将噪声偏移量和frameCount绑定即可。

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