# Pushing and Popping a PGraphics Grid (pushMatrix / popMatrix in a grid)

**URL:** <https://discourse.processing.org/t/pushing-and-popping-a-pgraphics-grid-pushmatrix-popmatrix-in-a-grid/44403>\
**Category:** Beginners\
**Created:** [May 8, 2024, 4:58am UTC](https://discourse.processing.org/t/pushing-and-popping-a-pgraphics-grid-pushmatrix-popmatrix-in-a-grid/44403 "2024-05-08T04:58:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bdon](https://avatars.discourse-cdn.com/v4/letter/b/7ea924/32.png) [@bdon](https://discourse.processing.org/u/bdon)\
**Post date:** [May 8, 2024, 4:58am UTC](https://discourse.processing.org/t/pushing-and-popping-a-pgraphics-grid-pushmatrix-popmatrix-in-a-grid/44403/1 "2024-05-08T04:58:18Z")

</div>

Hi there -  
I was hoping to draw a basic grid of rectangles with PGraphics, but something I’m doing is wrong here and I’m not sure what it is.  
Can anyone shed some light?

```auto
PGraphics img;

void setup() {  
  size(100, 100);
  img = createGraphics(width, height);
  img.beginDraw();
  img.translate(-10, 10);
  
  for (int x=0; x<10; x++) {
  img.translate(10, 0);
  img.square(0, 0, 10.0);
  img.fill(random(200), random(200), random(200));
    for (int y=0; y<40; y++) {
    img.push();
    img.translate(0, 10);
    img.square(0, 0, 10.0);
    img.fill(random(200), random(200), random(200));
    img.pop();
    }
  }
 
    img.endDraw();
  //background(0);
  image(img, 0, 0);

}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [May 8, 2024, 5:08am UTC](https://discourse.processing.org/t/pushing-and-popping-a-pgraphics-grid-pushmatrix-popmatrix-in-a-grid/44403/2 "2024-05-08T05:08:24Z")

</div>

This is the output on my system (macos); what were you expecting? I note that you did not use either x or y. If you expect to see 40 rows then you’ll have to make the window taller and use y in the translation.  
 ![grid](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/8/7859e25b585be9fedff7c1b57b69e6ee9c2fa699.png)

---

<div class="post-metadata">

**Author:** ![bdon](https://avatars.discourse-cdn.com/v4/letter/b/7ea924/32.png) [@bdon](https://discourse.processing.org/u/bdon)\
**Post date:** [May 8, 2024, 5:42am UTC](https://discourse.processing.org/t/pushing-and-popping-a-pgraphics-grid-pushmatrix-popmatrix-in-a-grid/44403/3 "2024-05-08T05:42:01Z")

</div>

Ah, I think I understand now. The translate moved the boxes horizontally, but when using `push` and `pop`, I need to mutiply by “y” in order to move from a relative distance.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [May 8, 2024, 6:25am UTC](https://discourse.processing.org/t/pushing-and-popping-a-pgraphics-grid-pushmatrix-popmatrix-in-a-grid/44403/4 "2024-05-08T06:25:59Z")

</div>

` I need to mutiply by “y” in order to move from a relative distance`

Correct. I also note that you’re using img.fill() twice and on my system all 40 rows use the same color for each column. Try using only one img.fill() and moving it down below img.pop() in the _‘for’_ loop for the rows if you want each square to have a different color.

---

<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:** [May 8, 2024, 8:38am UTC](https://discourse.processing.org/t/pushing-and-popping-a-pgraphics-grid-pushmatrix-popmatrix-in-a-grid/44403/5 "2024-05-08T08:38:42Z")

</div>

**Version 1**  
here is a version without push / pop

the columns are beneath each other. Bad.

```auto

PGraphics img;

void setup() {
  size(600, 600);

  img = createGraphics(width, height);
  img.beginDraw();

  img.translate(-10, -10);

  for (int x=0; x<10; x++) {
    img.translate(10, 0);
    img.fill(random(200), random(200), random(200));
    for (int y=0; y<10; y++) {
      img.translate(0, 10);
      img.square(0, 0, 10.0);
    }
  }

  img.endDraw();

  //background(0);
  image(img, 0, 0);
}

```

* * *

**Version 2**

in this version, we surround the y for-loop with push / pop (resetting the y after each column)

works well and fixes the error above

no calculation with x and y needed, the `translate()` commands add up for x and y

```auto
PGraphics img;

void setup() {
  size(600, 600);

  img = createGraphics(width, height);
  img.beginDraw();

  img.translate(-10, -10);

  for (int x=0; x<10; x++) {
    img.translate(10, 0);
    img.fill(random(200), random(200), random(200));
    img.pushMatrix();
    for (int y=0; y<10; y++) {
      img.translate(0, 10);
      img.square(0, 0, 10.0);
    }
    img.popMatrix();
  }

  img.endDraw();

  //background(0);
  image(img, 0, 0);
}

```

* * *

**Version 3**

in this version we calculate each cell’s position

push / pop for each cell, only one `translate()` command in the Sketch

```auto
PGraphics img;

void setup() {
  size(600, 600);

  img = createGraphics(width, height);
  img.beginDraw();

  for (int x=0; x<10; x++) {
    img.fill(random(200), random(200), random(200));
    for (int y=0; y<10; y++) {
      img.pushMatrix();
      img.translate(x*13+32, y*13+22);
      img.square(0, 0, 10.0);
      img.popMatrix();
    }
  }

  img.endDraw();

  //background(0);
  image(img, 0, 0);
}

```

I don’t think there are severe speed differences between the three versions.

Personally I like _version 3_ the most, for example because you can make a cell to a class Cell and its `display()` method would just work like this. This would be harder in version 2.

Chrisir

[Edited]

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 8, 2024, 10:40am UTC](https://discourse.processing.org/t/pushing-and-popping-a-pgraphics-grid-pushmatrix-popmatrix-in-a-grid/44403/6 "2024-05-08T10:40:44Z")

</div>

Hello @bdon,

Always start with the simplest of examples and build on that.

Review the tutorials and and read all the references related to your code:  
_[https://processing.org/](https://processing.org/)_

Simple example to help understand a nested for loop:

```auto
size(600, 600);
background(0);

int counter = 0;

for (int x=0; x<10; x++) 
  {
  for (int y=0; y<10; y++) 
    {
    fill(255);
    textSize(24);
    text(counter, x, y); // You are putting text at the (x, y) location!
    
    // See what this does:
    //int loc = x + y*10;
    //text(loc, x, y+20); // You are putting text at the (x, y) location!
    
    counter++;
    }
  }

```

The above needs some work.  
Multiple the x and y by a factor of 60:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/a/4a87bed9ce32a4f6c973895b0d4fb4b83a554d45.png)

Change the x and y around in the for() loop and see what happens:

```auto
for (int y=0; y<10; y++) 
  {
  for (int x=0; x<10; x++) 
    {
   // Your code here
    }
  }

```

Replace text with a shape:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/5/a5bc6d131b64975edc770b82d0a13a91dbfbd9f5.png)

In 3D mode using a sphere you will need to push(), pop() and translate().  
See the reference for sphere() to understand why.

```auto
size(600, 600, P3D);
background(0);

lights();

for (int x=0; x<10; x++) 
  {
  for (int y=0; y<10; y++) 
    {
    fill(255, 0, 0); // You may want to change in a loop so left it here!
    
    push();
    translate(60*x, 60*y); // You can add a small offset to center things better!
    noStroke();
    sphere(20);
    pop();
    }
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/c/9ca98a4e3a11b8d60ad66b69da1960653705a647.png)

`:)`