I started with a new drawing here as my other assignments either (1 & 2) didn't have enough repeating elements to make the exercise "worth it" or (3) had repeating patterns as part of the interactive design (not a static element to be seen).
I thought I was going to do something simple, just to play around with defining functions and getting into the flow of scale/rotate/mouse control of said elements, so I started with a super simple geometric sketch:
I was thinking of compasses and how they have repetition in both color and pattern thinking that I could play with the elements, make some move, etc.
So here we have the beginnings of a super simple compass pattern, right? It was drawn geometrically, eventually I was going to turn the directional arrows into a vertex object, adding in the more decorative smaller mid-directional arrows(?) as a separate vertex object. I was envisioning how they could all move independently, change their colors, etc.
But then...
I thought, hey I haven't tried push/pop/rotate, maybe I can make a triangle function and automate the triangle-drawing process by calling them, rotated, in the draw function. This is where I tripped straight down the rabbit hole. I started with Dan's Coding Train 9.1 (Transformations Pt. 1) where upon I realized that rotation happens at the point of origin, which didn't really help me. I started googling around, found a tiny bit of footing in Processing, and then discovered Gene Kogan's Transformations documentation which.. made some really beautiful effects that I played around with, but I could not figure out how to get the triangles to land in a "star" pattern rather than a spiral from the point of origin.
I wish I had more documentation, but I realized I had the auto-save option selected, and I also had auto-refresh on so I could see changes as I was making them, so it basically saved every time the sketch instantaneously refreshed. Bad news. I ended up with something beautiful here that I want to keep playing with, and there were a lot of strange permutations along the way that I really want to look back on. At the beginning I still had the ellipse as part of the shape, and got stuck seeing if I could get the ellipse to move along the x2,y2 point of the repeating triangles, so it would look like it was rolling along the tops of the curving repeating triangles (yup, see, visuals would have been very helpful here).
So I turned the rotating triangle into a function and started calling that in different locations in the draw function, also learning how to change the point of origin of the canvas to the center (I thought this would help me rotate the triangle), etc. I changed the fill to a translucent random (255), and added mousePressed and mouseReleased functions because I'm obsessed with hypnotizing patterning apparently and so when you click, it looks like the triangles are spiraling into an abyss.
Click away! Here's the code: https://editor.p5js.org/medusamachina/sketches/rJNGG5zqX
In conclusion, I got too caught up trying to figure out a bunch of other stuff, it was frustrating, fun, and functions are still something I don't understand. I also probably need a resident to help me understand what I ended up with line-by-line.
Comments