# [SOLVED] Scalable grid with rectangles

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

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

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

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

@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

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

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