# Create a grid out of rectangles

**URL:** <https://discourse.processing.org/t/create-a-grid-out-of-rectangles/4084>\
**Category:** Coding Questions\
**Created:** [October 3, 2018, 1:03pm UTC](https://discourse.processing.org/t/create-a-grid-out-of-rectangles/4084 "2018-10-03T13:03:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jrekz](https://avatars.discourse-cdn.com/v4/letter/j/ed655f/32.png) [@Jrekz](https://discourse.processing.org/u/Jrekz)\
**Post date:** [October 3, 2018, 1:03pm UTC](https://discourse.processing.org/t/create-a-grid-out-of-rectangles/4084/1 "2018-10-03T13:03:15Z")

</div>

Hi, I want to draw rectangles (size=50) in a grid of 7 columns and 6 rows. With a sketch border offset of 15  
pixels and 5 pixels between each rectangle. This is how it should look like: ![Screenshot_1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9572f7f584b5b170972de9984d51e4febea15d6a.png) . When I try add the space somewhere between, rectangles are starting to missalign and I’m also not sure how to replicate it on Y axis alone as when I try to do that, rectangles are replicated diagonally.

Here’s what I have so far:

```auto
int rectSize=50;
int space=5;
int xPos=15, yPos=15;

void setup() {
  size(500, 500);
  background(255);
  frameRate(10);
}

void draw() {
  rect(xPos, yPos, rectSize, rectSize);
  xPos=xPos+rectSize;
  xPos%=(width-rectSize);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 3, 2018, 1:48pm UTC](https://discourse.processing.org/t/create-a-grid-out-of-rectangles/4084/2 "2018-10-03T13:48:17Z")

</div>

Maybe these 2 online sketches which create a grid of **rect()** can help you figure it out: 😇

1. [Studio.ProcessingTogether.com/sp/pad/export/ro.9L5jAtga7SpyF](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9L5jAtga7SpyF)
2. [Studio.ProcessingTogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx)

---

<div class="post-metadata">

**Author:** ![Jrekz](https://avatars.discourse-cdn.com/v4/letter/j/ed655f/32.png) [@Jrekz](https://discourse.processing.org/u/Jrekz)\
**Post date:** [October 3, 2018, 2:38pm UTC](https://discourse.processing.org/t/create-a-grid-out-of-rectangles/4084/3 "2018-10-03T14:38:58Z")

</div>

Thats too complex, I can only use basic functions.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 3, 2018, 3:24pm UTC](https://discourse.processing.org/t/create-a-grid-out-of-rectangles/4084/4 "2018-10-03T15:24:33Z")

</div>

Just use some basic ideas from there. Like defining constants for GRID, SIZE, MARGIN, SPACE, etc. 🕶  
And the double loops for **rect()** too. 🤓

---

<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:** [October 3, 2018, 3:52pm UTC](https://discourse.processing.org/t/create-a-grid-out-of-rectangles/4084/5 "2018-10-03T15:52:38Z")

</div>

Hi Jerkz,

I’m not sure the draw loop is the best place to do what you want. Instead, simply use for loops inside the setup.

Here a small example that draw a 3\*3 matrix:

```auto
int rectSize=90;
int space=10;

void setup() {
  size(310, 310);
  background(20);
  stroke(200);
  noFill();
  strokeWeight(2);

  for (int x = 0; x < 3; x++) {
    for (int y = 0; y < 3; y++) {
      rect(space + x * (rectSize + space), space + y *(rectSize + space), rectSize, rectSize);
    }
  }
}

```

- x correspond to the column you are dealing with
- y correspond to the row you are dealing with
- To know the position of a square based on the column on row, you just need to add up all the space taken by previous square on the left and on the top. This is handle by this:
  - space + x \* (rectSize + space)
  - space + y \*(rectSize + space)