Description: A grid pattern of rectangles makes up the background. The position of each rectangle changes by a random number each frame, making the pattern appear to move. The size of the rectangles correspond to the position of your mouse. When the mouse or any key is pressed, a rotating rectangle appears and follows your cursor. This rotating rectangle is always the same size as the rectangles in the pattern.
Tips for user: Move the mouse around, and try holding down a key on the keyboard.
Finished code: https://alpha.editor.p5js.org/full/SJF0KPH2-
How the Pattern is Formed:
To create a grid, I used two nested for loops.
I based this section of code off of what we learned in class, but to fully understand what was happening I made a value table for my x and y values and sketched out the rectangles in the order they were drawn. It turns out that my grid was being built out in rows.
User Interaction Changes the Pattern:
Let’s look at the nested loop again:
The user controls the size of the rectangles in the pattern with the position of their mouse. We know this because each rectangle’s width is defined as “mouseX/10” and each rectangle’s height is defined as “mouseY/10”. I decided to divide mouseX and mouseY by 10 because I didn’t want the rectangles to be too large; I didn’t like how it looked when there was so much overlap between the shapes.
The user also controls the visibility of the rotating rectangle by pressing any key on the keyboard, or holding down the mouse button. I used an if statement with the qualifiers keyIsPressed = true OR mouseIsPressed = true.