osc.amp() issue

Joghurt

Hi all

I’m trying to do some first steps in the sound library in p5js. The idea is simple: press a button, start an osc. Press it again, turn it off. I started with the example in the reference. When running the code, the osc.amp(0,0.05) runs once with a hearable sine tone which fades out (when increasing the 0.05, it fades out longer). From then, everything works at it should. But: there shouldn’t be any sound when starting, as osc.amp is set to 0 in setup.

Is this a bug, or what am I doing wrong?

Here is the code:

var startX, startY;
var faderY;
var buttonClicked = false;
var isPlaying = false;
var osc;

function setup() {
  createCanvas(windowWidth, windowHeight);
  startX = 50;
  startY = 50;
  faderY = startY+200;

  osc = new p5.Oscillator();
  osc.setType('sine');
  osc.freq(240);
  osc.amp(0);
  osc.start();
}

function draw() {
  background(190);
  fill(80);
  rect(startX, startY, 10, 200);
  fill(255);
  rect(startX-5, faderY, 20, 10);

  if (buttonClicked) {
    fill(10);
  } else {
    fill(230);
  }
  rect(startX+100, startY, 50, 50);



  if (buttonClicked) {
    //osc.amp(((faderY-(startY+190))/200), 0.05);
    osc.amp(0.5, 0.05);
  } else {
    osc.amp(0, 0.05);
  }

}

function mouseDragged() {
   if (mouseX > startX-5 && mouseX < startX+15 && mouseY > startY-5 && mouseY < startY+200) {
  faderY = mouseY-5;
  }
}


function mouseClicked() {
  if (mouseX > startX+100 && mouseX < startX+150 && mouseY > startY && mouseY < startY+50) {
    buttonClicked = !buttonClicked;
  }
}

Best, Joghurt

Joghurt

Ok, I uploaded it to my page. Now, the tone always restarts during the draw-circle (what didn’t happen in the p5-editor). This makes it even worse.

GoToLoop

As a general rule avoid the p5 editor b/c it's always a very OLD version! :P

Joghurt

This means, you think it is a compiler problem in the p5-editor? What is the solution then?

GoToLoop

http://p5ide.HerokuApp.com/editor
http://p5js.SketchPad.cc/

Joghurt

I tried your online editors. The same problems occure.

I also downloaded the latest library from the p5.js website and used Sublime Text 2. It's also not working as intended.

So, maybe a bug? Or is something wrong with my code?

GoToLoop

You better tell the devs about this bug then:
https://GitHub.com/processing/p5.js-sound/issues

Joghurt

So, as it seems to be a bug, I will report it. Thanks.

blindfish

I'm not at a PC to test this but I'm uneasy about the direct reversal of buttonClicked in the mouseClicked method. I'm sure we've had questions on here about odd behaviour around click events. Change to using mouseReleased() to test if the sound issue is still occurring: that's definitely a one-shot event...

Joghurt

Thanks. But mouseReleased() didn't help. Let's see if it's a bug then.

blindfish

Just tested the code you posted: works fine for me in Chrome (running on Linux, but I wouldn't expect that to make a difference): when the sketch starts there's no sound. It starts/stops when I hit the button as I would expect.

Include your browser and platform in that bug report as I suspect it will be relevant...

Joghurt

Hi blindfish

Thanks. I just updated my bug report.

I may also check it with my windows machine (as soon as my Surface 4 arrives).

talkscheap

Hi Joghurt,

The solution here will be to think in terms of events, rather than control the amplitude of the oscillator in draw() using the buttonClicked variable, trigger volume changes at the moment that the button press event occurs.

You said "there shouldn’t be any sound when starting, as osc.amp is set to 0 in setup."

This seems right, but I think what's happening under the hood is that before osc.amp(0) can go into effect in setup, the draw loop runs for the first time, and at that point osc.amp is being set to 0 with a fade of 0.05 seconds (because buttonClicked is false). When you set amplitude to fade over time, it cancels any previously scheduled fades, so it fades to zero from the oscillator's default amplitude. This is something that should be tweaked in the library.

In the meantime, this should do the trick:

function mouseClicked() {
  if (mouseX > startX+100 && mouseX < startX+150 && mouseY > startY && mouseY < startY+50) {
    if (isPlaying) {
      osc.amp(0, 0.05);
    } else {
      osc.amp(0.5, 0.05);
    }

    isPlaying = !isPlaying;
  }
}