Procedural Work | 2021

Ideation
For our procedural project, I selected an image that resembles a self-portrait. In a literal sense, I took advantage of the frame. I really wanted to make an artifact made in the past that could interact with an object/individual in real time. You know? Time is relative, but art is *forever*.

Process
I encountered a significant hump along the way–getting a shader to function properly with an image in its foreground. After a a few long nights, I found that the issue was that even though p5.js is a very interactive tool…it tends to like a singular interactive piece [full of information] at a time. My designer brain assumed that layers were a given (just like the Adobe suite, right?) with this extension of javascript. Here are some of the things that helped me gain the finished product:

• trimmed and cut parts out to add transparency to the original image, similar to a filter
• implemented a webcam feature (and found a shader to match!)
• added a slider in order to shift the amount of manipulation the webcam will allow
• learned the .SetUniform function to make that command to run with the shader.

Here is my result:

Moving Forward
Some things that I would like to add to this work would be some interactivity with the colored boxes the frame itself has. What would it look like if the boxes had a gradient to them, like a mood ring effect? What could I do with the webcam itself? I would like to see if I can attach a livefeed of a busy street, or zoo livefeed, as if it were a deeper reflection of connection with the portrait. Now I have something fun to think about.

-Natalie