# 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:** 12\
**Page:** 3

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [September 27, 2022, 3:57pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/41 "2022-09-27T15:57:48Z")

</div>

cool! I am trying this

---

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [September 27, 2022, 5:13pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/42 "2022-09-27T17:13:35Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/9/59cb036f375334c938338098623cc2b84d4a9832.png)

I have tried the different combinations on x and y. but it’s just made this stair of ellipses and the stair that I made before with different starting points. How should I make the up stair from left to right?

---

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [September 27, 2022, 5:15pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/43 "2022-09-27T17:15:11Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/f/cf6dd622972ce0f3da1767b9eb52f745e83a53b1.png)

Sorry guys, I am temporarily limited to 3 replies on the same topic. For adding another reply, I may need to edit my previous replies. So I can’t have a new reply. I’ll edit this reply. BTW thx a lot!!!

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [September 27, 2022, 6:34pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/44 "2022-09-27T18:34:20Z")

</div>

@yoyo,

Let’s focus on the two loop headers from your original code.

Following are those two headers, with `i` changed to `x` and `j` changed to `y`:

```auto
  for (let x = 0; x <= 20; x++) {
    for (let y = 0; y <= x; y++) {

```

If you run the debugging code supplied by @vkbr, and look at the JavaScript console, you will find that your code produces `21` steps, even though your original image showed that you needed only `20`. The extra step is not visible in the sketch, because it is being drawn outside your canvas. The problem is that your outer loop iterates `21` times instead of `20`. There are `21` numbers in the range `0` to `20`, inclusive. That `20` in the outer loop header needs to be `19`. Alternatively, you could change the condition to exclude `20`.

Each iteration of the outer loop is responsible for one column of circles. The first column needs to have `1` circle, and they must increase by `1` in number in each column that follows. This must occur while the value of `x` is increasing. We need to make sure to attach the steps to the bottom, instead of to the top of the canvas. If you subtract `x` from `19` and assign the result to `y`, and specify that `y` must be less than or equal to `19`, what would happen with the inner loop as `x` increases by `1` during each iteration of the outer loop?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 28, 2022, 12:52am UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/45 "2022-09-28T00:52:51Z")

</div>

Hello @yoyo,

Hint:

```auto
function setup()
  {
  createCanvas(400, 400);
  textSize(16);
  
  for(let num = 0; num<=9; num++)
    {
    fill(0);
    text(num, num*30, 30); // Left to right
    text(9-num, num*30, 60)
    text(num, (9-num)*30, 90) // Reverse - Right to left
    }
  }

```

Tutorial:  
[4.2: Nested Loops - p5.js Tutorial](https://youtu.be/1c1_TMdf8b8)

`:)`

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [September 28, 2022, 3:08pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/46 "2022-09-28T15:08:57Z")

</div>

There’s different ways to do it… In my solution, one for loop goes up and the other goes down…  
like: `x+=d `y-=d`

 ![Screen Shot 2022-09-28 at 12.00.35](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/d/edd9a050403c33ed71b641f39d24e94b3e16aad1.png)  
 ![Screen Shot 2022-09-28 at 12.00.46](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/9/0942508beb2b0a7b0fe205dfbc6693b8ec984e65.png)

But I also find nested loops confuse. When I’m lost with them, I usually reduce the number of iterations to a really small one, like 3 or 5 and use text to log the values so its clearer what is happening.  
cheers

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [September 28, 2022, 5:21pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/47 "2022-09-28T17:21:03Z")

</div>

For thinking about nested loops, it might help to label the circles by column and row.

 ![stairs](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/2/9244bd01865f10802f3993947453739081cd3fcd.png)

_EDIT (September 29, 2022):_

Within each pair of numbers in all of the circles in the sketch, the first number represents the value of the control variable of the outer loop and the second represents the value of the control variable of the inner loop. These are the column and row numbers.

Take a look at the pairs of numbers in the circles in the diagonal. Is there a consistency regarding the sum of the two numbers in the pairs?

Also note the sums of the pairs of numbers below the diagonal. For each one, how does it relate to the sum of the two numbers in the circle in the diagonal above?

Do these observations suggest anything regarding what would be a good header for the inner loop? There are several possibilities that would work.

---

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [September 29, 2022, 9:30am UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/48 "2022-09-29T09:30:54Z")

</div>

omg!! I finally get it

---

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [September 29, 2022, 9:32am UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/49 "2022-09-29T09:32:35Z")

</div>

thank you guys

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/5/b53916811fa065704244ae4edd0d6795f61d56a4.png)

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [September 29, 2022, 2:05pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/50 "2022-09-29T14:05:11Z")

</div>

Good work, @yoyo!

Also, thanks go to @Chrisir, @vkbr, @glv, and @philipplehmann.

Since you’ve succeeded with a solution, we can now reveal some additional code of our own that applies to the project.

As mentioned earlier, there are multiple ways to achieve this task. For example …

> [@vkbr](#):
>
> In my solution, one for loop goes up and the other goes down…  
> like: `x+=d `y-=d

Now, shifting our focus to the diagram [here](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/47), which displays the column and row coordinate pairs, we can note that on the diagonal, the column and row numbers of each circle add up to 19. Below the diagonal, where the canvas is filled with circles, the two numbers in the coordinate pairs add up to a number greater than 19. In the entire space above the diagonal, where there are no circles, the numbers in the coordinate pairs would add up to a sum less than 19. From those observations, we can derive something like this regarding the nested loops:

```auto
  // column numbers from left to right
  for (let col = 0; col <= 19; col++) {
    // row numbers from the bottom up to and including the diagonal
    // for (let row = 19; row >= 19 - col; row--) {
    for (let row = 19; row + col >= 19; row--) {
      circle((col + 0.5) * 20, (row + 0.5) * 20, 20);
    }
  }

```

The code above could be refactored slightly to be equivalent to solutions that others have proposed.

---

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [September 29, 2022, 5:02pm UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/51 "2022-09-29T17:02:14Z")

</div>

big thanks to all of you!!!

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [October 7, 2022, 3:18am UTC](https://discourse.processing.org/t/use-of-for-loop-to-create-a-stair-of-ellipses/26271/52 "2022-10-07T03:18:41Z")

</div>

An animated version, overlapped with a loop all at once version.

> **[p5.js Web Editor](https://editor.p5js.org/v-k-/sketches/-VlIEw8mS)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

```auto
const RAD = 20; //radius
let balls = [];
let x = RAD;
let y;
let l = 1; //lines
let now; //timer

function setup() {
  createCanvas(400, 400);
  y = height - RAD;
  //insert first ball
  balls.push(new Ball(x, y, RAD));
  frameRate(10);
}

function draw() {
  background(120);
  //just draw the balls
  for (let i = 0; i < balls.length; i++) {
    balls[i].display();
  }
  //calc x position
  if (x < width - RAD) {
    x += RAD * 2;

    now = millis();
  } else if (y > RAD) {
    // if x out of window and y not
    l += 2;
    y -= RAD * 2;
    x = RAD * l;
  } else if (millis() - now > 1000) {
    //if both out of window
    // draw again in a loop donuts all at once
    fill(120);
    for (let x = width - RAD; x >= RAD; x -= RAD * 2) {
      for (let y = height - RAD; y >= height - RAD - x; y -= RAD * 2) {
        ellipse(x, y, 19);
      }
    }
    noLoop();
  }
  balls.push(new Ball(x, y, RAD));
}

class Ball {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
  }
  display() {
    push();
    noStroke();
    fill(250);
    ellipse(this.x, this.y, this.r * 2);
    pop();
  }
}

```

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