You can't store both x and y values of a grid in a two-dimensional int array.
A way to do what you want is the following:
It uses a three-dimensional array to store x and y values of the grid.
Code:
int [][][] cells;
int [][] cellColor;
int cellSize = 10;
void setup(){
size(100,100);
colorMode(HSB, 100,100,100);
int cols = width/cellSize;
int rows = height/cellSize;
cells = new int[cols][rows][2];
cellColor = new int[cols][rows];
}
void draw(){
int hueVal = 0;
for(int i = 0; i < cells.length; i++){
for(int j = 0; j < cells.length; j++){
cells[i][j][0] = i*cellSize;
cells[i][j][1] = j*cellSize;
cellColor[i][j] = hueVal ++;
fill(cellColor[i][j], 100, 100);
rect(cells[i][j][0], cells[i][j][1], cellSize, cellSize);
}
}
}
But in this particular case I would not use an array to store the x and y values, because calculating them is so easy:
Code:
int [][] cellColor;
int cellSize = 10;
void setup(){
size(100,100);
colorMode(HSB, 100,100,100);
int cols = width/cellSize;
int rows = height/cellSize;
cellColor = new int[cols][rows];
}
void draw(){
int hueVal = 0;
for(int i = 0; i < cellColor.length; i++){
for(int j = 0; j < cellColor[i].length; j++){
cellColor[i][j] = hueVal ++;
fill(cellColor[i][j], 100, 100);
rect(getX(i), getY(j), cellSize, cellSize);
}
}
}
int getX(int i)
{
return i*cellSize;
}
int getY(int j)
{
return j*cellSize;
}