# Increasing Ellipses loop (Mandala)

**URL:** <https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640>\
**Category:** Coding Questions\
**Created:** [January 7, 2024, 9:24pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640 "2024-01-07T21:24:17Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 7, 2024, 9:24pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/1 "2024-01-07T21:24:17Z")

</div>

Hello! I am trying to draw a mandala with a lot of ellipses in the middle and a few in the outer part. i mean, I am looking for something as a increasing growing separation, to get more concentration of ellioses in the center, but with a for loop I can only give a fixed value to the separation between ellipses. So hoy could I change that? Thanks!

\<size (500,500);  
ellipseMode(CENTER);  
noFill();  
for(int i=0; i\<400; i=i+5) {  
ellipse(random(240,260),random(240,260),i+random(50),i+random(50));  
}\>

---

<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:** [January 7, 2024, 10:05pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/2 "2024-01-07T22:05:19Z")

</div>

I like this

> [@Make a nice Church Window](https://discourse.processing.org/t/make-a-nice-church-window/43022/1):
>
> small drawing program with a robot arm with a pen at its end. a lot of experiments possible: the 2 radii and the 2 speeds with which the angles change color… // A robot arm rotates with a pen at its end. // Hold mouse to hide arm. // Arm part 1 from middle of the screen to x1,y1, rotating. // Arm part 2 from x1,y1 to x2,y2, rotating around x1,y1. // pen is at x2,y2. // float x1, y1, x2, y2, angle1, angle2; float angle1Speed = 0.025; float angle2Speed = 0.0521; float rad1 = 100; // g…

---

<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:** [January 7, 2024, 10:07pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/3 "2024-01-07T22:07:30Z")

</div>

On a serious note: you can calculate the center of the ellipse with cos and sin and increase the radius and draw the ellipses with different sizes

```auto
// -------------------------------------------------------------------------------------------------------------------------

void setup() {
  size(1900, 1000);
}

void draw() {
  background(211);

  ellipseMode(CENTER);
  noFill();

  //center
  ellipse(width/2, height/2, 40, 40);

  // first series
  float rad1 = 20+25;
  float step = 360 / float(8);
  for (int i=0; i<8; i++) {

    float x= cos(radians(step*i)) * rad1 + width/2;
    float y= sin(radians(step*i)) * rad1 + height/2;

    ellipse(x, y, 50, 50);
  }

  // 2nd series
  rad1 = 20+25+30+25-9;
  step = 360 / float(12);
  for (int i=0; i<12; i++) {

    float x= cos(radians(step*i)+0.32) * rad1 + width/2;
    float y= sin(radians(step*i)+0.32) * rad1 + height/2;

    ellipse(x, y, 60, 60);
  }

  // 3rd series
  rad1 = 20+25+30+25-9+35+12+12;
  step = 360 / float(14);
  for (int i=0; i<14; i++) {

    float x= cos(radians(step*i)+0.32) * rad1 + width/2;
    float y= sin(radians(step*i)+0.32) * rad1 + height/2;

    ellipse(x, y, 70, 70);
  }

  // 4th series
  rad1 = 20+25+30+25-9+35+12+12+40+15+12+3;
  step = 360 / float(16);
  for (int i=0; i<16; i++) {

    float x= cos(radians(step*i)+0.32) * rad1 + width/2;
    float y= sin(radians(step*i)+0.32) * rad1 + height/2;

    ellipse(x, y, 80, 80);
  }

  // 5th series
  rad1 = 20+25+30+25-9+35+12+12+40+15+12+3+50+25+9;
  step = 360 / float(18);
  for (int i=0; i<18; i++) {

    float x= cos(radians(step*i)+0.32) * rad1 + width/2;
    float y= sin(radians(step*i)+0.32) * rad1 + height/2;

    ellipse(x, y, 90, 90);
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 7, 2024, 11:44pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/4 "2024-01-07T23:44:31Z")

</div>

Thank you so much! But I was thinking about this

 ![Screenshot_2024-01-07-19-02-51-857_com.miui.gallery-edit](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/7/e7e809c8fb44c35661e3a794f4d15b3c137a9587.jpeg)

In my sketch ellipses have a 5 px separation, but I am trying to draw a loop with a progresive increasing separation, as you can see in my doodle

---

<div class="post-metadata">

**Author:** ![JiyaHana](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jiyahana/32/19209_2.png) [@JiyaHana](https://discourse.processing.org/u/JiyaHana)\
**Post date:** [January 8, 2024, 9:46am UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/5 "2024-01-08T09:46:47Z")

</div>

Hey try this example too.

```auto
<size (500, 500);
ellipseMode(CENTER);
noFill();
for (int i = 0; i < 400; i = i + int(random(1, 10))) {
  ellipse(random(240, 260), random(240, 260), i + random(50), i + random(50));
}
>

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 8, 2024, 11:47am UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/6 "2024-01-08T11:47:42Z")

</div>

I see, but I am looking for an increasing separation between ellipses, not a random one

---

<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:** [January 8, 2024, 12:00pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/7 "2024-01-08T12:00:10Z")

</div>

> [@humano](#):
>
> increasing separation between ellipses,

Do you want the separation still be random?

you need to store the x- and y-radius `xRadtotal, yRadtotal` of the ellipses.

When you make a new ellipse, the new values become `xRadtotal, yRadtotal` .

Thus you have a record of the size in total you have up to now.

Now, the next radius is random but it needs to be between xRadtotal and a relative maximum, let’s say 110 :

```auto
// make sure the new radius is bigger than the last one 
float newRadiusX = random (xRadtotal+1, xRadtotal + 1 + 110); 
float newRadiusY = ................;

xRadtotal = newRadiusX ; // store 
ellipse (..., ..., newRadiusX , newRadiusY);

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 8, 2024, 12:27pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/8 "2024-01-08T12:27:58Z")

</div>

But i dont want a random separation between ellipses, i want an increasing one

> for(int i=0; i\<400; i=i+5)

Yo can see in my loop there is an ellipse every 5 px but I want 1 px between the first and the second one, then 2 px between the second and the third one, then 3 px between the third and the fourth… Could you help with that?

---

<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:** [January 8, 2024, 2:09pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/9 "2024-01-08T14:09:34Z")

</div>

```auto

float rad=111;
float radAdd = 1;

size (500, 500);
ellipseMode(CENTER);
noFill();

for (int i=0; i<400; i+=5) {
  ellipse(width/2, height/2, rad, rad);

  rad+=radAdd;
  radAdd++;
}//for
//

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 8, 2024, 4:59pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/10 "2024-01-08T16:59:55Z")

</div>

Thanks again @Chrisir , but see that on my code ellipses are not all the same, I gave them some different sizes with a bit of random width and random height.

> ellipse(width/2, height/2, i+random(50), i+random(50));

Without changing this, is this 5 px you see on my loop what I want to make increasing somehow

> for (int i=0; i\<400; i+=5)

I am looking for a different approach, but I don’t find the way

```auto
size (500, 500);
ellipseMode(CENTER);
noFill();

for (int i=0; i<400; i+=5) {
  ellipse(width/2, height/2, i+random(50), i+random(50));
 
}

```

---

<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:** [January 8, 2024, 5:04pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/11 "2024-01-08T17:04:41Z")

</div>

you can reread my posts and combine them?

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 8, 2024, 5:44pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/12 "2024-01-08T17:44:34Z")

