p5.js oscillator示例显示多波形 如何调整为单条波形显示

原示例运行后显示多段破碎波形，核心是默认绘制配置导致的：

• 未关闭形状填充：p5.js的beginShape()默认会对所有顶点围成的区域做填充，默认填充色为不透明黑色；即使是开放路径，填充逻辑也会自动连接首尾顶点形成闭合区域，填充块会覆盖部分波形描边，视觉上呈现断裂的多段效果。
• 若需要类似硬件示波器的滚动连续波形，原逻辑每帧调用background(255)清空全画布，每次仅绘制当前音频缓冲区的独立采样片段，天然不会和历史波形衔接。

根据需求二选一即可：

方案1：保留原交互逻辑，单帧波形显示为连续单线条 #

仅需在绘制波形前添加noFill()关闭形状填充，即可让波形以纯描边的单条连续线条显示，原有的鼠标控制频率、音量的交互完全保留。
修改后的完整JS代码如下，HTML部分不需要改动：

let osc, fft;

function setup() {
  createCanvas(720, 256);

  osc = new p5.TriOsc(); // 设置振荡器类型为三角波
  osc.amp(0.5);

  fft = new p5.FFT();
  osc.start();
}

function draw() {
  background(255);

  let waveform = fft.waveform(); // 获取当前帧波形采样
  beginShape();
  noFill(); // 关闭形状填充，仅保留描边
  strokeWeight(5);
  for (let i = 0; i < waveform.length; i++) {
    let x = map(i, 0, waveform.length, 0, width);
    let y = map(waveform[i], -1, 1, height, 0);
    vertex(x, y);
  }
  endShape();

  // 鼠标X轴控制频率
  let freq = map(mouseX, 0, width, 40, 880);
  osc.freq(freq);

  // 鼠标Y轴控制音量
  let amp = map(mouseY, 0, height, 1, 0.01);
  osc.amp(amp);
}

方案2：实现滚动推进的无限连续波形（示波器效果） #

如果需要波形从右向左持续滚动、始终保持单条连贯的动态效果，可以通过维护历史波形点数组实现，参考代码如下：

let osc, fft;
let waveHistory = []; // 存储历史波形点
const HISTORY_LENGTH = 720; // 和画布宽度保持一致

function setup() {
  createCanvas(720, 256);
  osc = new p5.TriOsc();
  osc.amp(0.5);
  fft = new p5.FFT();
  osc.start();
  // 初始化历史数组，默认所有点在画布垂直居中位置
  for(let i = 0; i < HISTORY_LENGTH; i++) {
    waveHistory.push(height/2);
  }
}

function draw() {
  background(255);
  let waveform = fft.waveform();
  // 取当前采样的最新点
  let latestVal = waveform[waveform.length - 1];
  let latestY = map(latestVal, -1, 1, height, 0);
  // 移除最旧的点，加入最新采样点
  waveHistory.shift();
  waveHistory.push(latestY);

  // 绘制连续滚动波形
  beginShape();
  noFill();
  stroke(0);
  strokeWeight(2);
  for(let i = 0; i < waveHistory.length; i++) {
    vertex(i, waveHistory[i]);
  }
  endShape();

  // 保留原鼠标控制逻辑
  let freq = map(mouseX, 0, width, 40, 880);
  osc.freq(freq);
  let amp = map(mouseY, 0, height, 1, 0.01);
  osc.amp(amp);
}

内容的提问来源于stack exchange，提问作者ee-diary