Amplitude of oscillator using slider in p5.js

p5.js Libraries
1

i am following the tutorial https://www.youtube.com/watch?v=Bk8rLzzSink where frequency is changed using slider. how can i change the amplitude using slider in the same manner?
i tried the following:

function draw() {
  wave.freq(slider.value());
  wave.amp(AmpSlider.value());

  if (playing) {
    background(255, 0, 255);
  } else {
    background(51);
  }
}
2

Suggestion: Re-name the first slider that the author created to ‘freqSlider’, then make another one just like it called ‘ampSlider’. You should be able to do that on your own; please give it a try.

Hint: Set ampSlider parameters to something like this: (0.0,0.5,0.1,0.1) which is (min, max,init,step) and then set wave.amp(0); in setup(). Otherwise you will hear the sound at startup if it’s not set to zero (contrary to what the slider sets it at).

extra

1 Like
3

I was able to get the amplitude working but for square wave the amplitude does not increase as much as other waveform, that is, sine, triangle,sawtooth amplitude increases but not square. also when the background is black and the stroke is white there are filled up spaces as shown below.

Also how can i add time increase/decrease the time resolution and amplitude like setting V/div on vertical axis and ms/div on horizontal axis. any suggestion on this would be helpful.

4

Not sure I can help you on the size of the square wave, but I would try changing the max amplitude to see if that makes a difference. I don’t have the code to plot the wave so I’m unable to test it here.

Sounds like you’re trying to create an oscilloscope which I have no code for either. I did find this one with a search: https://editor.p5js.org/talkscheap/sketches/S1O1lpzPW

1 Like
5

the waveform has multiple waves, is there a way to avoid this?

1

6

If you drag the mouse toward the right hand side of the canvas and thereby set the Frequency to about 400-402 you should see a nice single waveform.

7

i have noticed that and i think it is because the current and previous drawn same waveform are in phase and therefore overlapping producing a single waveform at that frequency. But how can we draw single waveform at any frequency, it looks rather wired with multiple waveform
i don’t understand the reason for why it is drawing double triple of the same waveform, is it because the previous values of the same waveform stored in buffer gets redrawn? it can be only for this reason, and i wanted to know how we can flush out the previous drawn waveform.

8

Here’s another version for experimentation purposes:

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;
  }
}

fft
fft1216×528 5.9 KB