Array grid with click functions in Processing - grid

Question

I have a grid that is clickable but I am unsure how to proceed with a certain set of rules.
Edit: I rewrote the rules in a more understandable fashion. Very similar to that of the game of life.
Setup
21 cells across / columns
10 cells down / rows
4 base cells vertically aligned in the centre of the board.
Outline cells will surround the base cells.
Every other cell begins as inactive.
Base Cells [2]
Constant and active blue cells in the middle, which cannot be removed.
Active [0] -> [1]
When clicked, an inactive white cell becomes black
if
the edge touches the edge of a base cell
or
the edge touches the edge of another active cell
(either to the left, right, top or bottom – not diagonally.)
else
remain inactive
Inactive [1] -> [0]
When clicked, an active black cell returns to white.
Outline [3]
A series of yellow cells that will constantly update to surround the neighborhood of active cells.
Could anyone help me in achieving this, I would appreciate comments to help me understand the process.
Here is my current code:
int boxsize = 100;
int cols, rows;
color[][] colors;
int saved_i = -1;
int saved_j = -1;
void setup() {
size(1300, 600);
cols = width/boxsize;
rows = height/boxsize;
colors = new color[cols][rows];
for (int i=0; i<cols; i++) {
for (int j=0; j<rows; j++) {
colors[i][j] = color(255);
}
}
}
void draw() {
background(255);
for (int i=0; i<cols; i++) {
for (int j=0; j<rows; j++) {
fill(colors[i][j]);
rect(i*boxsize, j*boxsize, boxsize, boxsize);
}
}
}
void mousePressed() {
for (int i=0; i<cols; i++) {
for (int j=0; j<rows; j++) {
int x = i*boxsize;
int y = j*boxsize;
if (mouseX > x && mouseX < (x + boxsize) && mouseY > y && mouseY < (y + boxsize)) {
if ( saved_i == -1 || saved_i == i || saved_j == j ) {
colors[i][j] = color(0);
if (j>0) colors[i][j-1]=color(255, 255, 0);
if (j>0) colors[i+1][j-1]=color(255, 255, 0);
if (j<rows-1) colors[i][j+1]=color(255, 255, 0);
if (j<rows-1) colors[i+1][j+1]=color(255, 255, 0);
if (i>0) colors[i-1][j]=color(255, 255, 0);
if (i>0) colors[i-1][j-1]=color(255, 255, 0);
if (i>0) colors[i-1][j+1]=color(255, 255, 0);
if (i<cols-1) colors[i+1][j]=color(255, 255, 0);
saved_i = i;
saved_j = j;
}
}
}
}
}

Answer 1

Your question is pretty broad, so I'll answer in broad terms. You need to figure out four things:
How to represent your cells. In other words, what type of variable you want to store your grid in. You're using colors now, but you probably don't want to do it that way. The way I see it, you have three logical options:
Use a 2D array of enum values. The enum would have states for BASE, ACTIVE, INACTIVE, and OUTLINE. This is probably the correct way to go.
Use a 2D array of ints. 0 for base, 1 for active, 2 for inactive, 3 for outline. Using an enum is probably better, but this is probably easier for a novice to understand.
Use a 2D array of objects. Create a class that represents a cell, and the object would store its state (in either an enum or an int). You would use this approach if you wanted other logic inside each cell, or maybe if you wanted each cell to keep track of its own neighbors.
How to change the state of a single cell on mouse click. You've got logic that deals with colors, now you just have to apply that logic to the data structure you choose in step 1. Maybe create a function that takes mouseX and mouseY and returns the position in the array at that location.
How to get the new state for each cell for the next generation. Create a function that takes the position of one cell (its row and column in the 2D array) and returns the state that the cell should have in the next generation. This is the "meat and potatoes" of your project, and separating it out will help you isolate the logic. Get out a piece of grid paper and draw some examples. If you know the position of a cell, what are the positions of its neighbors? There are a ton of tutorials on the Game of Life out there that will have this logic.
How to update your grid. Remember that you have to do step 2 to every cell in the grid before you update the whole grid. This means that you have to make a new 2D array each iteration.
Break your problem down down like this, and post a new question if you get stuck on a particular step. It's hard to help with general "how do I do this" type questions. It's much easier to help with more specific questions like "I tried X, expected Y, but got Z instead. What am I doing wrong?"
Good luck!