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.
Code editor
background
color
colorMode
draw
else
fill
for
height
if
int
mousePressed
mouseX
mouseY
new
noFill
noStroke
random
rect
rectMode
setup
size
stroke
void
width
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); } ```