2d array

jaspervanblokland

Hi There,

I made a horizontal (columns) grid and vertical (rows) grid of different rectangles (10 x 10) Now I want to declare the coördinates of an other individual rectangle on that grid by using an array. ( coördinate[x][y] ) For example, the rectangle can have a x-coördinate on the second of the columns and a y-coördinate on the third of the rows.

Can someone help me with this question

Thanks!

Chrisir

Show your code

jaspervanblokland

Its still just simple

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

void draw() { for (int i = 0; i < width; i = i+width/10-10) { for (int j = 0; j < height; j = j+height/10-10) { rectMode(CENTER); rect(i, j, 20, 20); } } }

Chrisir

before setup()

Cell[][] grid = new Cell[10][10];

Make the for loops from 0 to <10

in setup() define all cells with a double for loop and

grid[i][j] = new Cell(i*width/10-10, j*height/10-10);

and in draw say in a double for loop:

grid[i][j].display();

Also make a class Cell

Chrisir

Also read the tutorial about objects

https://www.processing.org/tutorials/objects/

jeremydouglass

@jaspervanblokland -- Here are different approaches:

1. define an array of coordinates and use it to look up translated coordinates before calling rect()
2. create a 2d array of objects, each with a display() method, as per @Chrisir
3. use scale(x,y) to scale your drawing space directly, then use rect() as normal.
   • https://processing.org/reference/scale_.html
4. create global units of grid measurement (e.g. wStep, hStep) and use them as multipliers when drawing your grid points or mapping things to that grid.

Your title suggests the first approach; here is an example of the last approach based on what you did in your short example sketch:

float wStep;
float hStep;

void setup() { 
  size(500, 500);
  // define the grid in units
  wStep = width/10;
  hStep = height/10;
}

void draw() { 
  background(192);

  // draw grid
  pushStyle();
  rectMode(CENTER); 
  for (int j = 0; j < height+hStep; j = j+(int)hStep) { 
    for (int i = 0; i < width+wStep; i = i+(int)wStep) { 
      rect(i, j, 10, 10);
    }
  }
  popStyle();

  // draw a grid 3x2 rectangle at grid 1,1
  gridRect(1,1,3,2);

}

void gridRect(float x, float y, float w, float h){
  rect(x*wStep,y*hStep,w*wStep,h*hStep);
}

// adjust the grid units by clicking mouse
// somewhere in the upper left corner
void mouseReleased(){
  wStep = mouseX;
  hStep = mouseY;
}

Chrisir

my objects based approach from above:

Cell[][] grid = new Cell[10][10];

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

  for (int i = 0; i < 10; i++) { 
    for (int j = 0; j < 10; j++) {
      grid[i][j] = new Cell(i*width/10+15, j*height/10+15);
    }
  }

  grid[2][4].colorCell = color(255, 2, 2); //red
}

void draw() { 
  for (int i = 0; i < 10; i++) { 
    for (int j = 0; j < 10; j++) {
      grid[i][j].display();
    }
  }
}

class Cell {

  float x, y; 
  color colorCell = color(255); // white  

  Cell(float xTemp, float yTemp) {
    x=xTemp; 
    y=yTemp;
  } // Constr 

  void display() {
    rectMode(CENTER);
    fill(colorCell); 
    rect(x, y, 20, 20);
  }
}

jaspervanblokland

Thank you all!