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

Processing Coding Questions
1

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.

//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
Current Version: v10 - Google Docs

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
image832×650 12.6 KB

Did I miss anything? Thanks in advance!

2

Ballonns
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:

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…

3 Likes
3

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.

1 Like