Recursion Function or something different?

[champagnepapi]

Hey, so I am fairly new to processing, my main area of interested is using processing to achieve effects which are primarily using typography. Recently I stumbled upon the following image —>

and it seems after a good few hours I’m unable to solve how to do it for myself. I approached making my own using the recursion function and it hasn’t been entirely successful. Does anyone know how exactly to code for this effect? Alternative approaches? Each row adds 1 extra word and consequently reduces each item on the line in size. I know it’s probably simple, I’m just inexperienced and can’t figure out how to input it the correct way into processing language. Hope you can help, please give me an example code for this! I would appreciate it

[Chrisir]

No recursion needed

Just make a while loop (or use draw() itself), duplicating the String and half the size and add something to x value for text() every time

Repeat until x>height

Duplicate:
Eg. myText =
myText+myText;

See

https://processing.org/reference/textAscent_.html

[champagnepapi]

Thank you so much. However I am still struggling haha, could you further explain your example? I’m sorry

[Chrisir]

Just show your attempt with setup and draw

and a Variable for the String myText and one for the mytextSize and myX and for the boolean myStopFlag

[quark]

@Chrisir

Repeat until x>height

I would not recommend this for your stopping criteria. The text height is reduced for each line your loop might repeat thousands of times before the text reaches the bottom of the screen.

If we assume that the topmost line is numbered 1 and the text height for line 1 is th then the text height for any line is given by th/n where n is the line number.

So create a simple loop
If we that the height of the text in the topmost line is th

So a simple algorithm would be

initialize the cumulative vertical displacement (`cvd`) to zero
initialize the text height ('th') based on height for line 1
for n = 1 to numberOfLines
    calculate the text height for this line 'cth = th/n'
    calculate the vertical position 'cvd = cvd + cth'
    draw the text 'n' times at this height 'cth' and this y position 'cvd'
end for

text size

[humayung]

Heres my approaches,
this code is Hard Coded and dirty. lol.
it is not scalable, but atleast you get the idea

void setup(){
  background(255);
  size(600, 600);
  x = 0;
  y = size;
  fill(0);
  textAlign(LEFT, LEFT);
}

float size = 128;
float x = 0;
float y;
float amt = 0.35;
void draw(){
  textSize(size);
  for(int i = 0; i < width/(size*2); i++){
    text("text", x + i*size*2, y);
  }
  
  y += size/2;
  size = lerp(size, 0, amt);
  amt = lerp(amt, 0, 0.13);
}

edit:
better version, but you should generate text.png first with zero padding

void setup() {
  background(255);
  size(540, 600);
  image = loadImage("text.png");
}

PImage image;
float y;
float amt = 0.2;
float scale = 0.5;
void draw() {
  for (int i = 0; i < width; i+= image.width*scale) {
    pushMatrix();
    translate(i, y);
    scale(scale);
    image(image, 0, 0);
    popMatrix();
  }
  y+= image.height*scale;
  scale = lerp(scale, 0, amt);
  amt = lerp(amt, 0, 0.07);
}

[champagnepapi]

Thank you very much, I understand it now. This was very useful. You the goat