# Draw a Pyramid with for-loop and with rect

**URL:** <https://discourse.processing.org/t/draw-a-pyramid-with-for-loop-and-with-rect/24751>\
**Category:** Coding Questions\
**Created:** [October 20, 2020, 4:07pm UTC](https://discourse.processing.org/t/draw-a-pyramid-with-for-loop-and-with-rect/24751 "2020-10-20T16:07:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ellie98](https://avatars.discourse-cdn.com/v4/letter/e/e47774/32.png) [@Ellie98](https://discourse.processing.org/u/Ellie98)\
**Post date:** [October 20, 2020, 4:07pm UTC](https://discourse.processing.org/t/draw-a-pyramid-with-for-loop-and-with-rect/24751/1 "2020-10-20T16:07:20Z")

</div>

Hello,  
I’m trying to get a pyramid with a for loop. It has to start at the middle with a rect like in my code (but there are 2 rects actually idk why) and then go down on both sides step by step but i’m really confused right now. Could someone help me out please? Is there a similar example maybe?

```auto
int n; // number of pyramid rows
int w, h; // width and height of each block
int pyramidX, pyramidY;
int bx, by;

void setup() {
  size(400, 400);
  surface.setTitle("Pyramide");
  n = 38; // number of rows in pyramid
  w = 10; // make it even so divible exactly by 2
  h = 390;
   pyramidY = height - h - 400;
  pyramidX = width / 2;
}

void draw() {
  background(0);

  stroke(255, 255, 255);
  line(10, 0, 10, 400);
  line(0, 390, 400, 390);
  
  stroke(0);
  for (int row = 0; row < n; row++) {
    by = pyramidY + row * h;
    bx = pyramidX + (row + 1)*w/2;
    for (int block =0; block < row + 1; block++) {
      rect(bx, by, w, h);
      bx += w;
    }
  }
}

```

---

<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:** [October 20, 2020, 5:31pm UTC](https://discourse.processing.org/t/draw-a-pyramid-with-for-loop-and-with-rect/24751/2 "2020-10-20T17:31:14Z")

</div>

A very good post! You hit **ctrl-t** in processing prior to posting, you formatted the code  
correctly when posting and asked a good precise question! Congratulations.

Also, in the code, very good that you use `width` only AFTER `size` and not before it.

**Remark**

In these lines:

```auto
  pyramidY = height - h - 400;
  pyramidX = width / 2;

```

I think we would define the pyramidX first, before pyramidY just a matter of convention or taste.

```auto
  pyramidX = width / 2;
  pyramidY = 40; // your old formula "`height - h - 400`" with `h` being 390 is not correct, I think

```

**Your question**

remember, a nested for-loop is used when filling **a grid**.

Here we have only 2 lines that we draw.

So **one** for-loop is enough.

Instead consider using two rect() commands with different values? Within one for-loop.

I also reduced h to 10, it was 390…

I don’t want to do the full code for you,  
so here is an example

```auto

int n; // number of pyramid rows
int w, h; // width and height of each block
int pyramidX, pyramidY;
int bx, by;

void setup() {
  size(400, 400);
  surface.setTitle("Pyramide");

  n = 38; // number of rows in pyramid
  w = 10; // make it even so divisible exactly by 2
  h = 10;

  pyramidX = width / 2;
  pyramidY = 40;

  noLoop();
}

void draw() {
  background(0);

  stroke(255, 255, 255);
  line(10, 0, 10, 400);
  line(0, 390, 400, 390);

  stroke(0);
  bx = pyramidX ;
  fill(255, 0, 0); 
  for (int row = 0; row < n; row++) {

    by = pyramidY + row * h;

    rect(bx, by, 
      w, h);
    bx += w;
  }
}

```

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![Ellie98](https://avatars.discourse-cdn.com/v4/letter/e/e47774/32.png) [@Ellie98](https://discourse.processing.org/u/Ellie98)\
**Post date:** [October 20, 2020, 8:40pm UTC](https://discourse.processing.org/t/draw-a-pyramid-with-for-loop-and-with-rect/24751/3 "2020-10-20T20:40:01Z")

</div>

First of all, thank you very much!! I’m almost done. I have one more issue. My pyramid isn’t allowed to go under the x-axis. How do I make it stop at the x-axis line?

```auto
int n; // number of pyramid rows
int w, h; // width and height of each block
int pyramidX, pyramidY;
int bx, by, bx2;

void setup() {
  size(400, 400);
  surface.setTitle("Pyramide");

  n = 25; // number of rows in pyramid
  w = 10; // make it even so divisible exactly by 2
  h = height;

  pyramidX = width / 2;
  pyramidY = 0;

  noLoop();
}

void draw() {
  background(0);

  stroke(255, 255, 255);
  line(10, 0, 10, 400);
  line(0, 390, 400, 390);

  stroke(255, 255, 255);
  bx = pyramidX;
  bx2 = pyramidX;
  fill(255, 255, 255); 
  for (int row = 5; row < n; row++) {

    if (row % 2 == 0)
      fill(255, 255, 255); 
    else 
    fill(0);
    rect(bx, by, w, h);
    rect(bx2, by, w, h);

    by += 20;
    bx -= w;
    bx2 += w;
  }
}

```

---

<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:** [October 20, 2020, 8:44pm UTC](https://discourse.processing.org/t/draw-a-pyramid-with-for-loop-and-with-rect/24751/4 "2020-10-20T20:44:06Z")

</div>

Use a smaller n maybe?

---

<div class="post-metadata">

**Author:** ![Ellie98](https://avatars.discourse-cdn.com/v4/letter/e/e47774/32.png) [@Ellie98](https://discourse.processing.org/u/Ellie98)\
**Post date:** [October 20, 2020, 8:51pm UTC](https://discourse.processing.org/t/draw-a-pyramid-with-for-loop-and-with-rect/24751/5 "2020-10-20T20:51:06Z")

</div>

I tried it but it`s still not working 😕

---

<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:** [October 20, 2020, 9:07pm UTC](https://discourse.processing.org/t/draw-a-pyramid-with-for-loop-and-with-rect/24751/6 "2020-10-20T21:07:36Z")

</div>

what is the size of your rect?

Check this?

I tried, it’s the size.