Week 4 - repetition with loops

Updated: Oct 6, 2020

Vera Molnar was my inspiration for this week assignment, especially this work:

I liked the grid and the fact that is look like a sketch. So I prepared something similar of my own:

My plan was to create 4 different quads that will create one "patch". In any "patch" the points of the the quads will change. But as usual my design does not go hand in hand with my coding abilities. I didn't even know where to begin... so I decided to start with only one "patch" and then to use a nested loop in order to repeat on the same patch. So I began with coding the 4 quads: I defined the X and Y and wrote them as parameters of the quads.

Then I wrote the loops: I had two variables: i that will display the horizontal "patches" and k that will display the Verticality "patches". I wanted every line (horizontal and vertical) to have 4 patches, so I wrote:

and added the ++ so each time that the loop is repeat it will add one patch.

It the end I added this:

in order to create some kind of spacing between the patches.

And this is the result:

I managed to create a pattern but I wanted to add so kind of interaction with the mouse.

I started to "play" a bit with the code. The first thing I did was to change a few of the quads parameters to mouseX and mouseY that created a really nice sketch:


I also wanted to try to change the position of every "patch" with mouse hover. So I wrote an if statement:

That limited the area of the patch and added the new positions of every quads to this function. But then every time that the mouse was over a patch, both "patches" have appeared (the patch with the new position and the previous "patch"). So I wrote an else function and moved the old position quads under this position.

And this is the result: https://editor.p5js.org/ds6298/sketches/VOALn7YLa

19 views0 comments

Recent Posts

See All