Having trouble with my grid

Processing Coding Questions
1

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

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);
    }
}
4

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;
}
//
5

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.

6

Replace all zeros in my code with 50

7

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

8

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 ?