I am trying to make a better code for a sketch that triggers some sounds.

truffel

hi, I managed to make a code that triggers sounds each time a bubble hits the edges of a canvas. I used p5.js and p5.sound.js. I am triyng to make the code better, by using loops. The visual part of the sketch works on its own (i mean the sketch that has no audio, but uses loops). When I tried including the audio, I tried this code:

var bubbles = [];
var envs = [];

function getRandomNumber(){
  var a=random(-1,1);
  if(a>0)return 1;
  else return -1;
}

function setup() {
  createCanvas(640, 360);
  fill(250,255,255, 230);
  ellipseMode(RADIUS);
  frameRate(30);


for (var i = 0; i < 5; i++) {
  envs[i] = {

attackLevel: random(0.001, 0.5),
releaseLevel: 0,

attackTime: random(0.01, 0.8),
decayTime: random(0.1, 0.5),
susPercent: random(0.002, 0.2),
releaseTime: random(0.1, 0.5),

env, sinOsc,



setEnv: function() {

env = new p5.Env();
  env.setADSR(attackTime, decayTime, susPercent, releaseTime);
  env.setRange(attackLevel, releaseLevel);

},

setOsc: function() {

sinOsc = new p5.Oscillator('sine');
  sinOsc.amp(env);
  sinOsc.start();
  sinOsc.freq(360);
  sinOsc.pan(1.0);

},


playEnv: function() {

 env.play();

}

} //closes envs
}; //closes for

for (var i = 0; i < 5; i++) {
  bubbles[i] = {

rad : random(25, 100),
xpos : random(121, width/2),
ypos : random(121, height/2),
xspeed: random(1, 4),
yspeed: random(1, 4),
xdirection: getRandomNumber(),
ydirection: getRandomNumber(),


display: function() {

      ellipse(this.xpos, this.ypos, this.rad, this.rad);
                    },

move: function() {

this.xpos = this.xpos + ( this.xspeed * this.xdirection );
this.ypos = this.ypos + ( this.yspeed * this.ydirection );

  },

bounce: function() {

  if (this.xpos > width-this.rad || this.xpos < this.rad) {
    this.xdirection *= -1;
         }
  if (this.ypos > height-this.rad || this.ypos < this.rad) {
    this.ydirection *= -1;
        }

      },

               } } }

function draw() {
background(0);

/**
for (var k=0; k < envs.length; k++){

envs[i].setEnv();
envs[i].setOsc();

}
*/

for (var i=0; i < bubbles.length; i++){

  bubbles[i].move();
  bubbles[i].bounce();
  bubbles[i].display();
/**  for (var j = 0; j < bubbles.length; j++){
             if(i == j && bubbles[i].bounce()){
                            playEnv[i](); } //closes for j */
}  //closes for i
     }

The error says: ReferenceError: env is not defined at line 31. How could I fix this, what does it mean? I am lost...

All my code would include the lines:

 for (var k=0; k < envs.length; k++){

    envs[k].setEnv();
    envs[k].setOsc();

    }

and:

for (var j = 0; j < bubbles.length; j++){
                 if(i == j && bubbles[i].bounce()){
                                playEnv[i](); } 

Is this a correct syntax?

Thanks

GoToLoop

setEnv: function() {

That syntax w/ : is for defining key: value entries when defining an object using {}.

Instead, go w/ regular function declaration: function setEnv() {.

truffel

I tried changing from setEnv: function() { to function setEnv() {. Maybe I didn't understand correctly, but my intention was to declare an sound object using {}, so that in function draw() { I could play five different sounds that were generated from this object.

Why wouldn't it be more appropriate to write it like setEnv: function() { ?

GoToLoop

... but my intention was to declare an sound object using {}, ...

If you wanna have methods, encapsulate them into a class: *-:)
https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor