Increasing Ellipses loop (Mandala)

[humano]

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

[Chrisir]

I like this

Make a nice Church Window

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…

[Chrisir]

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

// -------------------------------------------------------------------------------------------------------------------------

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);
  }
}
//

[humano]

Thank you so much! But I was thinking about this

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

[JiyaHana]

Hey try this example too.

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

[humano]

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

[Chrisir]

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

// 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);

[humano]

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?

[Chrisir]

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
//

[humano]

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

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

[Chrisir]

you can reread my posts and combine them?

[humano]

I could try, but I dont understand

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++;

[Chrisir]

example

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 :

[humano]

I was thinking more about something simpler as

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

[Chrisir]

Good job. Congratulations!

[JiyaHana]

Ohh sorry, btw congratulation you got your solution.

[humano]

With that solution I can make an increasing separation between ellipses

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;
}

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

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

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?

[Chrisir]

you can use sinus

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

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

[humano]

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

[Chrisir]

more ellipses with the same maximal radius?

you need to play with the values for sin etc.

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");