# Trying to draw grid of rotated rectangles -- not centering?

**URL:** https://discourse.processing.org/t/trying-to-draw-grid-of-rotated-rectangles-not-centering/7906
**Category:** Coding Questions
**Created:** [January 28, 2019, 5:02pm UTC](https://discourse.processing.org/t/trying-to-draw-grid-of-rotated-rectangles-not-centering/7906 "2019-01-28T17:02:26Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![sorenkirk](https://avatars.discourse-cdn.com/v4/letter/s/977dab/32.png) [@sorenkirk](https://discourse.processing.org/u/sorenkirk)
#### Post date: [January 28, 2019, 5:02pm UTC](https://discourse.processing.org/t/trying-to-draw-grid-of-rotated-rectangles-not-centering/7906/1 "2019-01-28T17:02:26Z")

</div>

I am trying to simply draw a centered grid of 5 rectangles but (1) the grid is not centered and (2) it draws 6. Can anyone help me out on what I’m doing wrong?

```auto
int margin = 150;
int rectH = 60;
int rectW = 20;
int n_rectangles = 5;
 
size(800,800);
for (int x = margin+rectW; x <= width - margin; x += (width-2*(margin+rectW))/n_rectangles) {
  for (int y = margin+rectH; y <= height - margin; y += (height-2*(margin+rectH))/n_rectangles) {
     fill(255);
     pushMatrix();
     translate(x, y);
     rotate(radians(45));
     rect(0, 0, rectW, rectH);
     popMatrix();
   
  }
}

```

---

<div class="post-metadata">

### Author: ![Dennis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dennis/32/1111_2.png) [@Dennis](https://discourse.processing.org/u/Dennis)
#### Post date: [January 28, 2019, 7:21pm UTC](https://discourse.processing.org/t/trying-to-draw-grid-of-rotated-rectangles-not-centering/7906/2 "2019-01-28T19:21:37Z")

</div>

Hi, you have miss the sign:

```auto
for (int x = margin+rectW; x <= width - margin; x += (width-2*(margin - rectW))/n_rectangles) {
  for (int y = margin-rectH; y <= height - margin; y += (height-2*(margin - rectH))/n_rectangles) {
     fill(255);
     pushMatrix();
     translate(x, y);
     rotate(radians(45));
     rect(0, 0, rectW, rectH);
     popMatrix();
  }
}

```

seeing is believing…

keep us up to date.

---

<div class="post-metadata">

### Author: ![Dennis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dennis/32/1111_2.png) [@Dennis](https://discourse.processing.org/u/Dennis)
#### Post date: [January 28, 2019, 7:36pm UTC](https://discourse.processing.org/t/trying-to-draw-grid-of-rotated-rectangles-not-centering/7906/3 "2019-01-28T19:36:01Z")

</div>

Hops… I forgot to center the rectangles:

```auto
size(800, 800);
rectMode(CENTER);
for (int x = margin-rectW; x < width - margin/2; x += (width-2*(margin - rectW))/(n_rectangles-1)) {
  for (int y = margin-rectH; y < height - margin/2; y += (height-2*(margin - rectH))/(n_rectangles-1)) {
    fill(255);
    pushMatrix();
    translate(x, y);
    rotate(radians(45));
    rect(0, 0, rectW, rectH);
    popMatrix();
  }
}

```

I fixed up the centering with the instruction `rectMode(CENTER)` and I correct the last part of expression `(n_rectangles-1)`

Now it should work properly…

---

<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 29, 2019, 3:07am UTC](https://discourse.processing.org/t/trying-to-draw-grid-of-rotated-rectangles-not-centering/7906/4 "2019-01-29T03:07:44Z")

</div>

also can add some mouse interaction:

```auto
int x = 100, y = x, w = 20, h = 10; // rectangle spec
int grid = 6, many = grid*grid; // grid spec
int offset = 30; // add offset between objects
float ang = 0;

void draw_rect(int i) {
  offset = int(map(mouseY,0,height,0,100));
  ang = map(mouseX,0,width,0,PI);
  int posx = x+(i%grid)*(w+offset);
  int posy = y+(floor(i/grid))*(h+offset);
  push();
  translate(posx,posy);
  rotate(ang);
  rect(0,0, w, h);
  pop();
}

void setup() {
  size(800, 800);
  stroke(0,0,200);
  fill(0,200,0);
  rectMode(CENTER);
  println("use: mouse");
}

void draw() {
  background(200, 200, 0);
  for (int i = 0; i < many; i++) draw_rect(i);
}

```