# Objects, texts and array - need help with arrange

**URL:** <https://discourse.processing.org/t/objects-texts-and-array-need-help-with-arrange/12058>\
**Category:** Coding Questions\
**Created:** [June 14, 2019, 7:23am UTC](https://discourse.processing.org/t/objects-texts-and-array-need-help-with-arrange/12058 "2019-06-14T07:23:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![patrushka](https://avatars.discourse-cdn.com/v4/letter/p/e95f7d/32.png) [@patrushka](https://discourse.processing.org/u/patrushka)\
**Post date:** [June 14, 2019, 7:23am UTC](https://discourse.processing.org/t/objects-texts-and-array-need-help-with-arrange/12058/1 "2019-06-14T07:23:06Z")

</div>

Hey everyone 🙂

i am new to processing and starting to work with arrays, I want to make a nice typography poster with it.  
so I thought it would look cool to place some objects on the poster, but the problem now is, they always lay above the text, I tried really a lot but I do not get why it’s always laying above the text.  
I think there will be a really logical solution for that but you have to help me 🙂

Here is the code (text is in german, please do not wonder):

```auto
PFont font;

int y = 405;
int x = 0;

String [] a = {"Harald Bayer", "Bauhaus", "Harald Bayer", "Bauhaus", "A"};
String [] b = {"Harald Bayer", "Bauhaus", "Harald Bayer", "Bauhaus", "B"};
String [] c = {"Harald Bayer", "Bauhaus", "Harald Bayer", "Bauhaus", "C"};
String [] d = {"Harald Bayer", "Bauhaus", "Harald Bayer", "Bauhaus", "D"};

void write_1 (String [] a){
int n = int(random(a.length));
noFill();
text(a[n], random(x, 50), y+300);
textSize(random(10,50));
y = y + 40;
}

void write_2 (String [] b){
int m = int(random(b.length));
noFill();
text(b[m], random(x-60, 50), y+400);
textSize(random(50,150));
y = y + 50;
}

void write_3 (String [] c){
int o = int(random(c.length));
noFill();
text(c[o], random(x-100, 50), y+100);
textSize(random(50,150));
y = y + 30;
}

void write_4 (String [] d){
int f = int(random(d.length));
noFill();
text(d[f], random(x-50, 50), y-100);
textSize(random(50,150));
y = y + 10;
}

void satz_schreiben(){
  background(#FFFFFF);
  y=100;
  write_1(a);
  write_2(b);
  write_3(c);
  write_4(d);
}

void draw(){
}

void setup(){
  background(#FFFFFF);
  font=createFont("bauhaus.ttf",1);
  textFont(font,300);
  size(586,810);
  noFill();
  satz_schreiben();
}

void mousePressed(){
  fill(#ff0000);
  fill(255,0,0,127);
  satz_schreiben();
  grafik();
}

void grafik(){
  noStroke();
  //fill(255,0,0,127);
  fill(#000000);
  fill(255,0,0,127);
  ellipse(random(405,-405),random(100,400),300,300);
  
  fill(#000000);
  fill(255,0,0,255);
  noStroke();
  rect(240,550,300,150);
  
  stroke(#000000);
  //fill(#000000);
  strokeCap(SQUARE);
  strokeWeight(20);
  fill(255,0,0,127);
  line(405,20,405,780);
  
}

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [June 14, 2019, 8:40am UTC](https://discourse.processing.org/t/objects-texts-and-array-need-help-with-arrange/12058/2 "2019-06-14T08:40:09Z")

</div>

Guten morgen Patrushka,

Your thinker is correct, there’s quite a logical solution to your problem. Whenever code is being executed it goes from left to right, and then advances to the line of code right beneath it. If a function gets called along the way, it jumps to that function. After it’s executed it jumps straight back to the line where it was called, to pick up where he left.

Use this principle to trace the path your computer goes through when you press the mouse button. Can you locate where the code isn’t working as you intended?

---

<div class="post-metadata">

**Author:** ![patrushka](https://avatars.discourse-cdn.com/v4/letter/p/e95f7d/32.png) [@patrushka](https://discourse.processing.org/u/patrushka)\
**Post date:** [June 14, 2019, 1:10pm UTC](https://discourse.processing.org/t/objects-texts-and-array-need-help-with-arrange/12058/3 "2019-06-14T13:10:37Z")

</div>

Hey Tiemen,

thanks for your replay, I checked the code, I am not completely get what you mean, I am sorry, I do not want to sound silly 😃  
what have I done wrong? why are the objects in the front and not behind the words? could you explain it a little bit more for me, what i should change in my code? … so I know it for the next time?  
would be such a big help. 🙂

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [June 14, 2019, 1:46pm UTC](https://discourse.processing.org/t/objects-texts-and-array-need-help-with-arrange/12058/4 "2019-06-14T13:46:07Z")

</div>

Don’t worry about it, you don’t sound silly 🙂 Hopefully my previous post will make more sense if I show you an example and thereafter relate it to the issue in your sketch.

**Simple example**  
Try out the following code in a new Processing sketch:

```auto
rectMode(CENTER);

// draw a red rectangle
fill(255, 0, 0);
rect(width / 2, height / 2, 50, 50);

// draw a green circle
fill(0, 255, 0);
ellipse(width / 2, height / 2, 50, 50);

```

You’ll see that the red rectangle isn’t fully visible (only its corners), because the green circle is placed on top of it. It’s placed there, because code executes from top to bottom:

1. Set rectMode to center
2. Use a red color
3. Draw a rectangle
4. Use a green color
5. Draw a circle

If you would switch the lines of _rect_ and _ellipse_ around, the rectangle would be the one on top.

**Your code**  
When you click the mouse you redraw your poster design. The first function that’s called, _satz\_schreiben()_, makes the background white, sets the y value to 100, and then calls four other functions (_write\_1(a)_, _write\_2(b)_, etc).

After these steps are completed, your code jumps back to _void mousePressed()_ to execute the rest of the code. In your sketch the remaining code in _void mousePressed()_ is calling the function _grafik()_, which you use to draw shapes.

Compare your problem with the simple example; do you now understand what’s causing the issue? Because you call _grafik()_ **after** _satz\_schreiben()_, the shapes get placed **on top** of it. So swapping these two around should solve your current problem (yet create a new one, but that’s part of the fun 😉 ).

---

<div class="post-metadata">

**Author:** ![patrushka](https://avatars.discourse-cdn.com/v4/letter/p/e95f7d/32.png) [@patrushka](https://discourse.processing.org/u/patrushka)\
**Post date:** [June 14, 2019, 6:15pm UTC](https://discourse.processing.org/t/objects-texts-and-array-need-help-with-arrange/12058/5 "2019-06-14T18:15:18Z")

</div>

ahhhhh…  
you are so right haha, and it was so logical, thank you very much. sometimes you just do not see the problem even if its so simple.  
thanks for your help and your explaination 🙂