Learn creative coding writing simple programs

98. Interacting with many rectangles (II)

In episode 97 we created a collection of rectangles which we drew on the screen, but which had no interactivity at all. Let's fix this now.
In this episode we keep continuously checking if the mouse is inside any rectangle from our collection of rectangles. When it is inside, we highlight the border of that rectangle.
We draw all rectangles in our collection one by one. Each time we draw one, we check if it is under the mouse. If it is under the mouse, we store the rectangle number in a variable called "found", so we can use that number later.
Once all rectangles have been drawn, we check if the "found" variable contains the number of a rectangle. If it does, we draw a border for that rectangle.
Later we improve the program. Instead of allways drawing a border for the found rectangle, we check if the mouse is pressed. If it's not pressed we draw the border. But if it is pressed then we move the rectangle to a new random position on the screen. The result is that we can get rid of all the rectangles in one area on the screen by holding the mouse button down and moving the mouse at the same time.

Tags: interactive, mouse, rectangle, array, click, drag

Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```