We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Page Index Toggle Pages: 1
loading images (Read 244 times)
loading images
Mar 18th, 2009, 2:04pm
 
Hello!
I am quite new to Processing and programming. I have a little issue building a GUI with different background images that changes based on mouse press and position (I thought of using this instead of buttons). The code below gets me directly to image 3 without stopping at 2. Could you give me a tip on how to do it?

PImage img;
int mode = 0;

void setup(){
size (200,200);
img = loadImage("1.jpg");
}

void draw(){
background(img);
if (mousePressed && mode == 0){
 img = loadImage("2.jpg");
 mode = 1;
 }
if (mousePressed && mode == 1){
 img = loadImage("3.jpg");
 mode = 0;
 }
}
Re: loading images
Reply #1 - Mar 18th, 2009, 3:11pm
 
Some remarks:
- You should put the loadImage calls in setup, in an array of PImage for example. loadImage is a slow operation (reading a file on disk) that shouldn't be done repetitively.
- draw is called several times per second. So it will probably execute the code in mousePressed condition (loading a file) several times on each click.
- You didn't made the modes exclusive. So after setting mode == 1, you will enter the second condition, without having the time to see the second image.

A possible rewrite would look like:
Code:
PImage[] images = new PImage[3];
PImage img;
int mode = 0;

void setup() {
 size (200,200);
 images[0] = loadImage("1.jpg");
 images[1] = loadImage("2.jpg");
 images[2] = loadImage("3.jpg");
 img = images[0];
}

void draw() {
 background(img);
 if (mousePressed) {
   if (mode == 0) {
     img = image[1];
     mode = 1;
   } else if (mode == 1) {
     img = image[2];
     mode = 2;
   } else if (mode == 3) {
     img = image[0];
     mode = 0;
   }
 }
}

I wanted to illustrate my point by keeping close of your code, but a simpler version would be:
Code:
void draw() {
 background(image[mode]);
 if (mousePressed) {
   mode = (mode + 1) % images.length;
 }
}

But mode can map differently to the array of images.
Actually, above code is probably (I don't test!) still not working as you want, as mode keeps changing as long as you keep the mouse pressed.
So you should move the mode changing logic to mousePressed() event routine:
Code:
void draw() {
 background(image[mode]);
}
void mousePressed() {
 mode = (mode + 1) % images.length;
}
Re: loading images
Reply #2 - Mar 18th, 2009, 5:24pm
 
Thank you for the prompt answer! I have tested the first version you rewrote (I need something similar since I am planning to also use the mouse coordinates). However the code still get to image three skipping the second one. Any reasons?

Here is a slightly corrected version:

PImage[] images = new PImage[3];
PImage img;
int mode = 0;
 
void setup() {
 size (200,200);
 images[0] = loadImage("1.jpg");
 images[1] = loadImage("2.jpg");
 images[2] = loadImage("3.jpg");
 img = images[0];
}
 
void draw() {
 background(img);
 if (mousePressed) {
   if (mode == 0) {
img = images[1];
mode = 1;
   } else if (mode == 1) {
img = images[2];
mode = 2;
   } else if (mode == 3) {
img = images[0];
mode = 0;
   }
 }
Re: loading images
Reply #3 - Mar 18th, 2009, 6:09pm
 
You should re-read my answer and look at the third solution. You can put the if cascade in the mousePressed() function.
Re: loading images
Reply #4 - Mar 18th, 2009, 7:15pm
 
Got you, many thanx!

PImage[] images = new PImage[3];
PImage img;
int mode = 0;
 
void setup() {
 size (200,200);
 images[0] = loadImage("1.jpg");
 images[1] = loadImage("2.jpg");
 images[2] = loadImage("3.jpg");
 img = images[0];
}

void draw() {
 background(images[mode]);
}
void mousePressed() {
 //mode = (mode + 1) % images.length;
   if (mode == 0 && (mouseX >0) && (mouseX < 100) && (mouseY >0) && (mouseY < 100)) {
img = images[1];
mode = 1;
   
   } else if (mode == 0 && (mouseX >100) && (mouseX < 200) && (mouseY >100) && (mouseY < 200)) {
img = images[2];
mode = 2;
   }
 } else if (mode == 1) {
img = images[2];
mode = 2;
   } else if (mode == 2) {
img = images[0];
mode = 0;
   }
}  


Page Index Toggle Pages: 1