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

Questions and comments