Clicking an Image to change it to another image

lakejoshua

I'm very new to processing and have been trying to figure this out for awhile and I'm sure it is easy but I need help.

All I'm trying to do is turn the jellyfish image to the plastic bag image when it is clicked. I have a couple of jellyfish spread out through the sketch but wanted them to only changed when they are clicked indivdually. Here is the code that I have been working with, I'm very confused on what to put into the void mousePressed()

PImage ocean; PImage jellyfish; PImage bag;

void setup(){ size(1280, 520); //background image PImage ocean; ocean = loadImage("ocean.jpg"); background(ocean);

jellyfish = loadImage("jellyfish.png"); bag = loadImage("plastic_bag.png");

}

void draw(){ image(jellyfish, 500, 120); image(jellyfish, 600, 320); image(jellyfish, 100, 20); image(jellyfish, 1000, 50); }

void mousePressed(){

}

}

GoToLoop

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

http://JeffreyThompson.org/collision-detection/point-rect.php

lakejoshua

Ahh sorry about that. Clearly I'm new. I've also edit it so there is a movie for the background instead

import processing.video.*;

 Movie myMovie;


PImage jellyfish;
PImage bag;



void setup(){
  size(1280, 520);
  myMovie = new Movie(this, "water.mp4");
  myMovie.loop();
 //background image


  jellyfish = loadImage("jellyfish.png");
  bag = loadImage("plastic_bag.png");

}


void draw(){
    image(myMovie, 0, 0);

  image(jellyfish, 500, 120);
  image(jellyfish, 600, 320);
  image(jellyfish, 100, 20);
  image(jellyfish, 1000, 50);
}

void mousePressed(){

  }

void movieEvent(Movie m) {
  m.read();
} 

TfGuy44

Let's just keep it real simple.

You want to either draw a bag or a jellyfish.

How do you know which one should be drawn?

Better yet, how will your sketch know?

How will the sketch remember what it should draw?

You want your sketch to remember something.

It could probably remember a value for you if you stored it in a variable.

Thus, you should have a variable:

boolean draw_jellyfish_not_bag_1;

And maybe you want to start by drawing the jellyfish:

draw_jellyfish_not_bag_1 = true;

Now that we have established that it is going to remember what to do for the first image (that is, is the first image going to be a bag or a jellyfish?), we need to make sure that it draws something different if this value changes.

That is, we need to check this variable's value and do one thing if it is true and do something different if it is false;

This sounds like a good job for a conditional statement.

First, we check IF the value is true:

if( draw_jellyfish_not_bag_1 ){

Then we do something (in this case, we draw a jellyfish):

No code here! You already know how to draw a jellyfish!

But if this variable is not true, we want to do something ELSE:

} else {

And that thing we want to do is draw the bag:

I'm sure you can figure this out too.

Since that's the end of the other thing we want to do, we need to close our conditional block:

}

Now all we have to do to draw a bag instead of a jellyfish is to change the value stored in that variable when the jellyfish (or bag) is clicked on.

TfGuy44

Since we want to change the value when the mouse is clicked, we should put the code that changes the value inside mousePressed(), the function that gets called whenever the mouse is clicked.

For now, let's have the image change if we just click anywhere at all.

draw_jellyfish_not_bag_1 = !draw_jellyfish_not_bag_1;

Wait, what? What does that do?

Quite simply, it swaps the value from true to false, or from false to true.

The ! is a NOT operation. NOT TRUE is FALSE and NOT FALSE is TRUE.

So if you're remembering that you want to draw the jellyfish (TRUE), then NOT TRUE is FALSE, and you assign (using the assignment operator, =) this new value to your variable.

Amazingly, when you click, your jellyfish now changes to a bag and back again.

TfGuy44

Now all you need to do is make it happen ONLY when the mouse is clicked while the mouse pointer is over the jellyfish/bag.

Remember that the mouse is always at the position (mouseX, mouseY).

What conditions have to be met for the mouse to be over the jellyfish?

What values must mouseX be between?

What values must mouseY be between?

Where is the jellyfish/bag? How wide and high is it? Hint: What is jelyfish.width and jellyfish.height?

Can you now write some conditional statements that check for these conditions?

Here's one of them:

if( mouseY < 120 + jellyfish.height ){

Do the rest yourself!

...

And then do the same thing for the other jellyfish! They will each need their own variables! And make sure you update them only when the right conditions are met!

Try it yourself now and post your attempt for more help.