Final Creative Coding Project(s)
My overall goal with the final Creative Coding project was to revisit all four creative assignments from throughout the class and see if I could re-code them in an effort to solidify the new things I had learned, improve the sketches so that my original idea was more fully realized, and to make all of the sketches responsive to window size. Within the re-code effort, I also wanted to prioritize “craftsmanship” in terms of writing code that would be clean, easy to read and understand, and could be easily accessible by another person if they wanted to tweak the design. I feel very strongly about collaborative efforts and readability of complexity, so I wanted to incorporate those values into my work. I believe I succeeded in the first three points, whether my code is as clean as I hoped, I’m not sure :D
SELF PORTRAIT: https://editor.p5js.org/kat_j_park/sketches/1LEJEa3Va
I, unfortunately, saved over my original self portrait assignment, but the gist of it was that it was hard coded with multiple push/pops to have rectangles spinning like gears. The idea was that a self portrait, for me, was a look inside my mind, and I felt that a good representation of my mind was that the gears were always turning and working, sometimes creating something beautiful, other times just making a mess.
When we were learning about classes and functions I knew I wanted to revisit my first ever p5 assignment to look at the difference between my logic then, and my logic now, and see if I could improve the code. This new iteration improves on the old by allowing the gears to appear when the user clicks on the screen, and delivers a random size, speed, rotation direction, and color for each new gear by using functions, classes, and arrays.
One cool thing that I learned doing this was that you could nestle a function within another function.
OPPOSITES: https://editor.p5js.org/kat_j_park/sketches/VNk1gmeBT
Original Post: https://www.katjpark.com/blog/2022/7/13/creative-coding
This particular assignment I think I was fairly successful with in the beginning when it was assigned. The thing that really bothered me about it was I couldn’t make the circle flip from black to white “dynamically” and could only get the circle to be completely white or completely black. I had even tried playing with some arcs and slicing up the circle to at least get closer, but it never really got to where I wanted it. In the second go around, I visited the link that Ellen provided in the comments of the original post to check out the create graphics function which essentially creates a second canvas. Half of this sketch is on one canvas, and the other is on the second canvas, and the two circles are mapped to mouseX and mouseY so that they are in the same position at all times, so it looks like a seamless transition.
PATTERNS: https://editor.p5js.org/kat_j_park/sketches/DET4T5MCK
Original Post: https://www.katjpark.com/blog/2022/7/23/patterns
I think Pattern week was the week I started to feel more confident about p5 so my desire for more elements to happen per sketch also increased, so I didn’t quite make what I wanted to here. My original sketch was arrows (all hard coded) that switched from black to white (with hard coded R, G, B values), and in my new sketch I call functions with for loops and the down arrows light up red when you hover over one. My mouse pressed function is also a lot cleaner.
The way I got the red light up arrows was a 4-step process. First, I did some math to figure out how to plot one single cell where I wanted it to be, since the up arrow negative space was forming the down arrow (the down arrow doesn’t actually exist). Second, I made that cell light up red when you hovered your mouse over it. Third, I made a grid with a for loop that repeated across the entire sketch. Fourth, with a lot of help from Brian, I put it together with some interesting math which I hope to avoid in the future :( An interesting thing about this one is that because the origin point is at (0,0) but I have cells that go into (-x, -y) territory, to make those light up, I needed to think about the canvas beyond what is seen on the screen. Also, because my arrows were made with triangles and rectangles set to rectMode (CENTER), there was some interesting math in calculating the positioning of the mouse. I think I would maybe go back and see if there’s an even better way to do this.
NEMESIS TIME: https://editor.p5js.org/kat_j_park/sketches/ce5W4gThS
Original Post: https://www.katjpark.com/blog/2022/7/31/time
It’s pretty fitting that time is my worst enemy in this assignment. I did NOT accomplish what I wanted to get which was an accurate Archimedes clock with three rotating/spinning circles nestled into each other. I also wanted to get a sun/moon effect that you see on some of those luxury watches that are obscenely priced but also incredibly engineered.
Above are the watches I was inspired by, below, something else.
I learned a ton about circles and rotation, and Cartesian coordinates versus polar coordinates, angles, some trigonometry, some calculus, etc. I haven’t gotten it (yet), but I deeply want to get this done. I’ve even been inspired to re-take a calculus course somewhere if there’s time in the fall.
If only I had more time!
BONUS MORSE CODE: https://editor.p5js.org/kat_j_park/sketches/Z2VpmH9aw
I’ve been playing around with Morse code and functions…but a little bit unsure of what to do with it as of now, but will keep working on it. I’m thinking about trying to make it some kind of conceptual 3D Rubik’s cube that you can interact with to “solve” the message.
