# Draw rows of squares pattern

**URL:** <https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100>\
**Category:** Coding Questions\
**Created:** [November 1, 2018, 11:24pm UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100 "2018-11-01T23:24:06Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![gpevehou](https://avatars.discourse-cdn.com/v4/letter/g/c6cbf5/32.png) [@gpevehou](https://discourse.processing.org/u/gpevehou)\
**Post date:** [November 1, 2018, 11:24pm UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100/1 "2018-11-01T23:24:06Z")

</div>

This code is supposed to be drawing the attached pattern, but is only drawing one square.

 ![processing%20pattern](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4e6eb450b92c2e87be09087765c63c3b7f568d9e.jpeg). does anyone know what I need to add/ what I’m doing wrong? Thank you!

```auto
int X_coordinate=150;
int y_coordinate=200;

void changeX() {
  X_coordinate= X_coordinate + 30;
}
void changeY() {
  y_coordinate= y_coordinate - 30;
}
void drawingRectangle() {
  rect(150, 200, 20, 20);
}
void setup () {
  size(600, 400);
  background(255, 255, 255);
}
void draw() {
  int numberOfRows=6;
  drawPattern(numberOfRows);
  noLoop();
}
void drawPattern(int rows) {
  for (int i = 0; i<rows; i++) {
    for (int j= 0; j<i; j++) {
      drawingRectangle();
      changeX();
    }
    changeY();
    // something
    changeX();
  }
}

```

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 2, 2018, 12:13am UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100/2 "2018-11-02T00:13:03Z")

</div>

Your drawrectangle method is not valid. Either use rect(x,y,w,h) or define a method called void drawrectangle().

---

<div class="post-metadata">

**Author:** ![gpevehou](https://avatars.discourse-cdn.com/v4/letter/g/c6cbf5/32.png) [@gpevehou](https://discourse.processing.org/u/gpevehou)\
**Post date:** [November 2, 2018, 12:36am UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100/3 "2018-11-02T00:36:07Z")

</div>

i just tried that and it still only printed one box. Is it something with my for loop?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 2, 2018, 1:00am UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100/4 "2018-11-02T01:00:28Z")

</div>

Where is your drawingRectangle() function drawing the rectangle?  
Does that position ever change?  
If it doesn’t change, all the rectangles are drawn in the same place.

Your sketch has… other issues… but the main concern is that all your rectangles are always being drawn in the same place, no matter what values are stored in any variables…

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 2, 2018, 3:30am UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100/5 "2018-11-02T03:30:38Z")

</div>

Please format your Code with Str+T/Ctrl+T in processing and \</\> in here. And to add to what TfGuy44 said, you are drawing all your rects in one place, so they are all there, just in the exact Same place. If you want to change this, you should give rect variables as Input, not direct numbers. Also, you could probably save a lot of trouble by just using i and j as positions and multiplying them by your desired size and Offset.

---

<div class="post-metadata">

**Author:** ![gpevehou](https://avatars.discourse-cdn.com/v4/letter/g/c6cbf5/32.png) [@gpevehou](https://discourse.processing.org/u/gpevehou)\
**Post date:** [November 2, 2018, 3:55am UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100/6 "2018-11-02T03:55:58Z")

</div>

thank you for your help! I’ll look into that

---

<div class="post-metadata">

**Author:** ![gpevehou](https://avatars.discourse-cdn.com/v4/letter/g/c6cbf5/32.png) [@gpevehou](https://discourse.processing.org/u/gpevehou)\
**Post date:** [November 3, 2018, 7:25pm UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100/7 "2018-11-03T19:25:45Z")

</div>

Thank you! I don’t know what the you mean by formatting it differently, but I changed my code to this:

```auto
int X_coordinate = 1;
int Y_coordinate = 1;

void changeX() {

  X_coordinate= X_coordinate + 30;
}

void changeY() {
  Y_coordinate = Y_coordinate + 30;
}

void setup () {
  size(1000, 600);
  background(255, 255, 255);
}

void draw() {
  int numberOfRows=6;
  drawPattern(numberOfRows);
  noLoop();
}
void drawPattern(int numberOfRows) {
  for (int i = 0; i<numberOfRows; i++) {
    for (int j= 0; j<i; j++) {
      for (int k =0; k<4; k++) {
        rect (X_coordinate, Y_coordinate, 20, 20);
      }
      changeX();
    }

    changeY();
    changeX();
    {
    }
  }
}

```

and it is producing what I have attached. I dont know what I need to do to make my squares go back to the starting place.

 ![squares%20processing](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9656723543950cb7d84fdcfeee3fea28cf63a3e9.jpeg)

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 3, 2018, 7:30pm UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100/8 "2018-11-03T19:30:52Z")

</div>

By formatting i mean, make the code readable in the Post. Just add the code inside this :  
/```

/```  
Just without /. You can get this by pressing \</\> in the top Selection When you write a comment.

And to get the right pattern, you just Need 2 Loops. In one you have to iterate over the rows you want, and in the one inside you Need to set the number of times it has to iterate to the current iteration of the first loop.

---

<div class="post-metadata">

**Author:** ![gpevehou](https://avatars.discourse-cdn.com/v4/letter/g/c6cbf5/32.png) [@gpevehou](https://discourse.processing.org/u/gpevehou)\
**Post date:** [November 3, 2018, 7:43pm UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100/9 "2018-11-03T19:43:12Z")

</div>

Ohh, got it! Thank you so much for your help!

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 3, 2018, 7:43pm UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100/10 "2018-11-03T19:43:59Z")

</div>

You‘re welcome 😊

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [November 3, 2018, 10:04pm UTC](https://discourse.processing.org/t/draw-rows-of-squares-pattern/5100/11 "2018-11-03T22:04:41Z")

</div>

Please edit your previous posts to format your code, it is not readable as is.

Regarding your problem, you just need to change one line of your code to get the desired effect.

Just after changing the Y position -\> meaning that you are changing the line, you need to set your X position to the initial value (aka 1). It is as simple as that. Almost there!