Reset grid back to white

Processing Coding Questions
1

Hi all. I’m new to Processing. I have managed to make this grid of squares which is assigned a random colour after each mouse click.
After all the squares have been filled, I want to reset the squares back to white one by one on the next mouse click. However, I don’t understand how I can do it. How can i achieve this?

1 Like
2

you can make a function count to check whether the cells are all != white or all filled

if so, just say

  //initialising the values of color of each cell
  for (int i =0; i<columns; i++) { 
    for (int j = 0; j<rows; j++) {
      colorofcell[i][j] = color(255);
      Celldifferent[i][j] = false;
    }
  }
1 Like
4

Hi i did what you suggested and it worked. But how can i make the animation such that each square can be seen going back to white individually?

5

That’s a good question!

Since draw() updates the screen only once at its end, you can’t see the animation of the rects going back to white individually.

Therefore we need a solution that works with the fact that draw() updates the screen only once at its end.

This can be achieved when you get rid of the 2 nested for loops and instead
set the variables as the for loops would do:

i++;
if(i>....) {
    i=0; 
    j++;
}

Then i is increased only one time during the run of draw() and then the screen is updated, i is increased again and so on…

Chrisir

1 Like
6 
void draw() {
     i++;
     if(i > columns ){
       i = 0;
       j++;
     }

is this how it’s supposed to be? because if i do this then an error comes: ‘i cannot be resolved to a variable.’

7

I have given you pseudo code

of course you have to say int i,j; before setup()

also, you have to check when j is getting too big (at the end) and stop the animation

8

these lines you still need also

9

i don’t know what i’m doing wrong but i tried using if loops instead of the nested for loops and now i’m not able to draw grids at all

10

Sorry for that!

Please post your entire code.

My guess it that you should make a boolean marker that tells you when the user has filled all the rects. When this marker is true, the animation (all go white again) runs.

11

Umm sure here you go. Ahh i did try using a boolean but can’t figure it out.

int grid [][];
int rows; //number of rows
int columns; //number of columns
float rowH; //height og each cell
float columnW; //width of each cell
color [][] colorofCell; // array holding colour of each cell
boolean [][] isCellDifferent; //array holding which cell is involved
int counter;
int i = 0;
int j = 0;

void setup() {
  counter = 0;
  size(600, 600);
  frameRate(60);
  rows = 5;
  columns = 5;
  grid = new int[rows][columns]; //array holding cells in the grid
  rowH = (height -1)/float(rows);
  columnW = (width -1)/float(columns);
  colorofCell = new color[rows][columns]; //array holding colour of cells
  isCellDifferent = new boolean [rows][columns];
  initcolor();
}
//initial grid with white squares
void initcolor() { 
  i++;
  if(i>columns){
    i = 0;
  }
  j++;
  if(j>rows){
    j = 0;
  }
     colorofCell[i][j] = color(255);
      isCellDifferent[i][j] = false;
}

void draw() {
   i++;
  if(i>columns){
    i = 0;
  }
  j++;
  if(j>rows){
    j = 0;
  }
      float x = i*columnW; // x coordinate of rect
      float y = j*rowH; //y coordinate of rect 
      if ((mouseX > x && mouseX< x+ columnW) && (mouseY > y && mouseY < y + rowH) && isCellDifferent[i][j] == false ) { //when mouse is over a square the square is coloured yellow
        fill(255, 255, 0);
      } else {
        fill(colorofCell[i][j]);
      }

      rect(x, y, columnW, rowH); //drawaing the cells 

}

void mouseClicked() {
  int counter = 0; //counts if all sqaures are filled or not
   i++;
  if(i>columns){
    i = 0;
  }
  j++;
  if(j>rows){
    j = 0;
  }
      if (colorofCell [i][j] != color(255)) {
        counter++;
        println(counter);
      }
      float x = i*columnW; 
      float y = j*rowH; 

      if ((mouseX > x && mouseX< x+ columnW) && (mouseY > y && mouseY < y + rowH) && isCellDifferent[i][j] == false) { //coloring the grids one by one with a random color
        colorofCell[i][j] = color(random(255), random(255), random(255));
        isCellDifferent[i][j] = true;
      }
  if (counter == 25) {
    initcolor();
  }
}
1 Like
12

Is this your latest version?

I can’t see where you

  • check if ALL fields have been set by the user
  • where you use i and j (but not with a loop)
  • and where you use the marker?

Can’t do it for you

13

Sorry I mistakenly posted my previous code. I have edited my response above. I get an error when i try using if loops and also no grid

14

Sorry, that’s not the way to go.

You replaced ALL for-loops with a i / j structure.

But that’s not right, only the for-loops concerning the animation should be replaced with a i / j structure. This is used to do these lines:

      colorofcell[i][j] = color(255);
      Celldifferent[i][j] = false;

In fact you still need a nested for loop in

  • initcolor()
  • mouseClicked()
  • a function to count the filled grids (or do this in mouseClicked() )
  • and in draw() to display the grid (no matter whether the part where the user selects cells or the animation).

Also, somehow your deleted your old code / overwritten it, so I don’t have your old for loops anymore… bad. Please don’t remove part of posts.

Thank you!

You could have this instead of the marker before setup():

// this is like the boolean marker I recommended !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
final int receiveUserInput   = 0; 
final int makeAllGridsWhite  = 1;
int state = receiveUserInput;

Chrisir :wink:

1 Like