#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# 2d array

edited February 2017

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!

Tagged:

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

• before `setup()`

``````Cell[][] grid = new Cell;
``````

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`

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

• edited February 2017 Answer ✓

@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.
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;
}
``````
• my objects based approach from above:

``````Cell[][] grid = new Cell;

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.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);
}
}
``````
• Thank you all!