My final project uses a library I used in a previous class: Live Coding. The library is called Hydra, which is used to create visuals within a webpage. While it is intended to be used with live coding, it can also simply be used for its visuals. Normally, variations of visuals are created through the use of musical beats and sounds, but I plan on having the user interact to change these visuals instead.
I have not completely decided what my concept exactly is, nor what I want my program to do, but I know I wanted to use hydra in some way, because it can create these trippy and colorful visuals. An idea I had was to make the visuals be split between TV screens, similar to a Nam June Paik piece. However, at this point, I need to put some more time into finalizing the concept of my program. I had to do so much troubleshooting to re-familiarize myself with hydra and get it to work properly in P5.js, that I did not have time to work on my concept.
Currently, the program is still bare bones. There is a background canvas with a hydra visual on it, and a second one that is wrapped around a rotating torus. There are some lines on the screen, which I intend to be a grid that will make it appear the visuals are being shown through a grid of TVs. There is one bit of interactivity that I experimented with, a slider that allows you to shift the colors of the background visual, which was there to test the interaction of P5 and hydra. My one problem that I know i will run into with the visuals is adding or removing aspects of them, since I don’t think they can be coded in a modular way, since they are essentially a long string of methods together. Here is what the two visuals look like in code:
h1.osc(6, 0.1, 0.4).modulatePixelate(h1.noise(25,0.5),100).out(h1.o0);
h1.render(h1.o0);
h2.src(h2.o2)
.modulate(h2.voronoi(10), 0.005)
.blend(h2.osc(4, 0.1, 3).kaleid(30), 0.01)
.out(h2.o2);
h2.render(h2.o2);
Much of the issues I ran into had to do with me being unsure how to use hydra properly in p5. I had to do some coding within the index.html to make it work. To make the visuals more interesting, I tried adding a second hydra canvas to allow for more visual differences. This took a very long time to troubleshoot, because the two instances of hydra together did not like each other. I had to work with a lot of new things, like p5.graphics and the js canvas to make them work together. The next step for me will be to try to finalize my concept so I have a clear goal to work towards. I also want to try to utilize more aspects of things we learned in class, which at this point is not really implemented, other than the use of an external library. I think deciding an aspect to focus on will help me to finalize my concept. After this, I can finalize the program and add more user interaction, ideally with the visuals. I am also worried about the program being slow, since I am working in 3D. While it is fine for now, I worry that complexity will hurt this program.