# Having trouble with my grid

Having trouble with the for loops. I need to keep the grid but get rid of the excess lines.
If anyone could help. I’m very new to all this.

``````size(500,500);

final int N = 25;

for(int i=0; i<N; i++){
float xPosition = (width-1)*(i/(N-1.0));
float yPosition = (height-1)*(i/(N-1.0));

line(41,yPosition,width-251,yPosition);
line(xPosition,62,xPosition,height-85);
}
``````
1 Like
``````for(int i=0; i<total; i++){
float sw = width/total;
float sh = height/total;
float xPosition = 0+sw*i;
float yPosition = 0+sh*i;

//float yPosition = (height-1)*(i/(total-1.0));

stroke(0);
line(0,yPosition,width,yPosition);
line(xPosition,0,xPosition,height);
``````

this will cause issues depending on what kind of grid you are using, if you are drawing to a square grid, there will be no problems, if you are drawing to a rectangular grid it will cause problems. The code will only draw to whichever has the min distance.

an alternative would be to call rect and use noFill(), or to use 2 separate for loops.

3 Likes

Hi @IsaiahZ,

As PaulGoux suggested, you might be better off using `rect()`

``````int W = 10, H = 17;
int N = W*H;
int step = 25;

void setup(){
size(500, 500);
noFill();

for (int i=0; i<N; i++) {
float x = i%W;
int y = i/W;
rect(x * step, y * step, step, step);
}
}
``````
3 Likes

extended version using a nested (double for loop) to make the grid

also some mouse stuff like, when the mouse is over a cell or when you click a cell

``````

final int W = 8, H = 12;

final int STEP = 25;

int textToDisplayOnTheSide=-1;

void setup() {
size(1500, 500);
noFill();
background(22);
}

void draw() {

background(22);
stroke(255);

int k=0;

for (int x=0; x<W; x++) {
for (int y=0; y<H; y++) {

// appropriate color
if (over(x, y, STEP))
fill(255, 0, 0);
else fill(0);

// rect
rect(x * STEP+30, y * STEP+30,
STEP-3, STEP-3);

// text in each cell
fill(255); // white
textAlign(CENTER);
text(k,
x * STEP+30+14, y * STEP+30+12+4);

k++;
}//for
}//for

// result text on the right
if (textToDisplayOnTheSide!=-1) {
fill(255); // white
textAlign(LEFT);
text("Last Click was: \n"
+textToDisplayOnTheSide,
W * STEP+30+40, 144);
}

// status bar
statusBar();
}//func

void mousePressed() {
int k=0;
for (int x=0; x<W; x++) {
for (int y=0; y<H; y++) {
if (over(x, y, STEP)) {
//found
textToDisplayOnTheSide = k;
return; // leave
}//if
k++;
}//for
}//for
}//func

void statusBar() {
fill(111);
noStroke();
rect(0, height-20,
width, 22);

fill(255); // white
textAlign(LEFT);
text("Move mouse over grid or click one cell",
13, height-6);
}

boolean over(float x, float y, float step) {
return mouseX > x * step+30 &&
mouseX < x * step+30 + step &&
mouseY > y * step+30 &&
mouseY < y * step+30 + step;
}
//
``````
4 Likes

I like this solution but I need the grid to start at rect(50, 50, width, height) and not at 0,0 like it does in that code. I’m having trouble starting it at that.

1 Like

Replace all zeros in my code with 50

1 Like

here’s an easy to use grid program I made if you are interested

1 Like

You almost have it.

Read carefully Chrisir’s answer, especially line 29 where he added an offset of 30 pixels to the x and y coordinates of the rectangles.

``````rect(x*STEP + 30, y*STEP + 30, STEP-3, STEP-3);
``````

What do you think adding an offset of 50 instead would look like ?

2 Likes