# Recursion Function or something different?

**URL:** <https://discourse.processing.org/t/recursion-function-or-something-different/11473>\
**Category:** Coding Questions\
**Created:** [May 21, 2019, 8:56pm UTC](https://discourse.processing.org/t/recursion-function-or-something-different/11473 "2019-05-21T20:56:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![champagnepapi](https://avatars.discourse-cdn.com/v4/letter/c/f0a364/32.png) [@champagnepapi](https://discourse.processing.org/u/champagnepapi)\
**Post date:** [May 21, 2019, 8:56pm UTC](https://discourse.processing.org/t/recursion-function-or-something-different/11473/1 "2019-05-21T20:56:38Z")

</div>

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 —\>

 ![b4ed9fa72d87c799c8da76c0aae67a44](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ecf8d4355d52a70da3f4eba948033a635db649a5.jpeg) 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

---

<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:** [May 21, 2019, 10:58pm UTC](https://discourse.processing.org/t/recursion-function-or-something-different/11473/2 "2019-05-21T22:58:54Z")

</div>

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](https://processing.org/reference/textAscent_.html)

---

<div class="post-metadata">

**Author:** ![champagnepapi](https://avatars.discourse-cdn.com/v4/letter/c/f0a364/32.png) [@champagnepapi](https://discourse.processing.org/u/champagnepapi)\
**Post date:** [May 22, 2019, 12:45am UTC](https://discourse.processing.org/t/recursion-function-or-something-different/11473/3 "2019-05-22T00:45:17Z")

</div>

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

---

<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:** [May 22, 2019, 1:07am UTC](https://discourse.processing.org/t/recursion-function-or-something-different/11473/4 "2019-05-22T01:07:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 22, 2019, 1:30am UTC](https://discourse.processing.org/t/recursion-function-or-something-different/11473/5 "2019-05-22T01:30:46Z")

</div>

> [@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

```auto
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

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [May 22, 2019, 8:22am UTC](https://discourse.processing.org/t/recursion-function-or-something-different/11473/6 "2019-05-22T08:22:22Z")

</div>

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

```auto
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

```auto
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);
}

```

![Screenshot%20from%202019-05-22%2016-01-04](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8ceaed975b522853e3ea11ae6ae7837b090a1a52.png)

---

<div class="post-metadata">

**Author:** ![champagnepapi](https://avatars.discourse-cdn.com/v4/letter/c/f0a364/32.png) [@champagnepapi](https://discourse.processing.org/u/champagnepapi)\
**Post date:** [May 22, 2019, 6:34pm UTC](https://discourse.processing.org/t/recursion-function-or-something-different/11473/7 "2019-05-22T18:34:22Z")

</div>

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