CODEWITHSUNDEEP
if-statementbuttonprocessing
bisuke
bisuke

Reputation: 331

Processing- how to write; "On mouse click in region". For effect of clicking a button

I was wondering why this code doesn't work as intended.

void mousePressed() {

    if (mouseX > width-50 && mouseX < width && mouseY > height-50 && mouseY < height)
    { 
        img = loadImage("doraemon.png");
        image(img, 0, 0, width, height);
    }

I want it so that when I click on an image that says 'next', I can show a different image on the background, and if clicked again, show another background image and so on. 

if (mouseX > width-50 && mouseX < width && mouseY > height-50 && mouseY < height)

^This code snippet states where the button 'next' is. When I run this code, I get an image while hovering over the condition, but I want the image to appear after I press the button.

Does anyone know how to write that?

I need something like

 if (mousePressed == condition)
     { 
      then change image
     }

Please help. I really appreciate it!

Upvotes: 5

Views: 8478

Answers (2)

George Profenza
George Profenza

Reputation: 51837

There a couple of things look a slightly off in the snippet you posted:

if (mouseX > width-50 && mouseX < width && mouseY > height-50 && mouseY < height)
    { 
        img = loadImage("doraemon.png");
        image(img, 0, 0, width, height);
    }

One is minor: you're loading the image each time there is mouse click a 50x50 box at the bottom right edge of your sketch. You should load the image once in setup, then simply re-use it when you need it through your sketch.

The second might be your main issue: you call image() only once if the mouse is pressed (and in the bottom right side of your sketch). This means that if you have a background() call or other drawing calls in the draw() function, you will barely notice the Doraemon image being drawn (as it is erased/painted over more often)

Here's what I mean in code:

PImage img;//reference to the image
boolean imgDraw;//keep track if the image should be drawn or not

void setup(){
  //load the image only once, at setup
  img = loadImage("doraemon.png");
  size(img.width,img.height);
}
void draw(){
  background(0);//clear each frame
  if(imgDraw){//draw the image only if it needs to be drawn
    image(img, 0, 0, width, height);
  }
}
void mousePressed() {
    //check if the cursor is at the bottom right, and if so, set the image draw flag to true
    if (mouseX > width-50 && mouseX < width && mouseY > height-50 && mouseY < height)
    { 

        imgDraw = true;
    }
    else
    {
      imgDraw = false;
    }  
}

Actually, because, the imgDraw is a boolean and you have a boolean expression checking coordinates, you can collapse it to a single statement.

void mousePressed(){
  imgDraw = (mouseX > width-50 && mouseX < width && mouseY > height-50 && mouseY < height); 
}

Looks, nice but if the code is harder to read, it's not worth it. Readable code is better.

Upvotes: 0

Kevin Workman
Kevin Workman

Reputation: 42176

You're trying to cram all of your logic into the mousePressed() function. Instead, you need to split your logic up between the mousePressed() function and the draw() function. Use variables to keep track of what should be drawn. Adjust those variables in the mousePressed() function. Use those variables to figure out what to draw in the draw() function.

A simple example might look like this:

boolean showButton1 = true;

void setup() {
  size(200, 200);
}

void mousePressed() {
  if (mouseX < 100 && mouseY < 100) {
    //button 1 was just clicked, show button 2 instead
    showButton1 = false;
  } else if (mouseX > 100 && mouseY > 100) {
    //button 2 was just clicked, show button 1 instead
    showButton1 = true;
  }
}

void draw() {

  background(0);

  if (showButton1) { //draw the first button
    fill(255, 0, 0);
    rect(0, 0, 100, 100);
  } else { //draw the second button
    fill(0, 255, 0);
    rect(100, 100, 100, 100);
  }
}

Also, you shouldn't call loadImage() from the mousePressed() or draw() functions. Instead, load your images from the setup() function, and store them in variables that you can use later.

Upvotes: 2

Related Questions