# I need help with filling in a grid

**URL:** <https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939>\
**Category:** Coding Questions\
**Created:** [December 3, 2020, 9:43pm UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939 "2020-12-03T21:43:37Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 3, 2020, 9:43pm UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/1 "2020-12-03T21:43:37Z")

</div>

Hi,i created a 3x3 grid and i need each cell in the grid to change colour when clicked but it fills the entire screen. I’m, also unfortunately not allowed to use 2D arrays or the 'color function as I’ve seen online. Can someone please help me?

```auto
int noofGrids=3;
int Sizelength=500;
float SizeofGrid=Sizelength/noofGrids;

void setup() {
  size(500, 500);
}
void draw() {
  background(127);

  drawGrid();
}
void drawGrid() {
  for (int i=0; i<=noofGrids; i++) {
    for (int j=0; j<=noofGrids; j++) {
      float x=i*SizeofGrid;
      float y=j*SizeofGrid;
      rect(x, y, SizeofGrid, SizeofGrid);
    }
  }
}
void mouseClicked() {
  for (int i=0; i<noofGrids; i++) {
    for (int j=0; j<noofGrids; j++) {
     float x=i*SizeofGrid;
      float y=j*SizeofGrid;
    
      if ((mouseX>x && mouseX<x+SizeofGrid) &&( mouseY>y && mouseY<y+SizeofGrid)) {
        println(x, y);
     fill(0);
      
        
    
      }
     
  }
}}

```

---

<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:** [December 3, 2020, 10:12pm UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/2 "2020-12-03T22:12:04Z")

</div>

Without storing any data:  
get rid of background in draw() and draw the rect in mouseClicked with the new color

Don’t call drawgrid from draw, call it from setup ().

**Other approach**

Are you allowed to use a 1D grid? Then you can store the color (or int) in this. Use a counter in the nested for loop to keep track (use it as an index for the array)

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 3, 2020, 10:20pm UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/3 "2020-12-03T22:20:40Z")

</div>

thank you so much this helped a lot!, i would like to see an alternative to using a 1D grid if you dont mind. so could i use int[] color=new int[x_y or i_j or gridCol\*gridCol]?

---

<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:** [December 3, 2020, 10:28pm UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/4 "2020-12-03T22:28:34Z")

</div>

In my 2nd approach you use background again

You store the fact that a cell is pressed in mouseclicked

You store it in a 1D array

You evaluate the array in drawgrid

So you start a counter = 0 before the for loop in mouseclicked

When the if clause applies you say color [counter]= 1;

You increase the counter inside the inner for loop

* * *

in drawgrid use an if clause for color[] to set fill

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 3, 2020, 10:38pm UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/5 "2020-12-03T22:38:01Z")

</div>

im unfortunately not allowed to use the color function, if that’s what you meant ;(. if you’re referring to int []color , So the counter will be put in the array and used to fill in the grid?.

```auto
if (mouseClicked){counter++
filll(color[counter)];
rect(x,ysize,size) }?

```

---

<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:** [December 3, 2020, 10:51pm UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/6 "2020-12-03T22:51:06Z")

</div>

I didn’t mean the color function just an array that you can name as you want

before setup () :

int[] myColors…

or even type boolean

When I wrote mouseclicked I was referring to your function

Make changes to it as I suggested above

myColors[counter]=1;

in drawgrid function evaluate myColors[counter] with if

or use fill ( myColors[counter] );

---

<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:** [December 4, 2020, 6:54pm UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/7 "2020-12-04T18:54:39Z")

</div>

Did you make progress here? Anything I can help you with?

Please show your entire code then…

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 4, 2020, 9:14pm UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/8 "2020-12-04T21:14:56Z")

</div>

oh wow thanks for checking up ! yes the grid is filling in ,I’m still working on other things and trying to figure it out on my own:)

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 8, 2020, 10:21pm UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/9 "2020-12-08T22:21:57Z")

</div>

Good afternoon/evening, if you’d still be willing to help, could you please tell me if there’s anyway to assign a string array to a variable? for instance if i wanted to select the proper array based on the value given by the user(e.g if user enter 2 point to a certain array), how would i assign that? I hope this is coherent,i cant really post my entire code since someone might copy it :(.

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 8, 2020, 10:29pm UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/10 "2020-12-08T22:29:00Z")

</div>

for instance i created a function that has integer input(used to determine the array to be chosen) and a string array as parameters,how to i point the string array(lets say string[] eat) to the proper one it should use because i cant go eat=right array).

