# Auto adjusting list

**URL:** <https://discourse.processing.org/t/auto-adjusting-list/13091>\
**Category:** Coding Questions\
**Created:** [July 31, 2019, 11:58am UTC](https://discourse.processing.org/t/auto-adjusting-list/13091 "2019-07-31T11:58:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![TrustyFox](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@TrustyFox](https://discourse.processing.org/u/TrustyFox)\
**Post date:** [July 31, 2019, 11:58am UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/1 "2019-07-31T11:58:49Z")

</div>

I’m trying to make a game kill feed in processing.  
It would have rectangles with text coming in from the top, every new rectangle would push down all the rectangles under it to make space.  
How should I go about making this ?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 12:11pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/2 "2019-07-31T12:11:55Z")

</div>

It depends from your skill level

When you know OOP make.a class BoxWithText with position and size and text and colors movement (yadd = 5)

Make an Arraylist of this class

Now insert a new Box inside the ArrayList and let it drop

When a collision with a previous box occurs, it’s not clear for me, what you want to achieve.

The previous box would move down?

Welcome to the forum!

Regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![TrustyFox](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@TrustyFox](https://discourse.processing.org/u/TrustyFox)\
**Post date:** [July 31, 2019, 12:17pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/3 "2019-07-31T12:17:33Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c6fb55d75865d5423aebbd1ef30052d72d16edf5.jpeg)  
As an example take overwatch’s killfeed. When somebody is killed it shows up in a box, if somebody else also dies a new block shows up where the previous was. It pushes the previous block down the list.

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [July 31, 2019, 12:26pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/4 "2019-07-31T12:26:58Z")

</div>

Hey There !

Taking an OOP approach where you define your own text box and just use that ever new entry uses /n which will push it on a new line.

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [July 31, 2019, 2:18pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/5 "2019-07-31T14:18:48Z")

</div>

Hey it’s me again !

Here’s a little class to showcase it:

```auto
TextBoxChat c1;
String text[]={"abc", "HelloPineapples", "ThisIsNice", "VeryCool"};
int i;
void setup() {
  size(600, 480);
  c1 = new TextBoxChat(width/2, height/2, 20, 25);
  i = 0;
}
void draw() {
  background(0);
  c1.show();
}
void keyPressed() {
  c1.addText(text[i%text.length]);
  if (keyCode == UP) c1.clearText();  
  i++;
}

```

```auto

public class TextBoxChat {
  PVector pos;
  int size;
  int textSize;
  String text;
  TextBoxChat(float x, float y, int size, int textSize) {
    pos = new PVector(x, y);
    this.size = size;
    this.textSize = textSize;
    text = "";
  }
  void show() {
    textSize(textSize);
    fill(255, 0, 0);
    text(text, pos.x, pos.y);
  }
  void addText(String pushText) {
    text = pushText+"\n"+text;
  }
  void clearText(){
    text = "";  
  }
}

```

Edit: Here’s a little update so the most recent item gets pushed to top rather than downwards.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 3:07pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/6 "2019-07-31T15:07:29Z")

</div>

It’s called a toast and a list of toasts

---

<div class="post-metadata">

**Author:** ![TrustyFox](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@TrustyFox](https://discourse.processing.org/u/TrustyFox)\
**Post date:** [July 31, 2019, 3:30pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/7 "2019-07-31T15:30:54Z")

</div>

Wow this works great but i don’t understand witch part of the code is doing the pushing

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 3:36pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/8 "2019-07-31T15:36:54Z")

</div>

The method addText

It places the text before the older text

`\n` means line break

Chrisir

---

<div class="post-metadata">

**Author:** ![TrustyFox](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@TrustyFox](https://discourse.processing.org/u/TrustyFox)\
**Post date:** [July 31, 2019, 3:41pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/9 "2019-07-31T15:41:06Z")

</div>

It might be easier if i give you the code I currently have. I’m reading from a txt file with a bunch of names. I’m trying to animate it so I save every added block to an image file. I’d love it to work like you did, adding every block on top and pushing the rest down

> float xPos, yPos;  
> String lines;  
> String getSize, frost;  
> PGraphics pg;
> 
> void setup() {  
> frameRate(30);  
> size(400, 6000);  
> xPos= 100;  
> yPos= 30;
> 
> lines = loadStrings(“People.txt”);
> 
> pg = createGraphics(2000, 6000, JAVA2D);  
> rectMode(CORNER);  
> textAlign(LEFT);
> 
> frost = "Frost eliminated ";  
> }
> 
> void draw() {
> 
> pg.smooth();  
> pg.beginDraw();
> 
> for (int i=0; i \< lines.length; i++) {  
> getSize = frost + lines[i];  
> pg.fill(0, 0, 0, 50);  
> pg.noStroke();  
> pg.rect(xPos-8, yPos-16, textWidth(getSize)+2, 25);  
> pg.fill(255);  
> pg.text(frost, xPos, yPos);  
> pg.fill(#FF7E7E);  
> pg.text(lines[i], xPos + textWidth(frost)-8, yPos);
> 
> ```
> pg.save("Frame"+ i +".png");
> 
> yPos += 30;
> 
> ```
> 
> }  
> noLoop();  
> }

---

<div class="post-metadata">

**Author:** ![TrustyFox](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@TrustyFox](https://discourse.processing.org/u/TrustyFox)\
**Post date:** [July 31, 2019, 3:46pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/10 "2019-07-31T15:46:12Z")

</div>

Isn’t the string pushText empty ?  
Could you break down what’s going on when being run ?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 3:48pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/11 "2019-07-31T15:48:17Z")

</div>

That won’t work because you’re using a for loop in draw ()

Remember that draw() updates the screen only once at its end

All animation in between gets lost.

Instead, get rid of the for loop and say frameRate(4); in setup () and just add one item in draw ()

Increase i in draw()

Combine it with klls code

You can do it.

---

<div class="post-metadata">

**Author:** ![TrustyFox](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@TrustyFox](https://discourse.processing.org/u/TrustyFox)\
**Post date:** [July 31, 2019, 3:55pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/12 "2019-07-31T15:55:32Z")

</div>

I see, the for loop is redundant.  
I’ll try to combine it but classes make my brain boil.  
thanks for your help

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 3:56pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/13 "2019-07-31T15:56:19Z")

</div>

I can help later but classes are great

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 4:56pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/14 "2019-07-31T16:56:00Z")

</div>

```auto

// showing a TextBoxChat with full pg usage

TextBoxChat textBoxChat;

String[] lines={
  "Anna", "Tom", "Mary", "Lynn", "Oliver"
};

PGraphics pg;
int i=0; 

void setup() {
  size(400, 600);
  background(111);

  textBoxChat = new TextBoxChat(width/2-120, 33, 
    20, 
    25);

  frameRate(4);

  //lines = loadStrings("People.txt"); // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  String[] frost = new String[1];  
  frost[0]="Frost eliminated ";
  lines = concat(frost, lines); 

  pg = createGraphics(2000, 6000, JAVA2D);
  rectMode(CORNER);
  textAlign(LEFT);
}

void draw() {

  if (i<lines.length) {
    makePG();
    textBoxChat.addText(lines[i]);
    i++;
  }

  image(pg, 0, 0);
}

void makePG() {
  pg = createGraphics(400, 600, JAVA2D);
  pg.beginDraw();
  pg.background(111);
  pg.smooth();
  pg.noStroke();
  pg.fill(255);
  pg.fill(#FF7E7E);
  textBoxChat.show();
  pg.endDraw();
  pg.save("Frame"+ i +".png");
}

// ============================================================================================

class TextBoxChat {

  PVector pos;
  int size;
  int textSize;
  String text="";

  // constr 
  TextBoxChat(float x, float y, 
    int size, 
    int textSize) {
    pos = new PVector(x, y);
    this.size = size;
    this.textSize = textSize;
  }// constr 

  void show() {
    pg.textSize(textSize);
    pg.fill(255, 0, 0);
    pg.text(text, 
      pos.x, pos.y);
  }

  void addText(String pushText) {
    text = pushText
      +"\n"
      +text;
  }

  void clearText() {
    text = "";
  }
  //
}//class 
//

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 5:00pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/15 "2019-07-31T17:00:35Z")

</div>

> [@TrustyFox](#):
>
> Isn’t the string pushText empty ?

No, not at all.

He is giving a text from the array `lines` as a parameter to the function `addText()`:

- Calling: ` c1.addText(text[i%text.length]);`

- The parameter: text[i%text.length]

- and the function in the class: `void addText(String pushText) { `

- It receives this as a parameter: `pushText`

> [@TrustyFox](#):
>
> Could you break down what’s going on when being run ?

- In setup() the object c1 is made from the class (cookie and cookie maker, see tutorial objects)

- In draw() c1 text is shown (all text is in ONE String but separated by line breaks `\n`)

- In keyPressed() we add to the text in the class (see above)

Chrisir

---

<div class="post-metadata">

**Author:** ![TrustyFox](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@TrustyFox](https://discourse.processing.org/u/TrustyFox)\
**Post date:** [July 31, 2019, 5:21pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/16 "2019-07-31T17:21:32Z")

</div>

I have so much trouble tracking what classes do in my head.  
The code works great thanks a whole bunch ^^

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 5:27pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/17 "2019-07-31T17:27:24Z")

</div>

here is a version with boxes around the lines.

**By the way**

By the way, this is not the initial suggestion of a class BoxWithText (that probably would have meant only one line, at least that was the way I was thinking of it)

Instead this class TextBoxChat is the outer box containing all lines

Chrisir

```auto

// showing a TextBoxChat with full pg usage

TextBoxChat textBoxChat;

String[] lines={
  "Anna", "Tom", "Mary", "Lynn", "Oliver"
};

PGraphics pg;
int i=0; 

void setup() {
  size(400, 600);
  background(111);

  textBoxChat = new TextBoxChat(width/2-120, 33, 
    20, 
    25);

  frameRate(4);

  //lines = loadStrings("People.txt"); // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  String[] frost = new String[1];  
  frost[0]="Frost eliminated ";
  lines = concat(frost, lines); 

  pg = createGraphics(2000, 6000, JAVA2D);
  rectMode(CORNER);
  textAlign(LEFT);
}

void draw() {

  if (i < lines.length) {
    textBoxChat.addText(lines[i]);
    makePG();
    i++;
  }

  image(pg, 0, 0);
}

void makePG() {
  pg = createGraphics(400, 600, JAVA2D);
  pg.beginDraw();
  pg.background(111);
  pg.smooth();
  pg.fill(255);
  pg.fill(#FF7E7E);
  textBoxChat.show();
  pg.endDraw();
  pg.save("Frame"+ i +".png");
}

// ============================================================================================

class TextBoxChat {

  PVector pos;
  int size;
  int textSize;
  String text="";

  // constr 
  TextBoxChat( float x, float y, 
    int size, 
    int textSize) {
    pos = new PVector(x, y);
    this.size = size;
    this.textSize = textSize;
  }// constr 

  void show() {
    String[] textSplitUp=split(text, "\n"); 
    println(textSplitUp);

    int i_textSplitUp=0; 
    for (String s : textSplitUp) {

      if (s.equals("")) 
        continue; 

      //rect
      pg.stroke(0);
      pg.fill( 30 );
      pg.rect(pos.x-8, pos.y + i_textSplitUp * (textSize+21), 
        250, textSize+12, 
        9); 

      // text 
      pg.noStroke();
      pg.textSize(textSize);
      pg.fill(255, 0, 0);
      pg.text(s, 
        pos.x, pos.y+ i_textSplitUp * (textSize+21) + 27);

      i_textSplitUp++;
    } //for
  } //func 

  void addText(String pushText) {
    text = pushText
      +"\n"
      +text;
  }

  void clearText() {
    text = "";
  }
  //
}//class 
//

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 5:36pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/18 "2019-07-31T17:36:19Z")

</div>

> [@TrustyFox](#):
>
> I have so much trouble tracking what classes do in my head.

Look at the tutorial objects

> **[Objects](https://www.processing.org/tutorials/objects/)**
>
> The basics of object-oriented programming.

or read this: [Object Oriented Programming · Kango/Processing-snippets Wiki · GitHub](https://github.com/Kango/Processing-snippets/wiki/Object-Oriented-Programming)

**By the way**

By the way, I don’t understand

- why you write everything in a pg
- that you also save (!!!)

**Remark**

Also, you could get rid of this line: `frameRate(4);` and use a timer instead

Chrisir

---

<div class="post-metadata">

**Author:** ![TrustyFox](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@TrustyFox](https://discourse.processing.org/u/TrustyFox)\
**Post date:** [July 31, 2019, 5:56pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/19 "2019-07-31T17:56:45Z")

</div>

Thanks, I was trying to save every frame creating a new block to later animate it as a png sequence. Apparently I needed pg. in front of stuff to save with an alpha channel.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 6:08pm UTC](https://discourse.processing.org/t/auto-adjusting-list/13091/20 "2019-07-31T18:08:32Z")

</div>

here is a version without pg

```auto
// showing a TextBoxChat 

TextBoxChat textBoxChat;

String[] lines={
  "Anna", "Tom", "Mary", "Lynn", "Oliver"
};

int i=0; 

void setup() {
  size(400, 600);
  background(111);

  textBoxChat = new TextBoxChat(width/2-120, 33, 
    20, 
    25);

  frameRate(3);

  //lines = loadStrings("People.txt"); // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  String[] frost = new String[1];  
  frost[0]="Frost eliminated ";
  lines = concat(frost, lines); 

  rectMode(CORNER);
  textAlign(LEFT);
}

void draw() {
  background(111);
  if (i < lines.length) {
    textBoxChat.addText(lines[i]);
    i++;
  }
  textBoxChat.show();
}

// ============================================================================================

class TextBoxChat {

  PVector pos;
  int size;
  int textSize;
  String text="";

  // constr 
  TextBoxChat(float x, float y, 
    int size, 
    int textSize) {
    pos = new PVector(x, y);
    this.size = size;
    this.textSize = textSize;
  }// constr 

  void show() {
    String[] textSplitUp=split(text, "\n"); 

    // loop over all lines in text
    int i_textSplitUp=0; 
    for (String s : textSplitUp) {

      if (s.equals("")) 
        continue; // go on 

      //rect
      stroke(0);
      fill(30);
      rect(pos.x-8, pos.y + i_textSplitUp * (textSize+21), 
        250, textSize+12, 
        9); 

      // text 
      textSize(textSize);
      fill(255, 0, 0);
      text(s, 
        pos.x, pos.y+ i_textSplitUp * (textSize+21) + 27);

      i_textSplitUp++;
    } //for
  } //func 

  void addText(String pushText) {
    // add new text before the old text with a line break 
    text = pushText
      +"\n"
      +text;
  }

  void clearText() {
    text = "";
  }
  //
}//class 
//

```

[Next page](https://discourse.processing.org/t/auto-adjusting-list/13091.md?page=2)