# Use of for-loop to create a stair of ellipses

**URL:** <https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271>\
**Category:** Coding Questions\
**Created:** [December 15, 2020, 4:17pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271 "2020-12-15T16:17:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 15, 2020, 4:17pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/1 "2020-12-15T16:17:53Z")

</div>

![螢幕截圖 2020-12-16 上午12.12.14](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f7a4f49d5b5d034543b0fd071c0037e0ea6f1163.png)

Do someone know how to create the pattern with loops?

---

<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:** [December 15, 2020, 4:24pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/2 "2020-12-15T16:24:13Z")

</div>

> [@Jayda](#):
>
> pattern

Of course.

But please: Use two for loops and show your attempt

Hey! And welcome to the forum! Great to have you here!

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 15, 2020, 5:07pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/3 "2020-12-15T17:07:53Z")

</div>

Hi Chrisir

 ![螢幕截圖 2020-12-16 上午1.05.57](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1b38d82d77f04c0089f033c121e535f9f07970a0.png)

Great to meet you!  
I have tried to use two loops but…

Jay

---

<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:** [December 15, 2020, 5:12pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/4 "2020-12-15T17:12:46Z")

</div>

Yeah, you got it almost…

think again: How often do you want one row to be filled on the screen?

Think of a chess board with rows and columns.

---

<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:** [December 15, 2020, 5:17pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/5 "2020-12-15T17:17:33Z")

</div>

you want to draw a circle row times **and in each row** column times

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 15, 2020, 5:20pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/6 "2020-12-15T17:20:19Z")

</div>

That’s mean I need to draw circle in each row/ column ?

---

<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:** [December 15, 2020, 5:20pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/7 "2020-12-15T17:20:44Z")

</div>

Yes, that does it mean

Chrisir

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 15, 2020, 5:24pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/8 "2020-12-15T17:24:42Z")

</div>

Thank you very much!

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 15, 2020, 5:25pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/9 "2020-12-15T17:25:26Z")

</div>

Maybe next time I should clarify clearly about the way of drawing.

---

<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:** [December 15, 2020, 5:30pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/10 "2020-12-15T17:30:01Z")

</div>

show your entire code, does it work now?

---

<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:** [December 15, 2020, 5:31pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/11 "2020-12-15T17:31:10Z")

</div>

Your graphic was pretty clear, I just didn’t want to give you the solution right away but let you find the solution on your own… apologies… 😉

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 15, 2020, 5:45pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/12 "2020-12-15T17:45:08Z")

</div>

okay~  
long and repetitive code XDD

 ![螢幕截圖 2020-12-16 上午1.43.19](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b3e2f803820f3f0d59d58496eaec4b972fb88e99.png)

---

<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:** [December 15, 2020, 5:46pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/13 "2020-12-15T17:46:23Z")

</div>

No, no…

when you have several times **almost the same** three lines… think again…

You need two for-loops, one for-loop for the rows and in it one for-loop for the columns…

and only ONE line with ellipse() command…

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 15, 2020, 5:51pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/14 "2020-12-15T17:51:35Z")

</div>

Your teaching and inspiration is very good~

---

<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:** [December 15, 2020, 5:54pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/15 "2020-12-15T17:54:06Z")

</div>

Here is my way of doing it

That’s what I thought you meant first…

😉

```auto

float angle=1.4;

void setup() {
  size( 1800, 900, P3D );
} // setup

void draw() {
  background(0);
  lights();

  translate( width/2, 0, -300 );  
  rotateY(angle); 
  angle+=0.014;

  stair();

  drawFloor();

  //
} // draw

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

void stair() {
  //
  int x2=300;

  for (int x = height-111-44; x > height-111-633; x -= 66) {
    pushMatrix();

    stroke(111); 
    fill(0, 2, 222); // gray 
    // fill(222); 
    //noFill();

    translate ( x2, x, 0);
    x2-=66; 
    rotateX(radians(90)); 
    // box(66); 
    ellipse(0, 0, 
      180, 77); 
    popMatrix();
  }//for
  //
}

void drawFloor() {

  stroke(111); // gray 
  fill(255, 2, 2); // red
  float factor1=80.0; // dist between boxes

  translate(width/2, height/2, 0); 

  for (int x=-55; x<55; x+=2) {
    for (int z=-55; z<55; z+=2) {

      pushMatrix(); 
      translate(x*factor1 - (4*factor1/2), 
        height-111, 
        z*factor1 - (4*factor1/2) );
      box(factor1-5); // size of 40 (width, height and depth) 
      popMatrix();
    }
  }
}
//

```

---

<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:** [December 15, 2020, 5:59pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/16 "2020-12-15T17:59:36Z")

</div>

just a joke…

that won’t help you…

seriously your draw() only needs 8 lines approx.

---

<div class="post-metadata">

**Author:** ![Jayda](https://avatars.discourse-cdn.com/v4/letter/j/ecb155/32.png) [@Jayda](https://discourse.processing.org/u/Jayda)\
**Post date:** [December 15, 2020, 6:14pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/17 "2020-12-15T18:14:18Z")

</div>

XD  
It seems something about the relation between x and y

---

<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:** [December 15, 2020, 7:33pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/18 "2020-12-15T19:33:26Z")

</div>

one more…

```auto

float angle=1.4;

void setup() {
  size( 1800, 900, P3D );
} // setup

void draw() {
  background(0);
  lights();

  translate( width/2, 0, -300 );  
  rotateY(angle); 
  angle+=0.014;

  stair();

  drawFloor();

  //
} // draw

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

void stair() {
  //
  int x2=300;
  int a1=0; 

  for (int y = height-111; y > height-111-633-333-333; y -= 22) {
    pushMatrix();

    a1+=20;
    int r= 333; 

    float x1= cos(radians(a1)) * r;  
    float z1= sin(radians(a1)) * r;

    stroke(111); 
    fill(0, 2, 222); // gray 
    // fill(222); 
    //noFill();

    translate ( x1, y, z1);

    rotateX(radians(90)); 
    // box(66); 
    ellipse(0, 0, 
      180, 111); 
    popMatrix();
  }//for
  //
}

void drawFloor() {

  stroke(111); // gray 
  fill(255, 2, 2); // red
  float factor1=80.0; // dist between boxes

  translate(width/2, height/2, 0); 

  for (int x=-55; x<55; x+=2) {
    for (int z=-55; z<55; z+=2) {

      pushMatrix(); 
      translate(x*factor1 - (4*factor1/2), 
        height-111, 
        z*factor1 - (4*factor1/2) );
      box(factor1-5); // size of 40 (width, height and depth) 
      popMatrix();
    }
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![Sierra\_Alpha\_Romeo.P](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sierra_alpha_romeo.p/32/11571_2.png) [@Sierra\_Alpha\_Romeo.P](https://discourse.processing.org/u/Sierra_Alpha_Romeo.P)\
**Post date:** [December 15, 2020, 7:39pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/19 "2020-12-15T19:39:31Z")

</div>

He’s screaming nested loops 😊  
Nested loops are confusing initially, take your time @Jayda

I appreciate your teaching style @Chrisir, loved your passion!

---

<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:** [December 15, 2020, 7:52pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/20 "2020-12-15T19:52:43Z")

</div>

Ha ha, tried not to reveal it too early… 😉

[Next page](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271.md?page=2)