Objects, texts and array - need help with arrange

Processing Coding Questions
1

Hey everyone :slight_smile:

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 :slight_smile:

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

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);
  
}
1 Like
2

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?

3

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 :smiley:
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. :slight_smile:

4

Don’t worry about it, you don’t sound silly :slight_smile: 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:

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 :wink: ).

1 Like
5

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 :slight_smile: