Button example: overRect() function's width and height variables

Hi Forum,

In the examples included with the Processing IDE and on the Processing Reference online there is an example showing how to code two simple buttons. One button is a rectangle and it uses a custom function called overRect to determine if the user’s mouse is over the rectangle that makes the button shape. Here’s a link to the example on Processing’s online reference: https://processing.org/examples/button.html

My question is related to the int width and int height variables that are defined as parameters for the overRect function close to the bottom of the sketch’s code. In the Processing IDE these two variables are colored in pink meaning the IDE recognizes them as key words that are supposed to be system variables that are defined by the size function. But if that is the case the logic inside the overRect function would not work.

For example, the if statement inside the overRect function tests for the conditions mouseX >= x && mouseX <= x+width. The x is receiving the value of rectX which is 220. x+width would be 220+640 if it were using the display window width. But if that were the case then the space around the right edge of the rectangle would also change it’s color to the rectHighLight color. This can be done by simply substituting the condition of x+width to x+640. This means that the int width parameter of the overRect function isn’t using the display window’s width value set in the size function in the setup but the IDE still paints it pink, right? Inside the update function where the overRect function is used the argument given to be passed to the int width parameter is the recSize variable which is set to 90 at the top of the sketch. When you change the x+width condition to x+90 then the button’s functionality works normally.

So my question is: although the Processing IDE is recognizing those keywords in the parameters int width and int height of the overRect function and in the conditions of it’s if statement, they aren’t the values set in the size function, right? Isn’t this bad practice and shouldn’t these variable be renamed considering this is an “offical” example that comes with the IDE?

Thanks for the help.

Best regards.


google variable scope and you will see why the function works and as for the pink in the IDE it’s just the syntax highlighting is… not perfect

1 Like

@ Leo_Aguiar

I fully agree.

In the example, the variables width and height are overshadowing the global variables with the same name. This means, processing uses these local variables and ignores the global ones (different scope).

  • You can check this is out by using println(width); in setup() and in the function.

This naming is bad practice and should be corrected in the example. The variables could be called

  • btnWidth and btnHeight or
  • even be a PVector btnSize (btnSize.x and btnSize.y).

Additionally the syntax highlighting of the IDE is just ignoring the over-shadowing and just marking them because it knows these words as keywords.

Warm regards,


1 Like