Patterns
My original idea for a pattern was to do a fish scale pattern that “shimmered” when wherever the cursor was, leaving a trail of nice colors. This is because I like fish scale patterns, I’m a Pisces (haha) and also was born the year of the dragon, so I have some affinity for scales. I thought that I would try to challenge myself by making a very simple geometric pattern with a for loop, but a complex color coding function with a for loop. This was a mistake and I couldn’t figure it out. I moved onto a different idea.
My next idea was to do a pattern that is everywhere all the time, both externally and internally, which is “up and down.” I feel like I’m always going up and down elevators, stairs, escalators, etc. and also in my life, I have a period of up followed closely by a period of down, and then back up, then back down, etc. etc. I’ve gotten so used to it that it when I zoom out, the peaks and lows don’t seem to mean anything anymore, it’s just a “pattern” of life, so I thought it might lend itself nicely to this assignment.
link: https://editor.p5js.org/kat_j_park/sketches/VSIBsYWRs
I decided to do arrows of up and down, where the shape of the up arrows formed the shape of the down arrows and vice versa. The first thing I had to do was figure out how to make an arrow shape, which consisted of a triangle and a rectangle. I then made 3 rows of these arrows by hard coding them because I wanted to figure out the best way to “loop” them. Because the triangle was kind of a weird shape, the math of it all was quite difficult. I think there are a couple loops in this code. First, to loop the X so that the arrows form the rows, and then to loop the Y so the arrows also form columns.
Keeping track of the triangle points was especially difficult, and also keeping them in the right place relative to the rectangle was also difficult. I anticipate that if I had known about creating my own functions before this assignment, I might have made the arrow design a function and tried to loop that, because this was a lot of math. A few questions I have about things that didn’t work:
Is there a benefit to “clean” math when you’re figuring out the equations that get you the value you want?
Is there a way to know when the mouse is hovering over a shape and changing its color? (I think this will be addressed by arrays)
I wanted my code to be somewhat interactive, and my original idea was to highlight the arrows by turning them red, regardless of whether they were “up” arrows or “down” arrows. The concept seemed simple enough because of the exercise during class where our mouse hover determined the red highlight of a column, but for a more complex shape, it started feeling impossible and I ran out of steam. I think using functions/arrays might make that kind of thing more feasible?
I ended up having my interaction be the grey and black color switching on a mouse click. I wanted this to ensure that the viewer could see both the “ups” and the “downs,” and highlighting that it was either an up arrow or a down arrow depending on where you focused :) .
A kind of weird thing I had to do to switch these colors was to assign 6 variables individual values for 2 RGB codes. This was kind of annoying? It’s easy when it’s just black and white (0 and 255) but when you want to be more specific about color, is there a way to do this?
Bonus photo I took while walking around, thought it was funny and relevant. I have no idea what the hashtag means.
