# Help understanding the logic behind this code (center grid)

**URL:** <https://discourse.processing.org/t/help-understanding-the-logic-behind-this-code-center-grid/43643>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [January 8, 2024, 3:14am UTC](https://discourse.processing.org/t/help-understanding-the-logic-behind-this-code-center-grid/43643 "2024-01-08T03:14:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jiji](https://avatars.discourse-cdn.com/v4/letter/j/2bfe46/32.png) [@Jiji](https://discourse.processing.org/u/Jiji)\
**Post date:** [January 8, 2024, 3:14am UTC](https://discourse.processing.org/t/help-understanding-the-logic-behind-this-code-center-grid/43643/1 "2024-01-08T03:14:20Z")

</div>

Hi everybody, I have this code from a tutorial. So basically I want to draw a grid of boxes using WEBGL.  
I have a hard time to understand the logic of this translate( size/2+ i \* size - size \* cols/2, size/2+ j \* size - size \* rows/2);  
Why would this help center the box grid to the center of the canvas ? And how can the tutorial come up with this logic?  
Thank you!

```auto

let size = 50;
let rows;
let cols;

function setup() {
  createCanvas(400, 400, WEBGL);
  angleMode(DEGREES);
  rows=3;
  cols=3;
}

function draw() {
  background(220);
  
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      fill(255);
      push();
     translate( size/2+ i * size - size * cols/2, size/2+ j * size - size * rows/2);
     
      box(size);
      pop();
    }
    
    fill(255, 0, 0);
    box(50);
  }
}

```

---

<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 8, 2024, 1:23pm UTC](https://discourse.processing.org/t/help-understanding-the-logic-behind-this-code-center-grid/43643/2 "2024-01-08T13:23:32Z")

</div>

Apparently, the point in 0,0 in WEBGL is at the center of the screen.

Apparently, a `box` (other than rect()!) is drawn at its center (not corner).

So box(29); is centered at 0,0.

Having this in mind, the formula is easy to get:

```auto
 translate( size/2+ i * size - size * cols/2, // the x part uses i 
                 size/2+ j * size - size * rows/2); // the y part uses j 
                                                                         // no z part yet

```

**Explanation**

Move right by half a box (compensating the fact that cube is displayed centered, not upper left corner):  
`size/2+`

That’s the _core_: place the cubes next to each other, starting with 0, then 50, 150  
` i * size`

we need to move left to center the grid / cube ( `- 50 * 1.5` on screen)  
`- size * cols/2`

**simplified version :**  
works only for 3 cols  
`translate( i * size - size,`

* * *

same for y-part

remember that in math `*` and `/` is calculated _before_ `+` and `-` , otherwise this wouldn’t work.

Chrisir

* * *

P.S.

my version

```auto
let size = 50.0;

let rows;
let cols;

function setup() {
  createCanvas(400, 400, WEBGL);

  // angleMode(DEGREES);
  rows = 7.0;
  cols = 7.0;
}

function draw() {
  background(220);

  stroke(0);
  line(0, 0, 300, 0);
  stroke(0);
  line(0, 300, 0, 0);

  // return;
  
  push();
  translate((-size * cols) / 2 + size / 2,
            (-size * rows) / 2 + size / 2);

  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      fill(255);
      push();
      translate(i * size,
                j * size);

      box(size);
      pop();
    }
  }

  pop();

  fill(255, 0, 0);
  box(size);
}

```

---

<div class="post-metadata">

**Author:** ![Jiji](https://avatars.discourse-cdn.com/v4/letter/j/2bfe46/32.png) [@Jiji](https://discourse.processing.org/u/Jiji)\
**Post date:** [January 10, 2024, 4:36am UTC](https://discourse.processing.org/t/help-understanding-the-logic-behind-this-code-center-grid/43643/4 "2024-01-10T04:36:47Z")

</div>

Thank you so much for your thorough explanation!