Week 1 - Expressive Sketches
https://editor.p5js.org/bethfileti/sketches/JZP_8yKch
How can we start to make our sketches expressive in different ways?
What I Did
After first taking a very technical approach to this week's coding challenge (https://editor.p5js.org/bethfileti/sketches/WoH44fT8K), I realized that I didn't create anything with much expression. Spending some time playing with the sketch and trying to add expression, generally yielded uninteresting results. I decided to approach this week's assignment from the other side. Start with trying to express something, and then see if you can check all of the technical boxes.
Technical Criteria: One element controlled by the mouse. One element that changes over time, independently of the mouse. One element that is different every time you run the sketch.
Concept
This week, as the first week of graduate school, has been a transition period for me. I wanted to try and capture some of what I was feeling and experiencing as I adjust to this next stage of my career and education. With a wide number of conflicting priorities in my life (family, career, personal projects, freelance work), I realized that the stress of trying to "keep things together" was part of what was contributing to my internal chaos. The more I tried to keep all of it together, the more overwhelmed I felt. I am working on learning how to let things float. I wanted to create a sketch that captured this struggle and demonstrated it to a user.
Execution
I started by sketching out my idea and trying to write out the programming tasks that would be required to complete the sketch. In more specific terms, what do I need to tell the computer to do. This was helpful as I had a roadmap towards completion and also became aware of some challenges or problems that I was introducing, in advance of introducing them. I decided to expedite the sketch, I would do the initial slicing in photoshop. Additionally, to simplify positioning, I left each "slice" with the exact same dimensions and utilized a transparent background. This interfered with my original idea of having a user hover over each individual piece and work to drag them back individually (like, trying to wrangle cats!)
With the steps outlined for me, I got to work setting up the assets and structure of my code. There were some really fun in-between states (and a few never-to-be-seen accidentally inappropriate ones).
Below you can see some visuals from the process work for this "Banana Split."
Process Work
What worked
Starting with a clear concept was what ended up making this sketch come together. It also gave me a firm success criteria, allowing me to save time and make adjustments in the moment. (I was satisfied with the simpler experience of clicking anywhere on the screen, and didn't stress over adding in the additional functionality of having draggable pieces.)
What didn’t work
I didn't even attempt to do the slicing in p5, but I think that would add to this sketch a great deal. It would add an additional level of randomness, while making this more flexible to utilize any image or possibly the webcam. I also think that I can play more with the randomness and directionality of the motion. Right now it still feel fairly constrained which lead to a very clear pattern when it's multiplied. Might be more interesting to explore this further, to try and keep the "kaleidoscope" feel, while having it feel less predictable.
Code-Related Questions
- I wanted to be able to take advantage of the banana pieces remaining on screen, and not have to use the computational power of redrawing them over and over. I couldn't figure out a way to do this while also sometimes showing them. I was curious if there was a way to "fill" an existing image? Any suggestions on how to think through what is going to be computationally expensive or best practices for this?
- If I wanted to slice up the image in p5, would I have to draw polygons and do some type of clipping mask?