# How to pace the appearance of recursion objects?

**URL:** https://discourse.processing.org/t/how-to-pace-the-appearance-of-recursion-objects/748
**Category:** Coding Questions
**Created:** [June 6, 2018, 4:00am UTC](https://discourse.processing.org/t/how-to-pace-the-appearance-of-recursion-objects/748 "2018-06-06T04:00:21Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![rolando](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rolando/32/324_2.png) [@rolando](https://discourse.processing.org/u/rolando)
#### Post date: [June 6, 2018, 4:00am UTC](https://discourse.processing.org/t/how-to-pace-the-appearance-of-recursion-objects/748/1 "2018-06-06T04:00:22Z")

</div>

Hello all,  
This follows up on my previous post still associated with a fractal project Im currently working on.  
I am aware that the following question may involve arraylists of which Im not yet familiar with, Im hoping to get there pretty soon but I would appreciate some guidance on how to make the recursion objects appear one after the other…  
Thanks!

```auto
PShape s; // The PShape object - Cube
int a = 500; // Declare variable - Radious Cube
float b = a * sqrt(3) / 2; // Height of triangle
float c = a * 2 / 3; // Circle02 Radious - 7Days of Creation

float f = c * cos(radians(30));
float g = c * cos(radians(60));

void setup() {
   size(1920, 1280);
   background(255);
   stroke(0); 
   strokeWeight(1);
   frameRate(50);
   
  s = createShape(); //Cube Outline
  s.beginShape();
  s.noFill();
  s.stroke(0);
  s.vertex(width/2, height/2-a);
  s.vertex(width/2+b, height/2-a/2);
  s.vertex(width/2+b, height/2+a/2);
  s.vertex(width/2, height/2+a);
  s.vertex(width/2-b, height/2+a/2);
  s.vertex(width/2-b, height/2-a/2);
  s.endShape(CLOSE);
}

void draw() {

 // ----------------Draw Cube-------------- 
  shape(s); //Cube Outline

  
//------------------Centre Base Circles --------------
  drawCircle(width/2,height/2, c);
  drawCircle(width/2,height/2-c, c);
  drawCircle(width/2,height/2+c, c);
  drawCircle(width/2+f,height/2-g, c);
  drawCircle(width/2+f,height/2+g, c);
  drawCircle(width/2-f,height/2-g, c);
  drawCircle(width/2-f,height/2+g, c);
}

void drawCircle(float x, float y, float radius) {
  stroke(0);
  noFill();
  ellipse(x, y, radius, radius);
  if(radius > 20) {
    drawCircle(x, y, radius/4); 
    drawCircle(x, y + radius/4, radius/4);
    drawCircle(x, y - radius/4, radius/4);
    drawCircle(x + radius/4 * cos(radians(30)), y - radius/4 * cos(radians(60)), radius/4);
    drawCircle(x + radius/4 * cos(radians(30)), y + radius/4 * cos(radians(60)), radius/4);
    drawCircle(x - radius/4 * cos(radians(30)), y - radius/4 * cos(radians(60)), radius/4);
    drawCircle(x - radius/4 * cos(radians(30)), y + radius/4 * cos(radians(60)), radius/4);  
    drawCircle(x, y + radius/2, radius/4);
    drawCircle(x, y - radius/2, radius/4);
    drawCircle(x + radius/2 * cos(radians(30)), y - radius/2 * cos(radians(60)), radius/4);
    drawCircle(x + radius/2 * cos(radians(30)), y + radius/2 * cos(radians(60)), radius/4);
    drawCircle(x - radius/2 * cos(radians(30)), y - radius/2 * cos(radians(60)), radius/4);
    drawCircle(x - radius/2 * cos(radians(30)), y + radius/2 * cos(radians(60)), radius/4);
    }
}

```

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 6, 2018, 6:22pm UTC](https://discourse.processing.org/t/how-to-pace-the-appearance-of-recursion-objects/748/2 "2018-06-06T18:22:13Z")

</div>

Maybe like this ?  
Tell me if it is too complicated 😉

```auto
PShape s; // The PShape object - Cube
int a = 500; // Declare variable - Radious Cube
float b = a * sqrt(3) / 2; // Height of triangle
float c = a * 2 / 3; // Circle02 Radious - 7Days of Creation

float f = c * cos(radians(30));
float g = c * cos(radians(60));

int nb = 0;
int maxVal = 5000;
ArrayList<Circle> array;
int index = 0;
int time = 0;
int timeValue = 1;

void setup() {
  fullScreen();
  background(255);
  stroke(0);
  strokeWeight(1);
  //frameRate(50);

  s = createShape(); //Cube Outline
  s.beginShape();
  s.noFill();
  s.stroke(0);
  s.vertex(width/2, height/2-a);
  s.vertex(width/2+b, height/2-a/2);
  s.vertex(width/2+b, height/2+a/2);
  s.vertex(width/2, height/2+a);
  s.vertex(width/2-b, height/2+a/2);
  s.vertex(width/2-b, height/2-a/2);
  s.endShape(CLOSE);
  
  array = new ArrayList<Circle>();
}

void draw() {
  
  if (nb<maxVal){
    // ----------------Draw Cube--------------
    shape(s); //Cube Outline
  
    //------------------Centre Base Circles --------------
    drawCircle(width/2, height/2, c);
    drawCircle(width/2, height/2-c, c);
    drawCircle(width/2, height/2+c, c);
    drawCircle(width/2+f, height/2-g, c);
    drawCircle(width/2+f, height/2+g, c);
    drawCircle(width/2-f, height/2-g, c);
    drawCircle(width/2-f, height/2+g, c);
  }else{
    
    if (millis()-time > timeValue && index<array.size()){
      array.get(index).display();
      time = millis();
      index++;
    }
  }
}

void drawCircle(float x, float y, float radius) {
  if (nb < maxVal){
    nb++;
    
    array.add(new Circle(x,y,radius));
    
    if (radius > 20) {
      drawCircle(x, y, radius/4);
      drawCircle(x, y + radius/4, radius/4);
      drawCircle(x, y - radius/4, radius/4);
      drawCircle(x + radius/4 * cos(radians(30)), y - radius/4 * cos(radians(60)), radius/4);
      drawCircle(x + radius/4 * cos(radians(30)), y + radius/4 * cos(radians(60)), radius/4);
      drawCircle(x - radius/4 * cos(radians(30)), y - radius/4 * cos(radians(60)), radius/4);
      drawCircle(x - radius/4 * cos(radians(30)), y + radius/4 * cos(radians(60)), radius/4);
      drawCircle(x, y + radius/2, radius/4);
      drawCircle(x, y - radius/2, radius/4);
      drawCircle(x + radius/2 * cos(radians(30)), y - radius/2 * cos(radians(60)), radius/4);
      drawCircle(x + radius/2 * cos(radians(30)), y + radius/2 * cos(radians(60)), radius/4);
      drawCircle(x - radius/2 * cos(radians(30)), y - radius/2 * cos(radians(60)), radius/4);
      drawCircle(x - radius/2 * cos(radians(30)), y + radius/2 * cos(radians(60)), radius/4);
    }
  }else{
    return;
  }
}

class Circle{
  float x,y,radius;
  
  Circle(float xx,float yy,float rad){
    x = xx;
    y = yy;
    radius = rad;
  }
  
  void display(){
    stroke(0);
    noFill();
    ellipse(x, y, radius, radius);
  }
}

```

Explanation :

- Create a `Circle` class which stores coordinates and radius of an ellipse and add a `display` function to draw it
- Initialize an `ArrayList` which will store all you Circles
- Do the recursion and each time you call the function `DrawCircle`, add a `Circle` in your ArrayList `array`
- When you finished to store all your ellipses (for exemple 5000) start to draw them one by one in the draw function with a time interval (`timeVal`)

---

<div class="post-metadata">

### Author: ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)
#### Post date: [June 6, 2018, 6:32pm UTC](https://discourse.processing.org/t/how-to-pace-the-appearance-of-recursion-objects/748/3 "2018-06-06T18:32:06Z")

</div>

@josephh Please don’t just provide full code solutions without an explanation. Instead, try to walk people through the process of solving their own problems. That’s much more helpful for people who aren’t sure how to proceed!

@rolando One thing you might consider is adding `int maxLevel` and `int currentLevel` arguments to your `drawCircle`. Only make recursive calls to `drawCircle()` if `currentLevel` is less than `maxLevel`. That might sound confusing, but it generally looks like this:

```auto
int currentMaxLevel = 1;

void draw(){
  drawCircle(0, currentMaxLevel);
}

void drawCircle(int currentLevel, int maxLevel){
  //draw your circle

  if(currentLevel < maxLevel){
    drawCircle(currentLevel + 1, maxLevel);
  }
}

```

Then you can increase the `currentMaxLevel` over time to draw more levels of recursion.

If you’re still confused, please try to narrow your problem down to a [MCVE](https://stackoverflow.com/help/mcve) instead of posting your whole program.

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 6, 2018, 7:37pm UTC](https://discourse.processing.org/t/how-to-pace-the-appearance-of-recursion-objects/748/4 "2018-06-06T19:37:34Z")

</div>

> [@Kevin](#):
>
> Please don’t just provide full code solutions without an explanation. Instead, try to walk people through the process of solving their own problems. That’s much more helpful for people who aren’t sure how to proceed!

You are absolutly right I’m sorry.

---

<div class="post-metadata">

### Author: ![rolando](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rolando/32/324_2.png) [@rolando](https://discourse.processing.org/u/rolando)
#### Post date: [June 6, 2018, 7:48pm UTC](https://discourse.processing.org/t/how-to-pace-the-appearance-of-recursion-objects/748/5 "2018-06-06T19:48:00Z")

</div>

Thank you both!

@josephh Its very close to what I am looking for! Thank you and even without an explicit explanation I was able to interrogate and learn through your answer. Im currently delving into ArrayLists and I am hoping to get the logic of your code.

@Kevin Would you care to elaborate a little more on how these proposed arguments (currentLevel and maxLevel) interact with my existing drawCircle variables? The way I set it up, the function drawCircle calls for the center and the diameter of the circle, if I replace them, where do I control the geometry from?

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 6, 2018, 7:56pm UTC](https://discourse.processing.org/t/how-to-pace-the-appearance-of-recursion-objects/748/6 "2018-06-06T19:56:45Z")

</div>

@rolando

> [@rolando](#):
>
> Im currently delving into ArrayLists and I am hoping to get the logic of your code.

ArrayLists aren’t complicated at all, check :

- [ArrayList / Reference / Processing.org](https://processing.org/reference/ArrayList.html)

---

<div class="post-metadata">

### Author: ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)
#### Post date: [June 6, 2018, 8:37pm UTC](https://discourse.processing.org/t/how-to-pace-the-appearance-of-recursion-objects/748/7 "2018-06-06T20:37:20Z")

</div>

> [@rolando](#):
>
> Would you care to elaborate a little more on how these proposed arguments (currentLevel and maxLevel) interact with my existing drawCircle variables?

The code in my answer is just a partial example. The level variables wouldn’t replace your position or diameter variables- they would all be included.

There are a bunch of different ways to approach this though.