Draw a Pyramid with for-loop and with rect

Processing Coding Questions
1

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

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

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


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
3

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

Use a smaller n maybe?

5

I tried it but it`s still not working :confused:

1 Like
6

what is the size of your rect?

Check this?

I tried, it’s the size.

1 Like