Appearing and Disappearing Text

Processing Coding Questions
1

Hello there. I am trying to make a game that requires a couple of text to appear and disappear after a couple of seconds. I wanted it to say “Ready?” on screen for a few seconds then disappear. Then “Get set!” appears for a few seconds and disappear. Then “Go!”.

How would I do this? Would I have to set them as strings? Thanks

2

Hi, I assume you’re new to processing. I’m not sure this is the best way for me to help, but I did what you’re looking for recently. So here is the code.

Texts are stored into string as you guessed. But to display several ones at the same place you will need to store them into a list of string like this :

StringList lib;

then you can add in it as many text as you want, like I did in this function

StringList textLibrary() { // function that define your strings
  StringList st = new StringList();
  st.append("Ready?");
  st.append("Get set!");
  st.append("Go!");// copy paste this line to add one
  return st;
}

The second thing you need is to make a timer. For this Processing have the millis() fuction that give you the amount of milliseconds that have passed since your sketch is launched.

Finally you have to write the conditions you want for your text to be displayed

if ((millis()-t)>(d+dt) && c<lib.size()-1) { // go to the next text
    c++;
    t=millis();
  }
else if ((millis()-t)>(d)) txt=""; // no text displayed
else txt=lib.get(c); // the text is displayed

Here is the whole thing. I made the explanations really quickly, I hope you’ll get how it works. There is plenty of other ways to do the same result. Fell free to ask if there is something you don’t get. I hope I helped. Can’t wait to see your game :relaxed:

// colin thil 05/12/2017

StringList lib; 
float h,w,x,y;
int t,d,s,c,dt;
PFont myFont;
  
StringList textLibrary() { // function that define your strings
  StringList st = new StringList();
  st.append("Ready?");
  st.append("Get set!");
  st.append("Go!");// copy paste this line to add text
  return st;
}

void textParameters() { // I put every text display parameters here
  myFont = createFont("Arial", 32);
  d=1000; // delay after before changing text
  dt=1000; // delay after before the text disapear
  s=24; // text size
  x = width/2; // horizontal align
  y = height/2; // vertical align
  textAlign(CENTER, BOTTOM);
  textFont(myFont);
  textSize(s);
}

void setup() { // this is read when you sketch is launched
  size(640, 480);
  lib=textLibrary();
  textParameters();
  t=dt;
}

void draw() { // this is played in loop after the setup
  String txt="";
  background(0);
  if ((millis()-t)>(d+dt) && c<lib.size()-1) { // go to the next text
    c++;
    t=millis();
  }
else if ((millis()-t)>(d)) txt=""; // no text displayed
else txt=lib.get(c); // the text is displayed
text(txt,x,y);
}
1 Like
3

A simpler alternative to millis(): :innocent:

2 Likes
4

Hey thanks for the response! Yeah I am pretty much a beginner. I kind of understand that you have to convert millis to seconds but can you explain to me the int variables and what each does? I’m a little confused with the if statement equation

5

You’re welcome.

This is to check the delay:

if((millis()-savedTime)>changeTextDelay)

This is to verify if there is other text to display, to avoid ‘arrayIndexoutofboundsexception’ error:

if(currentText<lib.size()-1)

Here is the code with less obscure variable names:

StringList lib; 
float posX,posY;
int savedTime,changeTextDelay,fontSize,currentText,disappearingTextDelay;
PFont myFont;
  
StringList textLibrary() { // function that define your strings
  StringList st = new StringList();
  st.append("Ready?");
  st.append("Get set!");
  st.append("Go!");// copy paste this line to add text
  return st;
}

void textParameters() { // I put every text display parameters here
  myFont = createFont("Arial", 32);
  changeTextDelay=1000; // delay after before changing text (in milliseconds)
  disappearingTextDelay=1000; // delay after before the text disapear (in milliseconds)
  fontSize=24; // text size
  posX = width/2; // horizontal align
  posY= height/2; // vertical align
  textAlign(CENTER, BOTTOM);
  textFont(myFont);
  textSize(fontSize);
}

void setup() { // this is read when you sketch is launched
  size(640, 480);
  lib=textLibrary();
  textParameters();
  savedTime=disappearingTextDelay;
}

void draw() { // this is played in loop after the setup
  String txt="";
  background(0);
  if ((millis()-savedTime)>(changeTextDelay+disappearingTextDelay) && currentText<lib.size()-1) { // go to the next text
    currentText++;
    savedTime=millis();
  }
else if ((millis()-savedTime)>(changeTextDelay)) txt=""; // no text displayed
else txt=lib.get(currentText); // the text is displayed
text(txt,posX,posY);
}