</div>

I could try, but I dont understand

```auto
float newRadiusX = random (xRadtotal+1, xRadtotal + 1 + 110); 
float newRadiusY = 1;

xRadtotal = newRadiusX ; // store 
ellipse (width/2, height/2, newRadiusX , newRadiusY);

float rad=111;
float radAdd = 1;

size (500, 500);
ellipseMode(CENTER);
noFill();

for (int i=0; i<400; i+=5) {
  ellipse(width/2, height/2, rad, rad);

  rad+=radAdd;
  radAdd++;

```

---

<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:** [January 8, 2024, 6:12pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/13 "2024-01-08T18:12:59Z")

</div>

example

```auto
size (500, 500);

int i_add=5;

ellipseMode(CENTER);
noFill();

for (int i=0; i<400; i+=i_add) {
  ellipse(width/2, height/2, i+random(50), i+random(50));
  i_add += 1;
}

```

here instead of 5 in the for-loop we simply increase the value `i_add`

* * *

so many things here to discuss, so little time

do you want to avoid that the ellipses overlap?? Yes or no?

when the center is random, anything can happen. So I made the center fixed. Ok for you?

* * *

you wrote

> [@humano](#):
>
> I see, but I am looking for an increasing separation between ellipses, not a random one

and

> [@humano](#):
>
> but see that on my code ellipses are not all the same, I gave them some different sizes with a bit of random width and random height.

**contradiction?**

* * *

Did you try this?

> [@Chrisir](#):
>
> you need to store the x- and y-radius `xRadtotal, yRadtotal` of the ellipses.
> 
> When you make a new ellipse, the new values become `xRadtotal, yRadtotal` .
> 
> Thus you have a record of the size in total you have up to now.
> 
> Now, the next radius is random but it needs to be between xRadtotal and a relative maximum, let’s say 110 :

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 8, 2024, 6:40pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/14 "2024-01-08T18:40:09Z")

</div>

I was thinking more about something simpler as

```auto

size (500, 500);

ellipseMode(CENTER);
noFill();

for (int i=0,w=0; i<500; i+=10+w) {
  ellipse(width/2, height/2, i, i);
  w=w+10;

}

```

Then I woud change some details about size and position

---

<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:** [January 8, 2024, 9:25pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/15 "2024-01-08T21:25:09Z")

</div>

Good job. Congratulations!

---

<div class="post-metadata">

**Author:** ![JiyaHana](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jiyahana/32/19209_2.png) [@JiyaHana](https://discourse.processing.org/u/JiyaHana)\
**Post date:** [January 9, 2024, 6:23am UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/16 "2024-01-09T06:23:16Z")

</div>

Ohh sorry, btw congratulation you got your solution.

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 9, 2024, 7:48pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/17 "2024-01-09T19:48:57Z")

</div>

With that solution I can make an increasing separation between ellipses

```auto
size (1000, 1000);
ellipseMode(CENTER);
noFill();
strokeWeight(1);
for (int j=0,a=0; j<500; j+=1+a) {
  ellipse(500,500, j, j);
  a=a+1;
}

```

 ![IMG_20240109_150639](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/7/67be21bf90b01ccb7fb907230f1669d30b7127c7.jpeg)

It is my first step, but I need much more ellipses (problem 1) and a small increasing of separation in the center and a big one in the outer part (problem 2), because the center has to be really full and the exterior has to be lighter. So I have done this other version

```auto
size (1000, 1size (1000, 1000);
ellipseMode(CENTER);
noFill();
strokeWeight(1);

for (int j=0,a=0; j<100; j+=1+a) {
  ellipse(500,500, j, j);
  a=a+1;
}

for (int k=0, b=0; k<200; k+=1+b){
  ellipse(500,500, k,k);
  b=b+5/4;
} 

for (int l=0, c=0; l<300; l+=1+c){
ellipse(500,500, l,l);
c=c+3/2;
}

for (int m=0, d=0; m<400; m+=1+d){
ellipse(500,500, m,m);
d=d+7/4;
}

for (int n=0, e=0; n<500; n+=1+e){
ellipse(500,500, n,n);
e=e+2;
}

```

So the appearance is similar to the drawing I was looking for

 ![IMG_20240109_150742](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/8/c84a885f54db1a8144612583ce7ca68d434a080d.jpeg)

But as you can see it is a blunder, because the growing of the separation is not fluent, as I would prefer, so is there a clean and easy way to get something like this?

---

<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:** [January 9, 2024, 8:19pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/18 "2024-01-09T20:19:03Z")

</div>

you can use sinus

```auto

size (2000, 1000);

float a=2.11;

ellipseMode(CENTER);
noFill();
strokeWeight(1);
int i=0;

for (int j=1; j<1500; j+=a) {
  ellipse(500, 500, j, j);
  a = sin(radians(i))*180;
  i+=3;
  point(i, a);
  println(a);
}
println("done");

```

as you can see, what we add gets bigger

```auto
0.0
9.420472
18.815125
28.158205
37.424107
46.58743
55.623062
64.50623
73.21259
81.718285
90.0
98.03503
105.801346
113.27767
120.44351
127.27922
133.76608
139.88626
145.62306
150.9607
done

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [January 9, 2024, 8:29pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/19 "2024-01-09T20:29:22Z")

</div>

But how could I draw much more ellipses?  
Even i+=1 are so few

---

<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:** [January 9, 2024, 8:45pm UTC](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640/20 "2024-01-09T20:45:40Z")

</div>

more ellipses with the same maximal radius?

you need to play with the values for sin etc.

```auto
size (2000, 1000);

float a=2.11;

ellipseMode(CENTER);
noFill();
strokeWeight(1);

int i=0;

for (int j=1; j<1500; j+=a) {
  ellipse(500, 500, j, j);
  a = sin(radians(i))*24;
  i+=1.0;
  point(i, a);
  println(a);
}
println("done");

```

[Next page](https://discourse.processing.org/t/increasing-ellipses-loop-mandala/43640.md?page=2)