---

<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:** [December 9, 2020, 12:01am UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/11 "2020-12-09T00:01:03Z")

</div>

//if I understand you correctly:

//You want to receive an integer input and give back an String Array

//You can use if OR a HashMap

```auto

int[] arr0 = { 0, 3, 4 };
int[] arr1 = { 3, 5, 4 };
int[] arr2 = { 9, 2, 8 };

int[] selectedArray = null; 

void setup() {
  size(700, 700);
}

void draw() {
  background(0);
  fill(255);
}

void keyPressed() {
  if (key=='0') {
    println("here");
    selectedArray=arr0.clone();
  } else if (key=='1') 
    selectedArray=arr1.clone();
  else if (key=='2') 
    selectedArray=arr2.clone();

  if (selectedArray!=null)
    println(selectedArray);
}

```

OR

```auto

// HashMap

// Note the HashMap's "key" is a int and "value" is an int[] (int array)
HashMap<Integer, int[]> hm = new HashMap<Integer, int[]>();

void setup() {
  size(700, 700);

  int[] arr0 = { 0, 3, 4 };
  int[] arr1 = { 3, 5, 4 };
  int[] arr2 = { 9, 2, 8 };

  hm.put(0, arr0); 
  hm.put(1, arr1);
  hm.put(2, arr2);
}

void draw() {
  background(0);
  fill(255);
}

void keyPressed() {
  if (key=='0'||key=='1'||key=='2') {
    // We can access values by their key
    int[] val = (int[]) hm.get(int(key+""));
    println(key+" gives " );
    printArray(val);
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 9, 2020, 12:13am UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/12 "2020-12-09T00:13:23Z")

</div>

Thank you for replying,i noticed that in the first answer you sent you essentially equated the two int arrays once a key is pressed, using .clone() which im guessing is a java function?

---

<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:** [December 9, 2020, 12:22am UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/13 "2020-12-09T00:22:08Z")

</div>

yeah, clone was new to me too

It really copies the array instead of just giving the reference.

see [https://www.baeldung.com/java-deep-copy](https://www.baeldung.com/java-deep-copy)

---

<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:** [December 9, 2020, 12:23am UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/14 "2020-12-09T00:23:47Z")

</div>

> [@SadCSstudent](#):
>
> essentially equated the two int arrays once a key is pressed

yeah, well, the = sign is assigning the value of the right hand variable / array to the left hand variable (left of the equal sign)

> **[= (assign) / Reference](https://www.processing.org/reference/assign.html)**
>
> Assigns a value to a variable. The "=" sign does not mean "equals", but is used to place data within a variable. The "=" operator is formally called the assignment operator. There are many different t…

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 9, 2020, 12:27am UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/15 "2020-12-09T00:27:38Z")

</div>

oh no i know how to use the = sign lol its just that when i did it i had an error , ive identified the error i was making thank you, Can i ask another?its really short too

---

<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:** [December 9, 2020, 12:29am UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/16 "2020-12-09T00:29:58Z")

</div>

sure

go ahead

Chrisir

---

<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:** [December 9, 2020, 12:45am UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/18 "2020-12-09T00:45:00Z")

</div>

```auto

import javax.swing.JOptionPane;

void setup() {
  size(500, 500);
  textSize(20);
}

void draw() {
  background(128); 
  fill(255);
  rect(50, 250, 400, 200);
  fill(0);
  text("Click here for MessageDialog", 90, 350);
  text("mousePressed status: " + (mousePressed), 90, 125);

  // JOptionPane.showInputDialog("Error", JOptionPane.ERROR_MESSAGE);
}

void mousePressed() {
  if (mouseX > 50 && mouseX < 450 && mouseY > 250 && mouseY < 450) thread("MessageDialog_thread");
} 

void MessageDialog_thread() {
  JOptionPane.showMessageDialog(null, "OK.", "Message", JOptionPane.PLAIN_MESSAGE);
}

```

---

<div class="post-metadata">

**Author:** ![SadCSstudent](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@SadCSstudent](https://discourse.processing.org/u/SadCSstudent)\
**Post date:** [December 9, 2020, 12:48am UTC](https://discourse.processing.org/t/i-need-help-with-filling-in-a-grid/25939/19 "2020-12-09T00:48:26Z")

</div>

thank you for answering all these questions you’ve been a huge help!till next time!