# P5 Project Questions

**URL:** <https://discourse.processing.org/t/p5-project-questions/9520>\
**Category:** Libraries\
**Created:** [March 22, 2019, 4:18am UTC](https://discourse.processing.org/t/p5-project-questions/9520 "2019-03-22T04:18:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ixd](https://avatars.discourse-cdn.com/v4/letter/i/41988e/32.png) [@ixd](https://discourse.processing.org/u/ixd)\
**Post date:** [March 22, 2019, 4:18am UTC](https://discourse.processing.org/t/p5-project-questions/9520/1 "2019-03-22T04:18:39Z")

</div>

So I managed to upload MP3 files to the online editor, but I can’t figure out how to make them play when I click on an ellipse… I got the first one to play when I click on the first ellipse, but I can’t figure out how to assign the other sounds to other ellipses. Thanks!

[https://editor.p5js.org/emily/sketches/DbBtoyaCW](https://editor.p5js.org/emily/sketches/DbBtoyaCW)

```auto
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function preload() {
  soundFormats('mp3');
  rollingsuitcase = loadSound('RollingSuitcase.mp3');
  airportambiance = loadSound('Airportambiance.mp3');
  seatbeltsound = loadSound('SeatbeltSound.mp3');
  seatbeltclick = loadSound('SeatbeltClick.mp3');
  airplanetakeoff = loadSound('AirplaneTakeOff.mp3');
  eating = loadSound('Eating.mp3');
  water = loadSound('Water.mp3');
  toiletflush = loadSound('AirplaneToilet.mp3');
  airplaneland = loadSound('AirplaneLanding.mp3');
  
}

function setup() {
  createCanvas(500, 500);
  colorMode(HSB);
}

function draw() {
  background(0);
	strokeWeight(1);
	stroke(255);
	
	i = 0;
	for (var x = 50; x < width; x = x + 180)
	for (var y = 50; y < 500; y = y + 180) {
	ellipse(x, y, 25, 25);
	text(numbers[i], x, y);
	i++;
	}
}
  
 function mousePressed() {
  // Check if mouse is inside the circle
  let d = dist(mouseX, mouseY, 50, 50);
  if (d < 10) {
    // Play corresponding sound
  rollingsuitcase.play();
  }  
}

```

---

<div class="post-metadata">

**Author:** ![janglee](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/janglee/32/4035_2.png) [@janglee](https://discourse.processing.org/u/janglee)\
**Post date:** [March 22, 2019, 5:27am UTC](https://discourse.processing.org/t/p5-project-questions/9520/2 "2019-03-22T05:27:06Z")

</div>

There are lots of ways to do it. The most simple one is the longest one. However, let us start with a simple one.

### 1. Else if statements

Write `else if` of `switch` statements for all ellipse in `mousePressed` function. i.e

```javascript
if(dist(mouseX, mouseY, 50, 50) < 10){
    //play a first sound
}
else if( /* dist between mouse and 2nd ellipse is less than 10*/ ){
    //play a second sound
}

// and so one

```

In this way, you have to write ten `if else` statements. It seems obvious and what most beginners do. But what if numbers are more than adding else-if statements are not the best way to do it. The second one solves this problem.

### 2. Using an array

Instead of making separate variables of sound, store sounds in an array. like

```auto
sounds[0] = loadSound('RollingSuitcase.mp3');
sounds[1] = loadSound('Airportambiance.mp3');
// so on

```

or you can also do this

```auto
sounds = [loadSound('RollingSuitcase.mp3'),loadSound('Airportambiance.mp3'), /*so on*/]

```

And now use `for loops` to decide which ellipse is pressed and play sound assigned to that index. I would encourage you to do it by your self but if you need any help or my explanation is not enough, check [this](https://editor.p5js.org/Janglee123/sketches/VZTdE-4Lx) out. It solves a problem of so many `else if` statements problem though it’s not the best way to do it. Like there is still a problem with the relation between ellipse and sound what if you have to attach any random sound with any random ellipse.

### 3. The Hardest Way - Use Object-Oriented Programming

Although it looks hard in the beginning, after you get used to this seems the best way. In this method, you have to create an object that store a sound and position of the ellipse where you want it to display. Now create one function that draws an ellipse and inside it write if statement for playing sound. I am not going to write a programme for this one cause writing this consumed lots of my time but believe me it is the right way to do it. It make your code more readable and meaningful. Watch this [video](https://www.youtube.com/watch?v=T-HGdc8L-7w) of Denial Shiffman for object-oriented programming.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 22, 2019, 5:27am UTC](https://discourse.processing.org/t/p5-project-questions/9520/3 "2019-03-22T05:27:19Z")

</div>

you see  
[Project Help Adding Sound](https://discourse.processing.org/t/project-help-adding-sound/9368/2) ?  
[https://editor.p5js.org/kll/sketches/\_JpPvKYRZ](https://editor.p5js.org/kll/sketches/_JpPvKYRZ)