WEEK 4: FOR LOOPS FOR LOOPS FOR LOOPS

intro

This time I around I was inspired by the Art Deco style and wanted to create a beautiful repetitious pattern with golden rotated squares. I would use the “for loop” to repeat my rotated squares. Easy enough? So I thought 🙂 I adapted my original vision while learning a lot about rotate() and how to utilize translate() for this assignment.

See my code using this link

process

After putting my rotated squares code into the “for loop” my rotated squares were not going horizontally, but rather off the page. 

It looked like there were two issues:

1. The squares continuously rotated (instead of staying 45 degrees consistently)
2. The square was repeating off the page.

So, my thought was to :

1. Isolate the rotate() function by using push() and pop() to keep the rotation to 45 degrees
2. Keep the center coordinate of the square constant, so the squares would then the squares would just increase using that consistent y-axis location to repeat horizontally.

After finicking with the code, I couldn’t isolate the rotate() because it has to be incorporated with rectangle in order to work. And the major issue with the keeping the center coordinate was that the rotation for the 45 degrees was happening each time the loop was running. The square would first rotate, then draw, rotate and draw, so it would go off page.  

I consulted with another class member, Jason, on how to solve this rotation issue. We worked on it for a bit and found that to make the squares work, the code would have to broken down into steps with incorporating a function. Within the for loop the main steps were to:

1. Translate : this was to “reset” the center point of the square each time the square was drawn so the squares remained in one line
2. Draw the squares using the function drawRotateRects:
   • Rotate the squareCreate the square

In reseting the center point, that’s what allowed the squares to repeat horizontally. With this function, I experimented with putting other squares instead these squares. What it looked like reminded me of kites, so I expanded my idea from there. Any new shapes had to be calculated with the new coordinates from translate (0, 50). So I guess by big question is – can I write the code so as not to use translate twice, so I can have a fresh coordinate slate without having to do calculations now with translate(0,50)?

After I made my people and my kites in my code, I thought I could snazz it up a little. I changed the colors of the kites using random for the spectrum of red, blue, green. Some my classmates, Rae and Melissa, suggested changing the opacity of the kites and having the kite shapes get smaller and bigger. So I created a variable “col” to control the different RGB values. Interestingly, the “col” variable can be a global variable but the kite size, I chose “size_x” and “size_y”, had to be a local variable in order to work. I think this has to do with it being a function and only using those variables when the function is called upon.