Mouse click to add rows and columns to grid

Processing Coding Questions
1

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?

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);
    }
  }
}
2

Hello,

Consider adding this:

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/tutorials < There is one on
Interactivity
https://processing.org/reference/setup_.html

There are similar functions for the mouse.

:)

1 Like
3

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

1 Like