# \[SOLVED\] Scalable grid with rectangles

**URL:** <https://discourse.processing.org/t/solved-scalable-grid-with-rectangles/7256>\
**Category:** Coding Questions\
**Created:** [January 6, 2019, 8:53pm UTC](https://discourse.processing.org/t/solved-scalable-grid-with-rectangles/7256 "2019-01-06T20:53:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![blue-man](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@blue-man](https://discourse.processing.org/u/blue-man)\
**Post date:** [January 6, 2019, 8:53pm UTC](https://discourse.processing.org/t/solved-scalable-grid-with-rectangles/7256/1 "2019-01-06T20:53:16Z")

</div>

Hello my friends,

I tried to create a grid with a scaleable size.  
So I wanted to use this few lines to create the rectangles.

```auto
   for (field2 = 0; field2 < x; field2 = field2 + 1){
      Box[] box = { new Box(10+ size/2 *field2,10+ size/2 *size,size)};
    box[bs].Drawbox();
    bs = bs + 1;

    }
  }  

```

I figured out, that this would everytime create the rectangle 0.  
What can i do, that this would create the Rectangle 0, 1, 2, 3, …  
the complete Code isn’t ready yet, but I cant work on the other things, if this is wrong.  
Downthere is my complete code.  
The line grid is only for orientation.

Thank you

```auto

float fieldx, fieldy;
float tx, ptx, pty, ty;
float field1, field2;
float x = 30;
float y = 30;
float size = 50;
int bs;

ArrayList<PVector> grid;
int BoxSize = 10;

Draw2DArray[] array = {
  new Draw2DArray(x, y, size)
};

Draw2DArray c = new Draw2DArray(0, 0, 0);

  

void setup(){
  size(3000,2000);
  x = 1;
  tx = 0;
  ty = 0;
  
  

}

void draw(){

  if (keyPressed){
    if ( key == 'b'){
     x = x + 0.008;
    }
  else if (key == 'n') {
    x = x - 0.008;
  }
 }

if ((mousePressed) && (mouseButton == LEFT)){
  tx = ptx +mouseX *2 - 2000;
  ty = pty +mouseY *2 - 2000;
 
}
else {
  mouseReleased();
}

background(200);  
scale(x);
   translate(tx, ty);
for (Draw2DArray c : array) {
  c.Draw();

}
for (field1 = 0; field1 < y; field1 = field1 + 1){
    
    for (field2 = 0; field2 < x; field2 = field2 + 1){
      Box[] box = { new Box(10+ size/2 *field2,10+ size/2 *size,size)};
    box[bs].Drawbox();
    bs = bs + 1;

    }
  }  
}
  
class Draw2DArray{
  
  float Numx;
  float Numy;
  float lines;
  float Size;
  float SizeX;
  float SizeY;
  float field;
  float posx, posy, Posx;
  Draw2DArray(float NumX,float NumY, float SI){
  
  
  Numx = NumX;
  Numy = NumY;
  Size = SI;
  SizeX = Numy * Size;
  SizeY = Numx * Size;
  }
  
  float i = 10; 
void Draw() {  
    lines = 0;
    i = 0;
 
    for (lines = 0; lines < Numx; lines = lines + 1){ 
      line(10, i, SizeX, i);
      i = i + Size;
  }
  lines = 0;
  i = 0;
  for (lines = 0; lines < Numy; lines = lines + 1){ 
     line(i, 10, i, SizeY);
     i = i + Size;
  }  
  } 
  
}
  

void mouseReleased(){
  ptx = tx;
  pty = ty;
}

class Box{
  
  float Bx, By, Size;
  Box (float BX, float BY, float BS){
   
    Bx = BX;
    By = BY;
    Size = BS;
    
  }

  void Drawbox(){
 
  rect(Bx, By, Size, Size);
  
}
}

```

---

<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 7, 2019, 12:58am UTC](https://discourse.processing.org/t/solved-scalable-grid-with-rectangles/7256/2 "2019-01-07T00:58:37Z")

</div>

the minimal grid drawing would be

```auto
// https://discourse.processing.org/t/scalable-grid-with-rectangles/7256
int x = 10, y = x, w = 20, h = w;
int grid = 24, many = grid*grid;

void setup() {
  size(500, 500);
  stroke(0, 0, 200);
  fill(0,200,0);
}

void draw() {
  background(200,200,0);
  for (int i = 0; i < many; i++) rect(x+(i%grid)*w, y+(floor(i/grid))*h, w, h); 
}

```

---

<div class="post-metadata">

**Author:** ![blue-man](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@blue-man](https://discourse.processing.org/u/blue-man)\
**Post date:** [January 7, 2019, 5:28am UTC](https://discourse.processing.org/t/solved-scalable-grid-with-rectangles/7256/3 "2019-01-07T05:28:43Z")

</div>

@kll The problem is, that every rectangle must be an own object.  
With your code I can create a grid, but I cant choose the single rectangle in the grid.  
My goal is, that I can choose the single rectangle.

Example: box[258].State();

And for this I need a way to create every rectangle as own object.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [January 7, 2019, 5:36am UTC](https://discourse.processing.org/t/solved-scalable-grid-with-rectangles/7256/4 "2019-01-07T05:36:14Z")

</div>

Sample code:

```auto
class Cell {
  int id;
  float x, y, w, h;
  Cell(int iid, float ix, float iy) {
    id = iid;
    x = ix;
    y = iy;
    w = 40;
    h = 40;
  }
  void draw_card() {
      fill(255);
      if( over() ) { fill(255,255,0); }
      rect(x, y, w, h);
      fill(0);
      text( id, x + 15, y + 20);
  }
  void clicked(){
    if( over() ){
      println( id );
    }
  }
  boolean over(){
    return( x < mouseX && mouseX < x+w && y < mouseY && mouseY < y+h );
  }
}

Cell[] cells = new Cell[100];

void setup() {
  size(400, 400);
  int t = 0;
  for ( int y = 0; y<10; y++) {
    for ( int x = 0; x<10; x++) {
      cells[t] = new Cell(t++, 40 * x, 40 * y);
    }
  }
}

void draw() {
  background(0, 100, 0);
  int t = 0;
  for ( int y = 0; y<10; y++) {
    for ( int x = 0; x<10; x++) {
      cells[t++].draw_card();
    }
  }
}

void mousePressed() {
  for( Cell c : cells ) c.clicked();
}

```

---

<div class="post-metadata">

**Author:** ![blue-man](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@blue-man](https://discourse.processing.org/u/blue-man)\
**Post date:** [January 7, 2019, 5:56am UTC](https://discourse.processing.org/t/solved-scalable-grid-with-rectangles/7256/5 "2019-01-07T05:56:43Z")

</div>

@TfGuy44  
no way

Thank you very much, I saw my failure instantly.  
I wrote the line

```auto
Cell[] cells = new Cell[100];

```

Into the for - than loop…  
Thank you

---

<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 7, 2019, 9:12am UTC](https://discourse.processing.org/t/solved-scalable-grid-with-rectangles/7256/6 "2019-01-07T09:12:59Z")

</div>

> [@blue-man](#):
>
> The problem is, that every rectangle must be an own object.  
> With your code I can create a grid, but I cant choose the single rectangle in the grid.  
> My goal is, that I can choose the single rectangle.

the math is still the same,

- if you draw a grid of rect OR
- setup your own array of rectangles from class

> **example**
>
> ```auto
> // https://discourse.processing.org/t/scalable-grid-with-rectangles/7256
> int x = 20, y = x, w = 0, h = w;
> int grid = 8, many = grid*grid;
> 
> Myrect[] myrects= new Myrect[many];
> 
> void setup() {
> size(600, 400);
> // use x,y,grid as master and auto adjust rectangles (w,h) to window:
> w = ( width - 2 * x ) / grid;
> h = ( height - 2 * y ) / grid;
> for (int i = 0; i < many; i++) myrects[i]=new Myrect(x+(i%grid)*w, y+(floor(i/grid))*h);
> println("use: mouse LEFT to select, mouse RIGHT to deselect");
> }
> 
> void draw() {
> background(200, 200, 0);
> for (int i = 0; i < many; i++) {
> myrects[i].drawit(); // draw each rect   
> myrects[i].sel(); // check if mousebutton and over this for color
> }
> }
> 
> class Myrect {
> int x, y;//, w, h; from global
> boolean selected=false;
> Myrect (int x, int y) {
> this.x = x; 
> this.y = y;
> }
> void drawit() {
> stroke(0, 0, 200);
> if ( selected ) fill(0, 200, 0);
> else fill(200, 0, 200);
> rect(x, y, w, h);
> }
> boolean over() {
> return( x < mouseX && mouseX < x+w && y < mouseY && mouseY < y+h );
> }
> void sel() {
> if ( over() ) {
> if ( selected && mousePressed && mouseButton == RIGHT) selected=false;
> if ( !selected && mousePressed && mouseButton == LEFT) selected=true;
> }
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![blue-man](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@blue-man](https://discourse.processing.org/u/blue-man)\
**Post date:** [January 7, 2019, 2:24pm UTC](https://discourse.processing.org/t/solved-scalable-grid-with-rectangles/7256/7 "2019-01-07T14:24:27Z")

</div>

Thank you all very much,  
That helps me a lot.