Click Image to Make Sound Play

Processing Libraries
1

I’m trying to add a mouse press event to an image which I think is possible since I’ve seen may questions posted about it on the forum. However I have an image of a play button. I want to use this image as a button to play/pause music. So far I haven’t found anything on mouse press for images to play music. Does anyone know where I can read more about this specific topic? Still looking through documentation haven’t found anything yet. Heres some snip it of my code:

PImage play;
play = loadImage("play.png"); // in setup
imageMode(CORNER); // in draw
image(pause, 80, 15, 50, 50); // in draw
2
3

For this example he has a square with 4 exact points. I’m using an image thats a circle, I’m not sure how to get the points for it. @GoToLoop

4

Images tend to have a rectangular shape.

Just check whether the clicked mouse coords. are within your image’s position & dimension.

5

This works, I tried it but I don’t want the user to mouse over, I want them to be able to click the button (the image which I’m using as the button). The user would assume that the image is a button and click on it, not mouse over. @GoToLoop

I also have 2 other buttons, pause and shuffle. I think I would need to repeat that code and rename everything to use the mouse over. Do you know of any other ways where they can physically click on the button?

6

Just don’t do anything when it’s just hovering. Do the check when a mousePressed() happens:

Create a class that encapsulates all the behavior & data needed to check collision for 1 image:

7

Making progress…

// In draw function
    //Image for play button
    imageMode(CORNER);
    image(play, 20, 15, 47, 47); 
    
    //Image for pause button
    imageMode(CORNER);
    image(pause, 80, 15, 50, 50); 
    
    //Image for shuffle button
    imageMode(CORNER);
    image(shuffle, 140, 15, 50, 50); 


void mousePressed(){
  if(mouseX > 20 && mouseX < 67 && mouseY > 20 && mouseY < 67){ 
    player.play();
  }
  
  if(mouseX > 80 && mouseX < 130 && mouseY > 80 && mouseY < 130){ 
    player.pause();
  }
  
  if(mouseX > 140 && mouseX < 190 && mouseY > 140 && mouseY < 190){ 
    shufflePlayList();
  }
   
}

//shuffle method
//Playlist gets reshuffled if mouse is click again
void shufflePlayList() {
  current=0;
  tableau.shuffle();
}

Instead of all those other variables from the example I checked the mouseX and mouseY. I took the 1st number and the 3rd number to get mouseX & Y. Ex: image(play, 20, 15, 47, 47); —> 20 for mouseX & 20 + 47 = 67. My play button works but the pause and stop don’t. I checked my calculations for the other 2 buttons and did them the same way but those don’t work. Do you have any ideas on what I could be doing wrong? @GoToLoop

8

Coordinates are (80, 15) & dimensions are (50, 50) for the pause image.

So why are you checking mouseY > 80 instead of mouseY > 15?

Same for dimensions check: mouseY < 130 instead of mouseY < 15 + 50.

Again, it’s more organized to have those data inside an instance of a dedicated class.

9

I saw a video and the put the 80 as mouseX and then for mouseY they took 1st and 3rd number, that why. I also don’t remember the order for inside the (). I think its x,y, height, width but I’m not 100% sure. So you’re saying it’s not 1st and 3rd its 2nd and 3rd numbers? @GoToLoop

10
11

I got it! All of them except shuffle, I checked the calculation and I don’t think it’s wrong. Do you think it could be the way I’m calling the shuffle playlist? @GoToLoop

void shufflePlayList() {
  current=0;
  tableau.shuffle();
}


//Shuffle button
  if(mouseX > 140 && mouseX < 190 && mouseY > 15 && mouseY < 65){ 
    shufflePlayList();
  }
12

The sound library is another matter.

In order to debug if the collision check is being detected just add a println():

13

I’m seeing shuffling print multiple times. @GoToLoop

14

It should only println() once per click if it’s inside mousePressed().

15

Right, sorry I meant it printed once. I just kept clicking shuffle thats why I saw it multiple times but it was there only once. Could this be because the shuffle is supposed to be outside mousePressed? That wouldn’t make sense but I can’t think of another reason why it’s not working @GoToLoop

16

No idea what variable tableau got anything to do w/ variable player.

And I’m not very knowledgeable w/ the sound library, so I can’t help you much about it.

17

I’m a little late chiming in. This is how I’d do it:
Round images are easier.
Load your images. .png files make it easy to create round buttons.
Create a Button class. In the button class create a Button constructor that contains position (I’d use PVector()), radius, and name.
Before setup() create a Button array
Button [] button;
In setup create your buttons.
button = new Button (pos, radius, buttonName);
Do this for each button.
Make sure your button constructor is setup to receive the button properties
Button(PVector position, float radius, String buttonName){ }
Now to check your buttons
void mouseClicked(){
whichButton=0;
for(int i = 0; i < button.length; i++){
float d = dist(mouseX, mouseY, buttonName[i].position.x, buttonName[i].position.y);
if(d <= buttonName[i]){
//Button is clicked
//Here I would with a previous int whichBotton = 0
whichButton = i;
//Test it
println("Clicked " + buttonName[i]);
}
}
This way of doing buttons is quite reusable
Hope this helps.
Let me know if you have any questions