# Click Image to Make Sound Play

**URL:** <https://discourse.processing.org/t/click-image-to-make-sound-play/24668>\
**Category:** Libraries\
**Created:** [October 18, 2020, 3:44am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668 "2020-10-18T03:44:17Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![charmypatel](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@charmypatel](https://discourse.processing.org/u/charmypatel)\
**Post date:** [October 18, 2020, 3:44am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/1 "2020-10-18T03:44:17Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 18, 2020, 3:53am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/2 "2020-10-18T03:53:52Z")

</div>

- [JeffreyThompson.org/collision-detection/point-rect.php](http://JeffreyThompson.org/collision-detection/point-rect.php)

---

<div class="post-metadata">

**Author:** ![charmypatel](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@charmypatel](https://discourse.processing.org/u/charmypatel)\
**Post date:** [October 18, 2020, 3:55am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/3 "2020-10-18T03:55:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 18, 2020, 3:59am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/4 "2020-10-18T03:59:18Z")

</div>

Images tend to have a rectangular shape.

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

---

<div class="post-metadata">

**Author:** ![charmypatel](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@charmypatel](https://discourse.processing.org/u/charmypatel)\
**Post date:** [October 18, 2020, 4:07am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/5 "2020-10-18T04:07:53Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 18, 2020, 4:14am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/6 "2020-10-18T04:14:23Z")

</div>

> [@charmypatel](#):
>
> … but I don’t want the user to mouse over, I want them to be able to click the button.

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

> **[mousePressed() / Reference](https://processing.org/reference/mousePressed_.html)**
>
> The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button ha…

> [@charmypatel](#):
>
> I think I would need to repeat that code and rename everything to use the mouse over.

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

- [sketchpad](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9eDRvB4LRmLrr)

---

<div class="post-metadata">

**Author:** ![charmypatel](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@charmypatel](https://discourse.processing.org/u/charmypatel)\
**Post date:** [October 18, 2020, 4:30am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/7 "2020-10-18T04:30:49Z")

</div>

Making progress…

```auto
// 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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 18, 2020, 4:39am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/8 "2020-10-18T04:39:53Z")

</div>

> [@charmypatel](#):
>
> `image(pause, 80, 15, 50, 50); `

> [@charmypatel](#):
>
> `if(mouseX > 80 && mouseX < 130 && mouseY > 80 && mouseY < 130){`

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.

---

<div class="post-metadata">

**Author:** ![charmypatel](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@charmypatel](https://discourse.processing.org/u/charmypatel)\
**Post date:** [October 18, 2020, 4:48am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/9 "2020-10-18T04:48:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 18, 2020, 4:52am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/10 "2020-10-18T04:52:02Z")

</div>

> [@charmypatel](#):
>
> I also don’t remember the order for inside the ().

> **[image() / Reference](https://processing.org/reference/image_.html)**
>
> The image() function draws an image to the display window. Images must be in the sketch's "data" directory to load correctly. Select "Add file..." from the "Sketch" menu to add the image to the…

---

<div class="post-metadata">

**Author:** ![charmypatel](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@charmypatel](https://discourse.processing.org/u/charmypatel)\
**Post date:** [October 18, 2020, 5:05am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/11 "2020-10-18T05:05:02Z")

</div>

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

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

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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 18, 2020, 5:16am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/12 "2020-10-18T05:16:35Z")

</div>

The sound library is another matter.

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

> [@charmypatel](#):
>
> ```auto
> if (mouseX > 140 && mouseX < 190 && mouseY > 15 && mouseY < 65) {
> println("shuffling...");
> shufflePlayList();
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![charmypatel](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@charmypatel](https://discourse.processing.org/u/charmypatel)\
**Post date:** [October 18, 2020, 5:22am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/13 "2020-10-18T05:22:06Z")

</div>

I’m seeing shuffling print multiple times. @GoToLoop

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 18, 2020, 5:26am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/14 "2020-10-18T05:26:04Z")

</div>

> [@charmypatel](#):
>
> I’m seeing shuffling print multiple times.

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

---

<div class="post-metadata">

**Author:** ![charmypatel](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@charmypatel](https://discourse.processing.org/u/charmypatel)\
**Post date:** [October 18, 2020, 5:27am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/15 "2020-10-18T05:27:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 18, 2020, 5:45am UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/16 "2020-10-18T05:45:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![markcosmic](https://avatars.discourse-cdn.com/v4/letter/m/ecc23a/32.png) [@markcosmic](https://discourse.processing.org/u/markcosmic)\
**Post date:** [November 12, 2020, 9:50pm UTC](https://discourse.processing.org/t/click-image-to-make-sound-play/24668/17 "2020-11-12T21:50:51Z")

</div>

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