Clicking a square in a matrix of squares - does not work consistently

Programming Questions

greenmoon..

Clicking a square in a matrix of squares - does not work consistently

in Programming Questions • 3 months ago

Hi - I am pretty new to processing and am learning as I am going. I am working on a small project and am stuck on one thing. I am displaying a matrix of squares, all colored differently using a formula based on their position. When I click on a square, I want it to turn blue and retain that color until I click on it again. I also want to be able to select multiple squares. Sometimes it works (a square is selected, but it is not colored blue - but a different color) sometimes it does not and I can't figure out the problem. Any help, tips, or pointers would be appreciated. Here is my code:

int canvasWidth = 500;
int canvasHeight = 500;
int matrixSize = 6;
boolean[][] squaresArray = new boolean[matrixSize][matrixSize];
void setup() {
int i = 0;
int j = 0;
size(canvasWidth, canvasHeight);
noStroke();
smooth();
for (i=0; i < matrixSize; i++)
for(j=0; j < matrixSize; j++)
squaresArray[i][j] = false;
}
boolean mouseOverRect(int x, int y, int w, int h) {
return (mouseX >= x && mouseX <= x+w && mouseY >= y && mouseY <= y+h);
}
void draw() {
background(100);
int rX = 0;
int rY = 0;
int rW = 30;
int rH = 30;
int i = 0;
int j = 0;
for (i=0; i < matrixSize; i++)
{
rY += 50;
for(j=0; j < matrixSize; j++)
{
rX += 50;
if (mouseOverRect(rX, rY, rW, rH))
{
if (mousePressed)
{
squaresArray[i][j] = !squaresArray[i][j]; // change state of square
if ( squaresArray[i][j] )
{
fill(0, 0, 255); // square has been clicked and is now True - fill with blue
}
else
{
// revert to unclicked color:
fill( map(rX,0,canvasWidth,0,255), map(rY,0,canvasHeight,0,255), 100);
}
}
}
else {
if ( !squaresArray[i][j] )
{
// square is false, so fill with unclicked color
fill( map(rX,0,canvasWidth,0,255), map(rY,0,canvasHeight,0,255), 100);
}
}
rect(rX, rY, rW, rH);
}
rX = 0;
}
}

Replies(7)

GoToLoop

Re: Clicking a square in a matrix of squares - does not work consistently

3 months ago

I've already had some examples on toggling boxes. So I've adapted your code to follow those.

Perhaps you can look around them and use to fix yours.

Links to see them online:

http://studio.processingtogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx/latest

http://studio.processingtogether.com/sp/pad/export/ro.93MhRWK35nIP8/latest

And current one I did for yours:

http://studio.processingtogether.com/sp/pad/export/ro.9L5jAtga7SpyF/latest

And here's the code:

/**
 * Rectangle Toggle 4 (v4.13)
 * mod GoToLoop (2013/Jun)
 * for GreenMoonSol
 *
 * http://forum.processing.org/topic/problem-with-my-rectangle-class
 *
 * http://forum.processing.org/topic/draggable-balls-to-any-cell
 *
 * http://forum.processing.org/topic
 * /how-to-change-the-colour-of-an-objec-in-an-2d-arrayt-permanently
 *
 * http://forum.processing.org/topic
 * /clicking-a-square-in-a-matrix-of-squares-does-not-work-consistently
 *
 * http://studio.processingtogether.com/sp/pad/export/ro.9L5jAtga7SpyF/latest
 */

final static int DIM = 40, GAP = 15, LEN = DIM + GAP;
final static int GRID = 8, MARGIN = 20;
final boolean[][] squares = new boolean[GRID][GRID];

final static color BG = 0100, FG = #0000FF;
final static color BRIGHT = 050, BLUISH = 0100;

final static String GFX = JAVA2D; // Use JAVA2D or P2D

boolean isMouseOverRect(int x, int y, int w, int h) {
  return mouseX > x & mouseX < x+w & mouseY > y & mouseY < y+h;
}

void setup() {
  size(GRID*LEN + MARGIN*2 - GAP, GRID*LEN + MARGIN*2 - GAP, GFX);
  noLoop();

  noStroke();
  smooth();
  background(BG);

  keyPressed();
}

