# Draw a Pyramid with for-loop and with rect

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?

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

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:

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

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

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

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

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

1 Like

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?

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

``````

Use a smaller n maybe?

I tried it but it`s still not working 1 Like

what is the size of your rect?

Check this?

I tried, it’s the size.

1 Like