[SOLVED] Scalable grid with rectangles

Processing Coding Questions
1

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.

   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


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);
  
}
}
1 Like
2

the minimal grid drawing would be

// 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); 
}
1 Like
3

@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.

4

Sample code:

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();
}
1 Like
5

@TfGuy44
no way

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

Cell[] cells = new Cell[100];

Into the for - than loop…
Thank you

6

the math is still the same,

  • if you draw a grid of rect OR
  • setup your own array of rectangles from class
example 
// 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;
    }
  }
}
1 Like
7

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