# Reset grid back to white

**URL:** <https://discourse.processing.org/t/reset-grid-back-to-white/20782>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 12, 2020, 1:20pm UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782 "2020-05-12T13:20:24Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![alex](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@alex](https://discourse.processing.org/u/alex)\
**Post date:** [May 12, 2020, 1:20pm UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/1 "2020-05-12T13:20:24Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 12, 2020, 1:29pm UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/2 "2020-05-12T13:29:34Z")

</div>

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

if so, just say

```auto
  //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;
    }
  }

```

---

<div class="post-metadata">

**Author:** ![alex](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@alex](https://discourse.processing.org/u/alex)\
**Post date:** [May 13, 2020, 9:20am UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/4 "2020-05-13T09:20:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 13, 2020, 9:50am UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/5 "2020-05-13T09:50:46Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![alex](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@alex](https://discourse.processing.org/u/alex)\
**Post date:** [May 13, 2020, 11:46am UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/6 "2020-05-13T11:46:30Z")

</div>

```auto
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.’

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 13, 2020, 11:47am UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/7 "2020-05-13T11:47:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 13, 2020, 11:48am UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/8 "2020-05-13T11:48:46Z")

</div>

> [@Chrisir](#):
>
> ```auto
> colorofcell[i][j] = color(255);
> Celldifferent[i][j] = false;
> 
> ```

these lines you still need also

---

<div class="post-metadata">

**Author:** ![alex](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@alex](https://discourse.processing.org/u/alex)\
**Post date:** [May 13, 2020, 11:59am UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/9 "2020-05-13T11:59:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 13, 2020, 1:47pm UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/10 "2020-05-13T13:47:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![alex](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@alex](https://discourse.processing.org/u/alex)\
**Post date:** [May 13, 2020, 2:29pm UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/11 "2020-05-13T14:29:32Z")

</div>

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

```auto
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();
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 13, 2020, 2:50pm UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/12 "2020-05-13T14:50:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![alex](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@alex](https://discourse.processing.org/u/alex)\
**Post date:** [May 14, 2020, 2:43am UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/13 "2020-05-14T02:43:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 14, 2020, 11:34am UTC](https://discourse.processing.org/t/reset-grid-back-to-white/20782/14 "2020-05-14T11:34:54Z")

</div>

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:

```auto
      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():

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

```

Chrisir 😉