Moving text with regular updates

Processing Coding Questions
1

Hello!
So, fairly new to processing here.
I am working on a school project now where I need text (the text is coming from a csv-file)
to appear and stay on screen. In regular intervals, the text drops down (30 pixels or so. this can just jump at once, there is no need for animation.), and new text is appearing in place of the old one.
This continues further and further, until the original text hits the bottom.
I hope it makes sense.
It’s a bit like Tetris: Instead of blocks, chunks of text appear and stack up over another.
I am having a hard time with this.Some help with this would be greatly appreciated. I’m stuck…

For instance, I would like it to look like this:

if the sequence is M,L,W,R:

1.step:
M

2.step:
L
M

3.step:
W
L
M

4.step:
R
W
L
M

Here is my code as far as I got. I know, it’s not far…
all help greatly appreciated!

PFont f;
String [] words = {"m", "l", "w", "r"};
int time;
int wait = 1000;
int i = 0;


void setup() {
  size (600, 600);
  f = createFont("Arial", 118, true);
  time = millis();
}


void draw() {
  background(255);
  textFont(f, 16);
  fill(0);
  text(words[i], 10, 100);

  if (millis() - time >= wait) {

    i = int(random(5));
    println(i);

    time = millis();
  }
}
2

If you have an array of words you can make a parallel array of same size and store the y position for each word (line of text)

Now write each line at the y position from the 2nd table.

When time has come increase the values in the array and add a new pair (at the end of both arrays)

3

Because you mentioned this was for a class, can I ask what kind of concepts this exercise is building on?

4

Sorry for the late reply, I’m sure the school year may be over, but hopefully you can use this still.

First off here’s all the new code:

PFont f;
String [] words = {"m", "l", "w", "r"};
int time;
int wait = 1000;
int i = 0;

//I added this 
ArrayList<String> results = new ArrayList<String>(); //use an arraylist, it's a bit more dynamic


void setup() {
  size (600, 600);
  f = createFont("Arial", 118, true);
  time = millis();
  
 
}


void draw() {
  background(255);
  textFont(f, 16);
  fill(0);
  
  textAlign(CENTER); 
  
  text("Current List: ", width/2, 50);  
 
   if (millis() - time >= wait) {
    i = int(random(words.length)); // just so you can always change the size of your array later
    results.add(0,words[i]); //when you're done getting the random letter, add it to the beginning of that arraylist
    println("Current arraylist: "+results);
    println(i);
    time = millis(); 
  }
  

  displayList();  //display the list 

   
}


void displayList()
{
 int list_size = results.size()-1; 
 
 for(int j = list_size; j>-1; j--) //start from the end of the array list (the last index should be the first string, and print from the bottom up)
  {
    text(results.get(j), width/2, 100+j*15); //i'm moving this here also    
  }//end of for loop
 
 
}

Now to Explain what I added:

First, I opted on using an arraylist, because those are very dynamic and flexible, and great when data is constantly updating. I initialized a String arraylist called “results” like this:

ArrayList<String> results = new ArrayList<String>();

After that, I changed a little thing where it came to how you were setting your i. You initially set it to 5, but that’s not really too flexible especially if you want to change the size of your array in the future. So all I did was change it from saying 5 to saying this:

i = int(random(words.length));

Then I went ahead into your if statement, and had the program add the random value you were getting, to the beginning of the arraylist. When using the add method, doing this: [name of array list].add(value); will add your value automatically to the end of the arraylist. Because you wanted each additional value to be pushed down, I made sure to add it to the beginning of the arraylist, by specifying the index of 0 as I did here:

 results.add(0,words[i]);

Next, I made a displayList() function. This was going to display the new list after every iteration of void draw(). In the function, what I first do is define a variable of list_size. I set it equal to the results arraylist size, (using the .size() method that comes with arraylists) minus one, just because I knew I would be iterating through indexes, and I didn’t want to get out of bounds.

Then, what I did was set a for loop, that started at the last index (which will be list_size), and would iterate back to 0 (and 0 is greater than -1, that’s why I put that variable j had to be greater than -1).

As of now, this is what the for loop looks like:

 for(int j = list_size; j>-1; j--) 
  {
  }

Now, what I want it to do, is for each item in the arraylist, I want my text to show the string at index j, shown by: results.get(j) (by the way, .get() also comes with arraylists) and I I just centered the x value to being in the center, and with the y value, that looks like this:

100+j*15

Most important is the j*15 part. What I’m doing is getting the index I am at, multiplying it by 15 (or whatever number you want, 15 just looked alright to me), and add 100 to it, again I’m adding a hundred just so it could look a little better, and that’s all there is to it!

So, if my arraylist has 3 values in it, I will start at the the 3rd value (2nd index) and show text with a y value at 100+(215) which is a y value of 130. When j decreases, it will be 100+(115) which is 115, and when j is 0 (aka the first value, which is also the newest value) it will display at a y value of 100, which is right at the top.

All that, shown here:

void displayList()
{
 int list_size = results.size()-1; 
 
 for(int j = list_size; j>-1; j--) //start from the end of the array list (the last index should be the first string, and print from the bottom up)
  {
    text(results.get(j), width/2, 100+j*15); //i'm moving this here also    
  }//end of for loop
}

Hopefully, all this helped? And if there are any more questions, I would be glad to do my best to answer them. This is just one way of doing it, and more so the way that I best taught to approach your problem, but I’m sure there are plenty of ways.

Thanks,
EnchancedLoop7