I wanted to make a project featuring a few components—think the news x Cocomelon. Here’s the link. I’m calling it CNN (Cocomelon News Network) because I think I’m funny.
I started first by trying to figure out a way to get YouTube videos to play on autoplay for a brief duration. Luckily, I’ve embedded videos before, so playing with the YouTube embed code wasn’t hard. Then, I needed to just pull the IDs of each video, throw them in an array, and index through them.
That was simple enough. The work after posed a challenge. I decided I’d experiment with WebGL shaders, largely because I realized that I wasn’t going to be able to apply the visual effects to the videos because they weren’t directly accessible by P5—they were a separate program running underneath. YouTube doesn’t let us have pixel access.
Ultimately, shaders look like too much code, and they are. I used two shaders—one to make the shapes warp as they float through space, and the other to add subtle film grain on top of the video. I struggled adapting the film grain one, and ran into a ton of problems in terms of getting it to be visible and transparent enough.
After that, the real task at hand was: create shapes. I had been testing out a single shape no issue, but making random shapes with random qualities proved to be incredibly difficult because of how the functions worked. I wanted a ton of different elements (color, size, speed, direction) to be randomized, and for all of the shapes to be drawn and remain on screen.
I first had to create a depot for all of the create shape functions, since no other method worked (I tried sticking them in an array not as functions, but I ultimately failed several times over with that method). The big issue was getting randomized size on a randomized function, so this was my solution:
This did not account for movement, which required indexing through the array of random shapes with random variable and placing those variables in context before drawing them.
Once all the pieces fit together, the project worked! This bit of documentation grossly oversimplifies the frustration I had (half I attest to the shaders and half to properly getting the random shapes with random variables).