How to create an array grid with click functions?

shrek

I'm new to processing and have starting working on smaller projects to get my skill and understanding up.

I'm wanting to create a grid where each square is clickable, however there are a few features that I'm not sure how to implement.

Firstly, when a square is clicked I want it to change to black, then the squares that surround the coloured square to change to yellow - kind of like edge detection.

Secondly, the first clicked square I want to establish as the starting point, meaning the next square I clicked wouldn't change to black unless it was vertically or horizontally connected to the black square (not diagonally.) Again if this meets the set rules the squares surrounding these two shapes would also turn yellow.

Finally this would continue, I could continue to click on squares that were adjacent to any of the clicked squares and they would turn black and light up the squares around them.

I currently have code that generates the grid and is clickable, but I am not sure where to go from here. Any help and feedback would be greatly appreciated.

int boxsize = 100;
int cols, rows;
color[][] colors;

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++) {
      int x = i*boxsize;
      int y = j*boxsize;
      if (mouseX > x && mouseX < (x + boxsize) && mouseY > y && mouseY < (y + boxsize)) {
        if (mousePressed && (mouseButton == LEFT)) {
          colors[i][j] = color(0);
        }
      }
      fill(colors[i][j]);
      rect(x, y, boxsize, boxsize);
    }
  }
}

shrek

Looking into this more, I can see how it is very similar to the game of life except the cells are initiated to an 'alive' state manually.

TfGuy44

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<rows-1) colors[i][j+1]=color(255, 255, 0);
          if (i>0) colors[i-1][j]=color(255, 255, 0);
          if (i<cols-1) colors[i+1][j]=color(255, 255, 0);
          saved_i = i;
          saved_j = j;
        }
      }
    }
  }
}

shrek

Thank you for your reply! This is very close to what I'm looking for.

Perhaps my description wasn't very clear. Just to clarify, when a cell is clicked I want the neighbourhood of cells to turn yellow so the black cell is completely surrounded.

From there, only cells which are vertically and horizontally in contact with the black cell can be selected (so the current yellow squares that are being highlighted)

TfGuy44

You should be able to use the above example to make what you want yourself. At least attempt it.

shrek

Yes, I got the surrounding squares to change colour. I am just not sure how to approach the next bit.

Currently each time you click the yellow squares stay where they were, would you have to move this into draw if you wanted the yellow squares to constantly update and surround the black cells?

TfGuy44

You could do it this way:

Have a boolean that remembers when the first square has been pressed.

If that boolean is false, then any press is valid, and you can set the colors for the clicked square as black and the adjacent ones as yellow. You would also set the boolean.

If the boolean is set to true, then only clicks on yellow squares are valid. If a yellow square isn't pressed, do nothing. But if a yellow one is pressed, iterate over all the squares and change the yellow ones to white, then set the one that was clicked to black and the adjacent ones to yellow.

shrek

Thanks for your help TfGuy44, I will have a play with booleans and post up my code later. As I mentioned earlier I am still trying to grasp the concepts of processing.