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.

Screen Shot 2017-09-29 at 8.21.01 PM

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.

exercise 3 notes.jpeg


User Interaction Changes the Pattern:

Let’s look at the nested loop again:

Screen Shot 2017-09-29 at 8.21.01 PM

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.

Screen Shot 2017-09-29 at 9.55.51 PM

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.

Advertisements

One thought on “Exercise 3: Patterns

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s