# Inheritance Class Objects in 2D Grid Array do not align

**URL:** <https://discourse.processing.org/t/inheritance-class-objects-in-2d-grid-array-do-not-align/20081>\
**Category:** Coding Questions\
**Created:** [April 23, 2020, 8:00pm UTC](https://discourse.processing.org/t/inheritance-class-objects-in-2d-grid-array-do-not-align/20081 "2020-04-23T20:00:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 23, 2020, 8:00pm UTC](https://discourse.processing.org/t/inheritance-class-objects-in-2d-grid-array-do-not-align/20081/1 "2020-04-23T20:00:23Z")

</div>

I’m trying to get **a 2D grid to display properly with 1 subclass object before adding additional subclasses.**

The code for this 2D array grid is pulled from one of my previous projects, and it worked fine.  
**However, the difference is** : with this sketch I am breaking the class down into subclasses. I am thinking this may be the issue? However, not able to find any specific threads on-line to pursue.  
**I also tried** implementing pushMatrix() and popMatrix() in the subclass, to no avail…  
**Or,** some basic oversight…

Any guidance most welcome!  
🤓

```auto
// MAIN

HalfmoonRect [][] myHMrect;

int num = 4;
int cols = num, rows = cols;

void setup(){
  size (800, 800);
  
  frameRate (1);
  
  float x = 0, y = x, sz = width/num;
  
  myHMrect = new HalfmoonRect [cols][rows];
  for (int i = 0; i < cols; i++){
    for (int j = 0; j < rows; j++){
      myHMrect[i][j] = new HalfmoonRect (x+(i*width/cols), y+(j*height/rows), sz);
    }
  }
}
void draw(){
   
  for (int i = 0; i < cols; i++){
    for (int j = 0; j < rows; j++){
      myHMrect[i][j].display();
    }
  }
}
// SUPER

class Halfmoon {

  color c1 = #FFFFFF, 
    c2 = #BEBEBE, 
    c3 = #7F7F7F, 
    c4 = #3F3F3F, 
    c5 = #000000;
  color[] grays = {c1, c2, c3, c4, c5};  

  float deg, rad;
  float x, y, sz;

  Halfmoon(float tempX, float tempY, float tempSz) {    
    x = tempX;
    y = tempY;
    sz = tempSz;
  
    //deg = radians(90);
  }

void rectPlusColor (color rectColor) {
    fill (rectColor);
    rectMode (CENTER);
    rect (x, y, sz, sz);
  }
}

// SUBCLASS

class HalfmoonRect extends Halfmoon {

  HalfmoonRect(float x, float y, float sz) {
    super(x, y, sz);
  }

  void display() {
    noStroke();
    translate (100, 100);
    
    rectPlusColor(grays[int(random(grays.length))]);
    
  }
}

```

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [April 23, 2020, 10:24pm UTC](https://discourse.processing.org/t/inheritance-class-objects-in-2d-grid-array-do-not-align/20081/2 "2020-04-23T22:24:06Z")

</div>

Could you post a picture of what you want vs. what you’re getting?

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 23, 2020, 10:30pm UTC](https://discourse.processing.org/t/inheritance-class-objects-in-2d-grid-array-do-not-align/20081/3 "2020-04-23T22:30:57Z")

</div>

![Screen Shot 2020-04-23 at 6.26.48 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/76b5e3a7c7415efd191b673b3c05eeed0d72bad6.png)

This is what I’m getting, rectangles are spread out. The code I posted reflects this same behavior.

What I want is a simple grid layout – 4 columns across, 4 rows down of rectangles.

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [April 23, 2020, 10:32pm UTC](https://discourse.processing.org/t/inheritance-class-objects-in-2d-grid-array-do-not-align/20081/4 "2020-04-23T22:32:33Z")

</div>

Okay, so I was crawling through your code and found this:

```
translate (100, 100);

```

What is this line for?

Edit: Try commenting it out!

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 23, 2020, 10:35pm UTC](https://discourse.processing.org/t/inheritance-class-objects-in-2d-grid-array-do-not-align/20081/5 "2020-04-23T22:35:27Z")

</div>

To offset rectangle position when I draw from from center – ie rectMode(CENTER) is also in the code.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 23, 2020, 10:36pm UTC](https://discourse.processing.org/t/inheritance-class-objects-in-2d-grid-array-do-not-align/20081/6 "2020-04-23T22:36:22Z")

</div>

> [@tony](#):
>
> Edit: Try commenting it out!

Yes, i tried that already.

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [April 23, 2020, 10:39pm UTC](https://discourse.processing.org/t/inheritance-class-objects-in-2d-grid-array-do-not-align/20081/7 "2020-04-23T22:39:31Z")

</div>

`translate()` is a cumulative function: You’re telling the computer to offset by (100,100), then (200,200), then (300,300), then…  
It does, however, get reset after every draw-loop

> [@debxyz](#):
>
> Yes, i tried that already.

Interesting, I just got it to work on my machine.

 ![Screen Shot 2020-04-23 at 3.41.33 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/06ac35c397959c51121862af80a5b28a72216414.png)

Can you clarify what you tried?

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 23, 2020, 10:43pm UTC](https://discourse.processing.org/t/inheritance-class-objects-in-2d-grid-array-do-not-align/20081/8 "2020-04-23T22:43:40Z")

</div>

Oh, I see. Now the grid appears. But is entirely shifted to the left and up by 100. Entire grid as a unit needs to move right 100 and down 100…

HA!! Just changed the x position…  
OK! Thank you @tony! I got it.

🤓