# Need help for a simple Grid

**URL:** <https://discourse.processing.org/t/need-help-for-a-simple-grid/17033>\
**Category:** Coding Questions\
**Created:** [January 11, 2020, 7:01pm UTC](https://discourse.processing.org/t/need-help-for-a-simple-grid/17033 "2020-01-11T19:01:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![DeadApe](https://avatars.discourse-cdn.com/v4/letter/d/51bf81/32.png) [@DeadApe](https://discourse.processing.org/u/DeadApe)\
**Post date:** [January 11, 2020, 7:01pm UTC](https://discourse.processing.org/t/need-help-for-a-simple-grid/17033/1 "2020-01-11T19:01:15Z")

</div>

Hello ppl,

i don’t get the failure in my code. I just want to draw a simple grid out of rectangles.

My Code:

```auto
void settings(){
  size(800, 800);
}

void setup(){
  int blockSize = 30;
  int hBlocks = 10;
  int wBlocks = 10;
  
  for(int col = 0; col <= wBlocks; col++){
      for(int row = 0; row <= hBlocks; row++){
        int x1 = col*blockSize;
        int x2 = col*blockSize + blockSize;
        
        int y1 = row*blockSize;
        int y2 = row*blockSize + blockSize;
        if((x2 - x1)>blockSize){
            println("BigFatError");
        }
          rect(x1, y1, x2, y2);
      }
  }
}

```

the output:

 ![output](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/15eefc35070c57c260068276488f90a2c8253172.png)

Can anyone help me with this? In my opinion, all block should be the same size…

Thank you very much for your help.

---

<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:** [January 11, 2020, 8:52pm UTC](https://discourse.processing.org/t/need-help-for-a-simple-grid/17033/2 "2020-01-11T20:52:19Z")

</div>

rect:

3rd and 4th parameter: blockSize

It’s the size, not an absolute screen coordinate

see reference

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [January 11, 2020, 9:41pm UTC](https://discourse.processing.org/t/need-help-for-a-simple-grid/17033/3 "2020-01-11T21:41:16Z")

</div>

not an answer but a note. when you draw a grid with rectangles you overdraw many lines and many rectangles can be taxing to draw. a faster version is to draw the grid with lines instead.

```auto
int gridResolution;
int gridColumns;
int gridRows;

void setup() {
  size(512, 512, P2D);
  
  gridResolution = 32;
  gridColumns = width / gridResolution;
  gridRows = height / gridResolution;
}

void draw() {
  drawGrid();
}

void drawGrid() {
  stroke(0);
  for(int y = 0; y <= gridRows; y++) {
    line(0, y * gridResolution, width, y * gridResolution);
  }
  for(int x = 0; x <= gridColumns; x++) {
    line(x * gridResolution, 0, x * gridResolution, height);
  }
}

```

---

<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:** [January 11, 2020, 9:49pm UTC](https://discourse.processing.org/t/need-help-for-a-simple-grid/17033/4 "2020-01-11T21:49:44Z")

</div>

lines alone don’t let you change the color of one cell:

```auto

void settings() {
  size(800, 800);
}

void setup() {
  int blockSize = 30;
  int hBlocks = 10;
  int wBlocks = 10;

  for (int col = 0; col <= wBlocks; col++) {
    for (int row = 0; row <= hBlocks; row++) {
      int x1 = col*(blockSize+2) + 30;
      int y1 = row*(blockSize+2) + 30;

      fill(255); 
      if (col%2==0 && row%2==0)
        fill(1112);

      rect(x1, y1, 
        blockSize, blockSize);
    }//for
  }//for
}
//

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 12, 2020, 1:51am UTC](https://discourse.processing.org/t/need-help-for-a-simple-grid/17033/5 "2020-01-12T01:51:18Z")

</div>

or optional:

```auto
// smart grid of rectangles,
int x = 10, y = x, w = 27, h = w, off = 5, grid = 13, many = grid*grid;

color col1 = color(62, 219, 59);
color col2 = color(33, 181, 72);
boolean switchcol = true;

void setup() {
  size(440, 440);
  println("x "+x+" y "+y+" w "+w+" h "+h+" offset "+off+" grid "+grid+" many "+many);
}

void draw() {
  drawGrid();
}

void selcol() {
  if ( switchcol ) fill(col1);
  else fill(col2);
  switchcol = ! switchcol;
}

void drawGrid() {
  switchcol = true;
  for (int i = 0; i < many; i++) {
    selcol();
    rect(x+(i%grid)*(w+off), y+(floor(i/grid))*(h+off), w, h); // or any other shape/text on that position
  }
}

```