Image and text together with mousePressed; having trouble with text and image pause.

Sakhile_Vanqa

Hi everyone!

I'm very new to Processing and I'm trying to use the mousePressed function to create a flip-book effect with text. The text isn't showing, no matter what size I apply and I'm no sure if there is a structural issue with my code. The images appear, but not for the duration of the mouse pressed like I would like.

I want to have both the image and the text that goes with it to appear while the user has the button pressed, then once released, they both disappear.

PFont f;
PImage img;
int imageID = -1;

float randMaxLimit = 6;
boolean isShow = false; 


void setup() {
  size(1550,800);

  String [] fontList = PFont.list();

  f = createFont ("Arial", 100, true);
  textFont(f, 36);
  fill(0);

}

void draw() {
  //background(255);
  fill(255,10);
  rect(0,0,width,height);
  calcWave();
  renderWave();


  if(isShow){  
    imageID = (int) random(randMaxLimit); 
    print("imageID = "+imageID+"\n"); 
    if(imageID == 1){
           textSize(100);
           text("Panama City ... Americas passed through.", mouseX, mouseY);
           img = loadImage ("PanamaCityforPlazaFrancias_01.jpg");
           imageMode(CENTER);

    }else if(imageID == 2){
      textSize(100);
      text("Johannesburg also known as Jozi, Joburg...claimed by others.", mouseX, mouseY);
      img = loadImage ("JohannesburgSunriseCityofGold.jpg");
      imageMode(CENTER);


    }else if(imageID == 3){
          textSize (100);
          text("Kruger National Park is...African Game Reserve (at 147 species). There are webcams set up to observe the wildlife.", mouseX, mouseY);
          img = loadImage ("Swimmingpool.jpg");
          imageMode(CENTER);

    }else if(imageID == 4){
            textSize (100);
            text("Cape Town is the second-most...Table Mountain and Cape Point.", mouseX, mouseY);
            img = loadImage ("SimonstownCPT.jpg");
            imageMode(CENTER);

    }else if(imageID == 5){
              textSize (100);
              text("Port Elizabeth or...over 1.3 million.", mouseX, mouseY);
              img = loadImage ("PE.jpg");
              imageMode(CENTER);

    }
    image(img, mouseX, mouseY); 
  }  
}

 void mousePressed() {
  isShow = true;


}

 void mouseReleased() {
  isShow = false;


}  

PhiLho

You have to get an idea how Processing works: setup() is called once, then draw() is called 60 times per second. Which means, when you analyze your code, that when the mouse is pressed, you load images 60 times per second. A bit of a waste of resources and CPU. Moreover, each time draw() is called, you draw a new random number, so you are likely to display a different image for 1/60th of second...

Beside, you first display the text, then you draw the image over it. That's why you don't see the text.

I let you try and fix the code, but don't hesitate to ask if you don't know how.
Hints: I suggest to pre-load the images in setup() (put them in an array), and to draw the random number in mousePressed(). You can also just assign the text string to a global variable, and call text() after image().