P5 Project Questions

p5.js Libraries
1

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

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();
  }  
}
1 Like
2

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

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

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

or you can also do this

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 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 of Denial Shiffman for object-oriented programming.

2 Likes
3

you see
Project Help Adding Sound ?
https://editor.p5js.org/kll/sketches/_JpPvKYRZ

1 Like