# Amplitude of oscillator using slider in p5.js

**URL:** <https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817>\
**Category:** Libraries\
**Created:** [July 3, 2022, 10:09pm UTC](https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817 "2022-07-03T22:09:19Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [July 3, 2022, 10:09pm UTC](https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817/1 "2022-07-03T22:09:19Z")

</div>

i am following the tutorial [https://www.youtube.com/watch?v=Bk8rLzzSink](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:

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

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

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [July 4, 2022, 12:34am UTC](https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817/2 "2022-07-04T00:34:42Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/4/64282cf3ce3c1c47b31ebfb43690da252f87d998.png)

---

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [July 4, 2022, 2:01pm UTC](https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817/3 "2022-07-04T14:01:10Z")

</div>

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.

> **[p5.js Web Editor](https://editor.p5js.org/eediary/full/KWaQHf7HC)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

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.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [July 4, 2022, 4:53pm UTC](https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817/4 "2022-07-04T16:53:10Z")

</div>

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](https://editor.p5js.org/talkscheap/sketches/S1O1lpzPW)

---

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [July 5, 2022, 11:17am UTC](https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817/5 "2022-07-05T11:17:26Z")

</div>

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

![1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/8/68694824727717965d050a6302109e381a1ab2f4.jpeg)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [July 5, 2022, 1:31pm UTC](https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817/6 "2022-07-05T13:31:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [July 5, 2022, 2:04pm UTC](https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817/7 "2022-07-05T14:04:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [July 5, 2022, 5:33pm UTC](https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817/8 "2022-07-05T17:33:14Z")

</div>

Here’s another version for experimentation purposes:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/4/643ab2d546a887d09acf879204397309d730d959.png)