Mouse Pressed

myusername005001

What I want to do is have have multiple images within my code. When image A clicked image 1 will appear. And when image B is clicked image 2 to will appear.

how will i set this up?

TfGuy44

Start with a blank sketch.

Add one image variable to it.

Draw that image.

Make sure you are loading the image in the right place and drawing it in the right place.

Add a second image.

Draw it too. Where will you draw this one?

Make sure you can see both images. Make sure they are loaded in the right place. Make sure they are drawn in the right place.

Great! You're halfway there! You have images A and B!

Now add a boolean.

This boolean will remember if image A has been clicked on.

For now, set it to true, so we can imagine that the user has already clicked on image A.

Now what needs to happen? You may need to add and load your third image now.

Now add another boolean, which will be true when image B is clicked on.

Set it to true for now as well.

Now what needs to happen? Make changes!

Now set both of those booleans to false.

How are they going to get set to true? Consider adding a mousePressed() function now.

Try just setting them both to true when the mouse is clicked anywhere. Does it work?

Now work out where the mouse needs to be clicked to be considered "on" image A. What values does mouseX and mouseY need to have? What conditions need to be met for the first boolean to be set to true?

Now do the same for the other boolean.

And you're done!

Post the code of your attempt for more help. Follow these steps, and see how far you can get on your own!

myusername005001

i have the images loaded i just don't know what to write for the boolean? what i want os when you click on face 3 then pic three will appear

import processing.video.*;
Capture cam;

PImage[] images = new PImage[numFrames];



//face3
PImage face3;
PImage pic3;

void setup() { //---------------------------------------------
  size(800,800);  
  cam = new Capture(this, 320, 240, 15);






  //face3
  face3= loadImage("face3.png");
  pic3= loadImage("pic3.png");
}
void draw() { //-----------------------------------------------
  background(255);
  if (cam.available() == true) {
    cam.read(); //webcam ++++++++++++++++++++++++++
  }
  image(cam, 150, 150, 500, 500);
  cam.start();  





  //face3
  image(face3,687.8,400);

  image(pic3,150,150);

}

myusername005001

i have the images loaded i just don't know what to write for the boolean? what i want os when you click on face 3 then pic three will appear

import processing.video.*;
Capture cam;

PImage[] images = new PImage[numFrames];


//face3
PImage face3;
PImage pic3;

void setup() { //---------------------------------------------
  size(800,800);  
  cam = new Capture(this, 320, 240, 15);

  //face3
  face3= loadImage("face3.png");
  pic3= loadImage("pic3.png");
}
void draw() { //-----------------------------------------------
  background(255);
  if (cam.available() == true) {
    cam.read(); //webcam ++++++++++++++++++++++++++
  }
  image(cam, 150, 150, 500, 500);
  cam.start();  


  //face3
  image(face3,687.8,400);

  image(pic3,150,150);

}

colouredmirrorball

Break the problem in smaller parts. Can you detect when you clicked on face3? For this you need to know:

• when you clicked with the mouse
• if the mouse is above the face3 image

For the first point, check the mousePressed() method or the mousePressed boolean variable (see reference).

For the second point, you'll need to check if mouseX and mouseY are inside face3. You'll need to do some mathematical checks (>= and <=). Can you figure out what exactly you need to check?