Image background keep overlapping the text? - image-processing

Question

I'm trying to have random text and backgrounds pop up when i click the mouse, however, when I click, the text is shown for less than half a second before a new background appears and hides the text
This is how my mouse pressed looks:
String mySentence = "Lose.txt";
String[] lose;
float mx = 20;
int posX = 0;
int posY = 0;
int butterflyX = 100;
int butterflyY = 100;
PImage v1;
PImage bf;
float xpos, ypos;
boolean playing = false;
//sentence
boolean showMySentence = false;
int mySentenceTimer = 0;
PImage [] backgrounds = new PImage[5];
int bg;
int currentBgNumber = 0;
void setup(){
size(800,501);
backgrounds = new PImage[5];
backgrounds[0] = loadImage("field.jpg");
backgrounds[1] = loadImage("galaxy.jpg");
backgrounds[2] = loadImage("tokyo.jpg");
backgrounds[3] = loadImage("water.jpg");
backgrounds[4] = loadImage("paris.jpg");
// mySentence = loadStrings(loseFile);
PFont myFont;
myFont = createFont("Futura", 30,true);
textFont(myFont);
fill(255);
}
void draw(){
image(backgrounds[currentBgNumber], 0, 0);
if (showMySentence) {
fill(255);
textSize(20);
text(mySentence, width/2, height/2);
showMySentence = millis() < mySentenceTimer;
}
void mousePressed() {
currentBgNumber++;
if (currentBgNumber>4)
currentBgNumber=0;
if (random(1) < .5) {
mySentence = "lose.txt" + "!";
mySentenceTimer = millis() + 3000;
showMySentence = true;
}
}
From what I see, after the background runs, the text should run after, but I guess not. I would appreciate it if you could show me what needs to be fixed, thank you :)

Answer 1

As promised (you can copy and paste this snippet in a Processing IDE and it'll run. Then play around until you get the results that you want and adapt it into your own code):
// a couple variables I'll use to manage the text's appearance
String mySentence = "";
boolean showMySentence = false;
int mySentenceTimer = 0;
void setup() {
size(500, 500);
}
void draw() {
// background paints over everything ~60 times per second (or whatever fps you did set up)
background(0);
// this would go at the end of the draw() loop
if (showMySentence) {
fill(255);
textSize(20);
text(mySentence, width/2, height/2);
showMySentence = millis() < mySentenceTimer; // flip the boolean after some time (2 seconds here)
}
}
void mousePressed() {
// this would replace the part of the mouseClicked() method where you draw the sentence
if (random(1) < .5) {
mySentence = "your sentence here";
mySentenceTimer = millis() + 2000; // show text but only for 2 seconds (I guessed that you might want that, but nevermind if that's not the case)
showMySentence = true;
}
}
I'll hang around in case you have further questions. Have fun!