Help with grid layout and detection

Processing Coding Questions
1

New to processing, had a small module of it in a visual computing course.

Lets say that I want to define a 4x4 grid, named 1,2,3,etc. and that when mouse hovers it, it prints the name of that cell.

I managed to do it manually with lots of ifs using mouseX, mouseY, etc. But surely there’s a better way right?

if(movimentox<160 && movimentoy < 120){
    posicao = 0;
    ind=posicao;
    println("p0");
  }else if(movimentox<320 && movimentoy < 120 && movimentox>160 ){
    posicao = 1;
    ind=posicao;
    println("p1");
  }else if(movimentox<480 && movimentoy < 120 && movimentox>320 ){
    posicao = 2;
    ind=posicao;
    println("p2");
  }else if(movimentox<640 && movimentoy < 120 && movimentox>480 ){
    posicao = 3;
    ind=posicao;
    println("p3");
  }else if(movimentox<160 && movimentoy > 120 && movimentoy<240 ){
    posicao = 4;
    ind=posicao;
    println("p4");
  }else if(movimentox<320 && movimentoy < 240 && movimentox>160 && movimentoy>120){
    posicao = 5;
    ind=posicao; 
    println("p5");
  }else if(movimentox<480 && movimentoy < 240 && movimentox>320 && movimentoy>120){
    posicao = 6;
    ind=posicao; 
    println("p6");
  }else if(movimentox<640 && movimentoy < 240 && movimentox>480 && movimentoy>120){
    posicao = 7;
    ind=posicao; 
    println("p7");
  }else if(movimentox<160 && movimentoy > 240 && movimentoy<360){
    posicao = 8;
    ind=posicao; 
    println("p8");
  }else if(movimentox<320 && movimentoy < 360 && movimentox>160 && movimentoy>240){
    posicao = 9;
    ind=posicao; 
    println("p9");
  }else if(movimentox<480 && movimentoy < 360 && movimentox>320 && movimentoy>240){
    posicao = 10;
    ind=posicao; 
    println("p10");
  }else if(movimentox<640 && movimentoy < 360 && movimentox>480 && movimentoy>240){
     posicao = 11;
    ind=posicao;
    println("p11");
  }else if(movimentox<160 && movimentoy > 360 && movimentoy<480){
    posicao = 12;
    ind=posicao; 
    println("p12");
  }else if(movimentox<320 && movimentoy < 480 && movimentox>160 && movimentoy>360){
    posicao = 13;
    ind=posicao; 
    println("p13");
  }else if(movimentox<480 && movimentoy < 480 && movimentox>320 && movimentoy>360){
    posicao = 14;
    ind=posicao; 
    println("p14");
  }else if(movimentox<640 && movimentoy < 480 && movimentox>480 && movimentoy>360){
    posicao = 15;
    ind=posicao; 
    println("p15");
  }
2
  1. Studio.ProcessingTogether.com/sp/pad/export/ro.9hc1FSKJk66wK
  2. Studio.ProcessingTogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx
  3. Studio.ProcessingTogether.com/sp/pad/export/ro.93MhRWK35nIP8
  4. Studio.ProcessingTogether.com/sp/pad/export/ro.9L5jAtga7SpyF
  5. Studio.ProcessingTogether.com/sp/pad/export/ro.9vAkI4JDuLs8s
3

Which grid cell is a mouse in? There are many ways to do that – @GoToLoop linked to a bunch of different approaches. The best one depends on what you are trying to accomplish.

For example: Do you want your code to be able to support 2x2, 3x3, or 4x4 grids? Do you want grid cells to be able to do many things, like change colors or display images or videos? Should the grid cells be movable, or should the be able to be different shapes (like triangles)?

Some general approaches could involve objects, such as:

  1. a Grid object, which is either
    1a. a collection of Cell objects, or
    1b. a list of grid properties (cols, rows, dimensions)
  2. a rect-point collision detection algorithm, which is part of the Cell class and/or part of the Grid class.

You pass your mouse pointer to the collision method, which checks the cell(s) and confirms if there is a collision. The nice thing about this is that it is very flexible, and you can define grid cells as anything – squares, circles, triangles – and you can add and remove or move individual cells.

If you want a rectangular grid – and just a grid – are interested in simplicity and raw performance, a different approach to doing a collision check on each grid cell is to instead transform your mouse coordinates into an index lookup on a 2D array.

So you want your mouse to tell you this:

mouse 143, 57  -->  grid[2][1]
mouse 38, 201  -->  grid[0][5]

…you could do that something like this:

// what cell is the mouse over?
cx = (int)((mouseX - grid.x) / grid.cellwidth)
cy = (int)((mouseY - grid.y) / grid.cellheight)
// get that cell
float[] cell = grid[cy][cx];
// draw that cell
rect(cell[0], cell[1], cell[2], cell[3])
3 Likes