void draw() {
}

void mousePressed() {
  for (int row=0; row!=GRID; ++row) {
    final int y = row*LEN + MARGIN;

    for (int col=0; col!=GRID; ++col) {
      final int x = col*LEN + MARGIN;

      if ( isMouseOverRect(x, y, DIM, DIM) ) {
        final boolean isSelected = squares[row][col] = !squares[row][col];
        final color c = color(map(x, 0, width, BRIGHT, 0400), 
        map(y, 0, height, BRIGHT, 0400), BLUISH);

        fill(isSelected? FG : c);
        rect(x, y, DIM, DIM);

        redraw();
        return;
      }
    }
  }
}

void keyPressed() {
  for (int row=0; row!=GRID; ++row) {
    final int y = row*LEN + MARGIN;

    for (int col=0; col!=GRID; ++col) {
      final int x = col*LEN + MARGIN;

      fill(map(x, 0, width, BRIGHT, 0400), 
      map(y, 0, height, BRIGHT, 0400), BLUISH);

      rect(x, y, DIM, DIM);

      squares[row][col] = false;
    }
  }

  redraw();
}

greenmoon..

Re: Clicking a square in a matrix of squares - does not work consistently

3 months ago

Thank you very much for showing me a cool solution to my problem. I will study what you did and check your other links too. (At first blush, I am not quite sure how your code works.)

However, as an aid to my understanding, can you briefly tell my why my code was not working (or why it worked inconsistently), or did I have just an entirely wrong approach?

PhiLho

Re: Clicking a square in a matrix of squares - does not work consistently

3 months ago

squaresArray[i][j] = false;
The loop in setup is not necessary: the array is initialized to false by default. Not a problem, just a simplification.

The issue is classical: you use mousePressed, the boolean in draw(), which is called 60 times per second, so by the time you click, the test is checked several time and the fill is toggled that many times.
Use mousePressed(), the event callback, instead.

greenmoon..

Re: Clicking a square in a matrix of squares - does not work consistently

3 months ago

Great - thanks for that explanation. A newbie error that I won't make again.

GoToLoop

Re: Clicking a square in a matrix of squares - does not work consistently

3 months ago

There is 1 more thing:

You have a complex decision algorithm about which color to use for the fill().

You define it at 2 different if blocks!

The block of lines #36 to #51 shouldn't be used to set the fill() color!

You should only be looking for whether the mouse is hovering over a square or not.

Then, if a mouse button is held down, invert the boolean value corresponding to that square in your Array!

Instead, the right place to place the fill() function is at the line just above your rect() function!

It's when you have the most updated status whether it's an ON or OFF color for a square!

P.S.: If you don't get something in my example, just ask for it!

greenmoon..

Re: Clicking a square in a matrix of squares - does not work consistently

3 months ago

Thanks for those pointers - very helpful!

So, this will sound like a dumb question to you, but I really want to learn this stuff so am not afraid to ask. In your code, I don't understand why you are using keyPressed(), nor why it is working. According to the documentation, keyPressed() "is called once every time a key is pressed." Yet, no keys need to be pressed - the squares are activated by mouse clicks. I tried commenting it out to see what would happen, and nothing was drawn at initiation. Yet I could make squares visible by clicking the area they occupy. So, is a "key" being "pressed" by the system at program launch? In your code, is keyPressed() being called any other time?

GoToLoop

Re: Clicking a square in a matrix of squares - does not work consistently

3 months ago

It's an extra feature I've added to the code!

If any keyboard key is hit, redraw all squares in OFF color state, and reset the boolean Array back to false!

So, within keyPressed(), is the only place where all of the squares are drawn at once.

In mousePressed(), only 1 square is redrawn! The 1 located where a mouse button is clicked!

That's why if you omit the code inside keyPressed(),

you'd have to click at each invisible square to make them appear!

Also, I forcibly invoke keyPressed() at the end of setup() in order to have the grid shown from the beginning.

Otherwise, a user would have an empty screen and have to guess the need to press some key for it.

Top Reply