# Mouse click to add rows and columns to grid

**URL:** https://discourse.processing.org/t/mouse-click-to-add-rows-and-columns-to-grid/37392
**Category:** Coding Questions
**Tags:** homework
**Created:** [June 7, 2022, 8:50pm UTC](https://discourse.processing.org/t/mouse-click-to-add-rows-and-columns-to-grid/37392 "2022-06-07T20:50:36Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![hues\_storm](https://avatars.discourse-cdn.com/v4/letter/h/df788c/32.png) [@hues\_storm](https://discourse.processing.org/u/hues_storm)
#### Post date: [June 7, 2022, 8:50pm UTC](https://discourse.processing.org/t/mouse-click-to-add-rows-and-columns-to-grid/37392/1 "2022-06-07T20:50:36Z")

</div>

Hi, hope someone can help - I am trying to make a grid that when you mouse is clicked it adds another column and row - like an ever expanding grid -  
I have the base set up for a grid and i know i need a void mouseFunction - but unsure how to weave it all together?

```auto
float tilesX, tilesY, tileW, tileH;

void setup() {
  size(900, 900);
  tilesX = 4;
  tilesY = 4;
  //translate(width = mouseX,height = mouseY);
  tileW = width / tilesX;
  tileH = height / tilesY;
}

void draw() {
  background(0);
  ellipseMode(CORNER);
  for (int x = 0; x < tilesX; x++) {
    for (int y = 0; y < tilesY; y++) {
      rect(x*tileW, y*tileH, tileW, tileH);
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [June 7, 2022, 9:05pm UTC](https://discourse.processing.org/t/mouse-click-to-add-rows-and-columns-to-grid/37392/2 "2022-06-07T21:05:45Z")

</div>

Hello,

Consider adding this:

```auto
void keyPressed()
  {
  tilesX = 10;
  tilesY = 10;
  //translate(width = mouseX,height = mouseY);
  tileW = width / tilesX;
  tileH = height / tilesY;
  }

```

setup() runs once so you have to update and calculate those variables again.

You can modify _tilesX_ and _tilesY_ as you please.

References:  
[https://processing.org/reference/keyPressed\_.html](https://processing.org/reference/keyPressed_.html)  
[https://processing.org/tutorials](https://processing.org/tutorials) \< There is one on  
Interactivity  
[https://processing.org/reference/setup\_.html](https://processing.org/reference/setup_.html)

There are similar functions for the mouse.

`:)`

---

<div class="post-metadata">

### Author: ![hues\_storm](https://avatars.discourse-cdn.com/v4/letter/h/df788c/32.png) [@hues\_storm](https://discourse.processing.org/u/hues_storm)
#### Post date: [June 7, 2022, 9:09pm UTC](https://discourse.processing.org/t/mouse-click-to-add-rows-and-columns-to-grid/37392/3 "2022-06-07T21:09:49Z")

</div>

Perfect, i couldn’t figure out where it belonged, thank you so much.