Question about mousePressed

Processing Coding Questions
1

So I’m trying to figure out how to make one of my images appear and stay ON SCREEN with mousePressed, but it always goes away. Is there a way I can make it stay on screen? (I’ve also tried to do the same with mouseClicked function, but that didn’t work either…)
Here’s my code…

PImage img1;
PImage img2;
void setup() {
  size(1000, 800);
  img1=loadImage("img1.png");
  img2=loadImage("img2.png");
}
void draw() {
  background(255);
  imageMode(CENTER);
  image(img1, 500, 600);
}
void mousePressed() {
  image(img2, 450, 550);
}
1 Like
2

Have a boolean that tracks which image should be displayed.

Initially this boolean should be True, meaning you’re showing the first image.

When the mouse is clicked, assign the value of False to the boolean.

Then draw your image dependening on the boolean’s value.

1 Like
3

Thank you for the answer!
EDIT: Is there a way I can make this happen multiple times?

4

Yes. Instead of using a boolean, you can put your images in an array and have an int that is the index of the image you want to display.

PImage[] images = new PImge[3];
int cur_index = 0;

void setup() {
  size(1000, 800);
  for( int i=0; etc... ){
    images[i] = loadImage( ... );
  }
}
void draw() {
  background(255);
  imageMode(CENTER);
  image(images[cur_index], 500, 600);
}
void mousePressed() {
  cur_index++;
}
2 Likes
5

This is probably a dumb question, but what goes in the ‘etc’ area in:
for( int i=0; etc... ){ ?
Is it

for( int i=0; i < 3; i++){

?

6

Could be. Depends on how many images you have!

for( int i = 0; i < images.length; i++){

Would be a better line.

7

Thanks for the answers! :+1: I’ve tried it out, but it keeps saying ‘cannot convert int to boolean’

PImage[] images = new PImage[3];
int cur_index = 0;
void setup() {
  size(1000, 800);
  for( int i=0; images.length; i++ ){
    images[i] = loadImage( "bot.png" );
  }
}
void draw() {
  background(255);
  imageMode(CENTER);
  image(images[cur_index], 500, 600);
}
void mouseClicked() {
  cur_index++;
}

What could be the problem?

1 Like
8

The basic for loop structure has three parts, and something crucial is missing in the test part. The answer is well hidden on the reference page :wink:

Did you consider to load three separate images, rather than filling the array with the same image “bot.png”? You can achieve it by adding one line of code inside your for loop and slightly adjusting the other. (ps. let us know if you need a little bit more than that, but it’s good exercise if you try to solve it on your own).

1 Like
9

Embarrassing to say this, but I think I need a little bit more than that…though, I kind of assumed that the array would automatically format the three images since I named it “bot.png, bot1.png, bot2.png”

So far, I have this…

PImage img=("bot.png","bot1.png","bot2.png");
PImage[] images = new PImage[3];
int cur_index = 0;
void setup() {
  size(1000, 800);
  for( int i=0; i<2; i++ ){
    images[i] = loadImage("bot.png" );
  }
}
void draw() {
  background(255);
  imageMode(CENTER);
  image(images[cur_index], 500, 600);
}
void mouseClicked() {
  cur_index++;
}

Though, I’ve also made this as well (even though it’s messier since I didn’t use arrays)

PImage img1, img2, img3, img4, img5;
boolean image=false;
void setup() {
  size(1000, 800);
  textSize(36);
  img1=loadImage("bag1.png");
  img2=loadImage("bag.png");
  img3=loadImage("bot.png");
  img4=loadImage("bot1.png");
  img5=loadImage("bot2.png");
}
void draw() {
  background(255);
  imageMode(CENTER);
  image(img1, 500, 600);
  image(img3, 300, 600);
  if (image) {
    image(img2, 450, 550);
    image(img4, 250, 550);
    image(img5, 300, 540);
  }
}
void mouseClicked() {
  image=true;
}
1 Like
10

Not a problem, and no reason to be embarrassed! I’ll help you get there. You’re already somewhat close with your assumption that it would load “bot1.png” and “bot2.png”. The question now is how to make good use of the for loop, so it loads those exact file names.

Try the following code in a new Processing sketch and observe the output in the command line:

for (int i = 0; i < 3; i++) {
  println("this is loop number " + i);
}

You notice how I use the for loop to construct the output? In a similar manner you could construct file names– use a variable to construct the right file name, and use that variable to load a specific image.

2 Likes
11

Sweet! Thanks for this