Processing java mode create a grid of numbers with an image (THE GIMP)

In this code i show you how to create a grid of numbers with an image (the code really starts at 3 min 55 secondes)

[coprocessingcoprocessing]

PImage blue_button, green_button;

int N_BUTTONS_X = 7;
int N_BUTTONS_Y = 10;

int [][] button_posi_x, button_posi_y;
int button_width, button_height;

color background_color = color(100, 50, 255);

int button_clicked = 0;

void settings() {
size(displayWidth, displayHeight, P3D);
}

void setup() {

button_posi_x = new
button_posi_y = new

blue_button = loadImage("blue_button.png");
green_button =

button_width = blue_button.width; // 60
button_height = blue_button.height; // 60

for (int row = 0; row < N_BUTTONS_Y; row++) {
for (int col = 0; col < N_BUTTONS_X; col++) {

button_posi_x[row][col] = 100 + (col * button_width );
button_posi_y[row][col] = 30 + (row * button_height );
}
}
}

void draw() {

background(background_color);

display_the_grid();
}

void mousePressed() {

int index = 0;
for (int row = 0; row < N_BUTTONS_Y; row++) {
for (int col = 0; col < N_BUTTONS_X; col++) {
index++;

if (mouseX > button_posi_x[row][col] &&
mouseX < button_posi_x[row][col] + button_width &&
mouseY > button_posi_y[row][col] &&
mouseY < button_posi_y[row][col] + button_height) {
button_clicked = index;
}
}
}
}

void display_the_grid() {

fill(255);

textSize(200);
text(button_clicked, 600, 350);

textSize(28);

int index = 0;
for (int row = 0; row < N_BUTTONS_Y; row++) {
for (int col = 0; col < N_BUTTONS_X; col++) {
index++;
PImage my_button = (index == button_clicked) ? green_button : blue_button;
image(my_button, button_posi_x[row][col], button_posi_y[row][col]);

text(nf(index, 2), 15 + button_posi_x[row][col], 40 + button_posi_y[row][col]);
}
}
}

[skutsha]

this is very good, may i ask a question that. If I want to keep the changed color when I click the other number, how can I do? Change the void mouseClicked? Or the text()?

I have tried many time and those are wrong.