Scrolling text in different text sizes

Processing Coding Questions
#1

Hello,

My code writes lines to the screen after the previous one has left it. Is there a possibility to write the lines directly unter the other and not wait until one has left the screen, just like on a website?

I also want the text to be displayed in three different text sizes, which are randomly selected, but I can’t figure out how.

I hope somebody could help me out. Many thanks!

PFont font;

String [] lines;
int index = 0;

float y;

void setup() {
  size(600,300);
  font = createFont("BradfordLLTT-Regular.ttf", 20);
  
  y= height;

}


void draw() {
  background(255);
  fill(0);
  textFont(font);
  textAlign(LEFT);
  
  String everything;
  everything = "Die kleine Mauer, die oben umher die Einfassung macht, die hohen Bäume, die den Platz rings umher bedecken, die Kühle des Orts; das hat alles so was Anzügliches, was Schauerliches. Es vergeht kein Tag, daß ich nicht eine Stunde da sitze. Da kommen die Mädchen aus der Stadt und holen Wasser, das harmloseste Geschäft und das nötigste, das ehemals die Töchter der Könige selbst verrichteten.";
  lines = splitTokens(everything, ",.?!;:-–—");
  
  
  text(lines[index], 10, y);
  textSize(random(10,20));
  
  y= y - 3;
  
  float h = textWidth(lines[index]); 
  if (y < -h) {
    y = height;
    
    index = (index + 1) % lines.length;
  }
  
  
}
#2

Hello,
Your code for randomly selecting a font size is good, but the problem you’re running into is that you’re re-initializing the font and font size every frame. You can move the following line to the setup function and the random sizing of text will work:

textFont(font);

For the second part of your question, that is a little bit harder to address. In order to have multiple text lines, you can make a class for each line that contains it’s position, randomly selected font size, and the index in the lines array. This lets you have as many lines on screen at a time as you want. I have created an example for you.

//This class is for one instance of a line of text
class TextLine{
  float pos;
  float fontSize;
  int index;
  
  TextLine(float s, int i){
    pos = height;
    fontSize = s;
    index = i;
  }
  
  void update(){
    textSize(fontSize); //set the font size to the random 
    text(lines[index], 10, pos); // display the text at its current position
    pos -= 3; //set the position for the next time update is called
  }
}

Then you can make an array or ArrayList of these items and reference them through a loop in the draw function. Something like this to make sure items get added at a set rate, and removed when they are no longer visible:

// This goes in the draw() function
if(frameNo == 0) // frameNo gets updated every frame
  {
    TextLine next = new TextLine(random(10,20), index);
    text.add(next);
    index = (index + 1) % lines.length;
  }
// framesBetweenLines is set globaly as the number of frames waited before creating a new textline
  frameNo = (frameNo + 1) % framesBetweenLines; 
  

  //remove elements that are off screen
  for (int i = 0; i < text.size(); i++)
  {
    TextLine temp = text.get(i);
    if(temp.pos < 0) // if the position is less than 0, it is off the top of the screen.
    {
      text.remove(temp);
    }
  }
  
  //update each text line
  for (int i = 0; i < text.size(); i++)
  {
     text.get(i).update();
  }
  
  index = (index + 1) % lines.length;

if you are unsure about how ArrayLists work, there are some good resources like the processing reference,
https://processing.org/reference/ArrayList.html
and here:

Hope that helps!

1 Like