# How to combine mousePressed function with "dist();" in Processing 3?

**URL:** https://discourse.processing.org/t/how-to-combine-mousepressed-function-with-dist-in-processing-3/32713
**Category:** Coding Questions
**Tags:** homework
**Created:** [October 9, 2021, 9:51pm UTC](https://discourse.processing.org/t/how-to-combine-mousepressed-function-with-dist-in-processing-3/32713 "2021-10-09T21:51:48Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![sebest\_design](https://avatars.discourse-cdn.com/v4/letter/s/ee7513/32.png) [@sebest\_design](https://discourse.processing.org/u/sebest_design)
#### Post date: [October 9, 2021, 9:51pm UTC](https://discourse.processing.org/t/how-to-combine-mousepressed-function-with-dist-in-processing-3/32713/1 "2021-10-09T21:51:48Z")

</div>

Hello. I am working on a school project. I am trying to control the radius value of 3 ellipses using the mousePressed function and the “dist()” thingy.

```auto
//references
float popDRed = dist(balloonRedX, balloonRedY, mouseX, mouseY);
float popDBlue = dist(balloonBlueX, balloonBlueY, mouseX, mouseY);
float popDGreen = dist(balloonGreenX, balloonGreenY, mouseX, mouseY);

//pop red balloon on click
void mousePressed() {
  if ((mouseX-popDRed<balloonRadiusRed) && (mouseY-popDRed<balloonRadiusRed)) {
    balloonRadiusRed = 0;
    mouthAngleOne = 180; //changes to mouth shape
    mouthAngleTwo = 360;
    mouthYvalue = height/2-290;
    mouthXvalue = width/2;
    mouthWidth = 40;
    mouthHeight = 10;
  }

//pop blue balloon on click
void mousePressed() {
  if ((mouseX-popDBlue<balloonRadiusBlue) && (mouseY-popDBlue<balloonRadiusBlue)) {
    balloonRadiusBlue = 0;
    mouthAngleOne = 180; //changes to mouth shape
    mouthAngleTwo = 360;
    mouthYvalue = height/2-290;
    mouthXvalue = width/2;
    mouthWidth = 40;
    mouthHeight = 10;
  } 

//pop green balloon on click
void mousePressed() {
  if ((mouseX-popDGreen<balloonRadiusGreen) && (mouseY-popDGreen<balloonRadiusGreen)) {
    balloonRadiusGreen = 0;
    mouthAngleOne = 180; //changes to mouth shape
    mouthAngleTwo = 360;
    mouthYvalue = height/2-290;
    mouthXvalue = width/2;
    mouthWidth = 40;
    mouthHeight = 10;
  } 

  
  //else {
  // balloonRadiusRed = balloonRadius;
  // mouthAngleOne = 0;
  // mouthAngleTwo = 180;
  // mouthYvalue = height/2-300;
  // mouthXvalue = width/2;
  // mouthWidth = 40;
  // mouthHeight = 30;
  //}
}

```

The full code can be found here in case anyone wants to try the code out:  
Somewhat Working Version: [v8 - Google Docs](https://docs.google.com/document/d/1PqYQ4n2_6N874vwMracPGB21Sd9GZn8bOf0YU6EehJY/edit?usp=sharing)  
Current Version: [v10 - Google Docs](https://docs.google.com/document/d/1-EPCDwFuiVbxzguhasEjjpBK_5iIHxyVSl2BU2Tko1c/edit?usp=sharing)

I am a total noob to Processing 3. I am a UX person doing a design course so I’m not familiar with platforms like CodePen. I have shared it via Google Docs.

I am trying to pop the balloons in the hands of the snowman individually on the click of a mouse.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3103c998b934dd6e636c1adfbcac110535c8caa7.png)

Did I miss anything? Thanks in advance!

---

<div class="post-metadata">

### Author: ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [October 10, 2021, 12:07am UTC](https://discourse.processing.org/t/how-to-combine-mousepressed-function-with-dist-in-processing-3/32713/2 "2021-10-10T00:07:27Z")

</div>

![Ballonns](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/79fcc7d0c635f89babb6efd8d29de1346d662d2a.png)  
Consider this diagram. The red and blue circles are two of your balloons.  
The orange line is the radius of the red balloon.  
The purple line is the radius of the blue balloon.

I have also draws the distance from the center of each balloon to the mouse position. The distance from the center of the red balloon is in pink, and the distance from the blue balloon is in light blue.

When the mouse is over a balloon, what is the relationship between this distance and the radius of the balloon? That is, what can you say about the light blue line in relation to the purple line? Can you see why the mouse is NOT over the red balloon?

Using this understanding, the check for “is the mouse over a balloon?” is simple:

```auto
if ( dist( balloonX, balloonY, mouseX, mouseY ) < balloonR ){
    /// Over this balloon! Pop it?
}

```

I suggest you use this check instead of whatever you’re trying to do…

---

<div class="post-metadata">

### Author: ![JoseMY](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josemy/32/2016_2.png) [@JoseMY](https://discourse.processing.org/u/JoseMY)
#### Post date: [October 10, 2021, 7:59am UTC](https://discourse.processing.org/t/how-to-combine-mousepressed-function-with-dist-in-processing-3/32713/3 "2021-10-10T07:59:02Z")

</div>

Hi!  
Well, it seems you are giving the variables a value based on dist().

But that variable is being updated out of scope.

You should update it inside mousePressed();

Also, MouseX has been already took in account in yor calculations. Do not substract it twice.