# Change color of one rect in grid

**URL:** <https://discourse.processing.org/t/change-color-of-one-rect-in-grid/18349>\
**Category:** Coding Questions\
**Created:** [March 3, 2020, 3:01pm UTC](https://discourse.processing.org/t/change-color-of-one-rect-in-grid/18349 "2020-03-03T15:01:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Roy1825](https://avatars.discourse-cdn.com/v4/letter/r/f9ae1b/32.png) [@Roy1825](https://discourse.processing.org/u/Roy1825)\
**Post date:** [March 3, 2020, 3:01pm UTC](https://discourse.processing.org/t/change-color-of-one-rect-in-grid/18349/1 "2020-03-03T15:01:28Z")

</div>

Hi everyone!

I created a grid of rects using a 2d array. I now want to be able to click on a rect and have it change its color. With the code I have now, all rects change color when clicked. What am I doing wrong?

```auto
int no = 16;
int rectW;
int rectH;
int cols = no / 2;
int rows = no / 2;
int[][] rects; 
color p = 255;

void setup() {
  size(600,600); 
  background(150);
  rectW = width / rows;
  rectH = height / cols;
  rects = new int[cols][rows];
}

void draw() {
  background(150);
  drawGrid();
}

void drawGrid() {
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      fill(p);
      rect(i*rectW,j*rectH, rectW, rectH, 5);
    }
  }
}

void mouseClicked() {
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      int x = i*rectW;
      int y = j*rectH;
      if(mouseX >= x && mouseX <= (x+rectW) && mouseY >= y && mouseY <= (y+rectH)) {
          p = 0; }
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)\
**Post date:** [March 3, 2020, 3:21pm UTC](https://discourse.processing.org/t/change-color-of-one-rect-in-grid/18349/2 "2020-03-03T15:21:32Z")

</div>

Without OOP it’s a little bit confuse but you can try this

```auto
int no = 16;
int rectW;
int rectH;
int cols = no / 2;
int rows = no / 2;
int[][] rects = new int[cols][rows];
color[] p = new color[cols*rows];
void setup() {
  size(600,600); 
  background(150);
  rectW = width / rows;
  rectH = height / cols; 
  for(int i=0; i<p.length; i++) p[i] = 255;
}
void draw() {
  background(150);
  drawGrid();
}
void drawGrid() {
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      fill(p[i+j*cols]);
      rect(i*rectW,j*rectH, rectW, rectH, 5);
    }
  }
}
void mouseClicked() {
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      int x = i*rectW;
      int y = j*rectH;
      if(mouseX >= x && mouseX <= (x+rectW) && mouseY >= y && mouseY <= (y+rectH)) {
          p[i+j*cols] = 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:** [March 3, 2020, 3:59pm UTC](https://discourse.processing.org/t/change-color-of-one-rect-in-grid/18349/3 "2020-03-03T15:59:19Z")

</div>

> [@matheplica](#):
>
> color p

Could also be a 2D array - would be easier to read

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 3, 2020, 4:10pm UTC](https://discourse.processing.org/t/change-color-of-one-rect-in-grid/18349/4 "2020-03-03T16:10:39Z")

</div>

[Studio.ProcessingTogether.com/sp/pad/export/ro.9L5jAtga7SpyF](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9L5jAtga7SpyF)  
[Studio.ProcessingTogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx)