https://editor.p5js.org/peterzhn/full/TtmDi81G1
Ephemeral. Dichotomous. Provocative.
Our inspiration for this piece initially came from this p5 demo and this creative coding tutorial. We sorted of manipulated the source code from one of the creative coding examples to be our base and incorporated our own elements.
Initially we tested using a GIF as the source file but GIFs in P5 actually operated a bit differently from videos so in the end we simply looped the video to make it play as a gif. For the source media we chose the dramatic gopher gif because it really spoke to us. After setting up the canvas size and loading the video into setup, we loaded the pixels into draw. Then we used the for loop in the example we found to create the playing effect. We played around with the ellipse size and the X and Y intervals until we landed on a good resolution.
We wanted to add a camera overlay over the gopher: the easiest way to do this was by modifying the fill() function. The first iteration of the color fill was done through RGB mode: we just made the camera the red value and the gopher the green value. Blue remained just zero.
Because of the real-time movement of the camera, we wanted time to change how the camera modified the gopher. This was done through a counter, i, and a boolean, forward, that tracked the movement of whether time was moving “forward” or “backward.” We would then use this i to modify the values in the fill() function.
RGB version (i was added to both the camera and gopher values. the blue value was x modded by i)
Because of how i was added to these values, it would cause the camera to “appear” and “disappear” when the fill ended up being just very large red and green values (making it just a yellow screen with some white). And a small “wave” could also be seen as we were modding the blue value with i through x. **Because we wanted to play with the wave motion more, we decided that if we converted the color mode to HSB, it might make this effect more obvious.
After converting our color mode to HSB, the camera modified the hue through the addition of i and brightness changed through time by modding X with i in the loop. The gopher then just modified saturation. Using fill() with HSB also allowed the camera to “appear” and “disappear” over the gopher in a more obvious “wave”-like fashion. This seemed more engaging than the subtleness of the camera overlay in the RGB version.
We also decided to change the speed at which the wave is moving through incrementing and decrementing i at different rates. i would increase by a value of 5, but i would then decrease by a value of 10. This would make it so the wave would more slowly appear than disappear, making our “wave” a more “wave”-like motion.