p5.js 振荡器显示多个波形答案

【问题标题】：p5.js oscillator showing multiple waveformp5.js 振荡器显示多个波形
【发布时间】：2022-07-08 23:26:07
【问题描述】：

在提供的 p5.js 振荡器示例中绘制了多个波形，我们如何使其显示为单个？示例在这里： https://p5js.org/examples/sound-oscillator-frequency.html 下面也是代码：

let osc, fft;

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

  osc = new p5.TriOsc(); // set frequency and type
  osc.amp(0.5);

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

function draw() {
  background(255);

  let waveform = fft.waveform(); // analyze the waveform
  beginShape();
  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();

  // change oscillator frequency based on mouseX
  let freq = map(mouseX, 0, width, 40, 880);
  osc.freq(freq);

  let amp = map(mouseY, 0, height, 1, 0.01);
  osc.amp(amp);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
<html>
<head>
</head>
<body>

<div >
</div>
</body>
</html>

【问题讨论】：

标签： javascript p5.js

【解决方案1】：

下面是另一个示例，它允许您选择波形并使用滑块设置频率和幅度。通过调整频率滑块“调谐”波，您应该会看到一个波。如果声音太大，可能需要将振幅的最大参数（第二个参数）降低到 0.5。

var wave;
var btn;
var freqSlider;
var ampSlider;
var sel;

let playing = false;

function setup() {
  createCanvas(600, 200); 
  wave = new p5.Oscillator();
  fft = new p5.FFT();
  btn = createButton('play/pause');
  btn.position(20,220);
  btn.mousePressed(toggle);
  freqLabel = createElement('freqLabel', 'freq:');
  freqLabel.position(120,220);
  freqSlider = createSlider(100,1200,440);
  freqSlider.position(150,220);
  ampLabel = createElement('ampLabel','amp:');
  ampLabel.position(300,220);
  ampSlider = createSlider(0.0,1.0,0.1,0.1);
  ampSlider.position(335,220);
  background(209);
  sel = createSelect();
  sel.position(490, 220);
  sel.option('sine');
  sel.option('triangle');
  sel.option('sawtooth');
  sel.option('square');
  sel.selected('sine');
  wave.start();
  wave.amp(0);
  wave.freq(440); 
  playing = false;
}

function draw() {
  background(209);
  if(playing){
    wave.freq(freqSlider.value());
    wave.amp(ampSlider.value());
    let item = sel.value();
    wave.setType(item);
    } 
  let waveform = fft.waveform();
  noFill();
  beginShape();
  stroke(0);
  for (let i = 0; i < waveform.length; i++){
    let x = map(i, 0, waveform.length, 0, width);
    let y = map( waveform[i], -1, 1, 0, height);
    vertex(x,y);
  }
  endShape();
}

function toggle(){
  if(!playing){
    wave.start();
    playing = true;
  }else{
    wave.stop();
    playing = false;
  }
}

【讨论】：