Team Member: Zoey Lu, Sara Hosseini
The main goal of this project is to have multiple scenes of audio visualization and use the amplitude to control the elements in the scene. The .js file comprises four main components: change scene functions, draw scene functions, music amplitude functions, and other side functions (ex. fullscreen). We used the AnimationWithScenes file from the lecture as the framework, and adapted attributes from AudioPlaybackWithAmplitude into it. Then we add scenes into the framework. The first part is the global variables, they are values that can not be reset. The second part is the change scene functions, where all the scenes are organized into draw’Scenename’() functions. The third part is the preload function, where the song, shader, and font are loaded before starting the sketch. The fourth part is the setup function, where variables and arrays are given a stable value, so they can be involved in the later calculation and not be reset. The fifth part is the draw function, besides assigning dynamic values to the variables, there is also an 80-sec loop that displays the scenes. The last part is where all draw scene functions are located.
We started with interesting examples in p5.js reference for each scene, such as particles (https://p5js.org/examples/simulate-particles.html) and analyze (https://p5js.org/reference/#/p5.FFT/analyze). Then we built the scene in a separate sketch file since it is easier to test than the whole change scene framework. When we get a satisfying result, we import the scene back to the main framework. During this process, we found that our code can be more simplified, which is very helpful and make the entire structure organized and clear. Then we make sure the change scene function is working correctly and alter a few numbers to make the final result fit into the framework. We had a lot of creative decisions along the way. The first draft of the scenes is very basic. As we got more comfortable with p5.js, we started to add more elements to the scenes. For example, scene2 (third scene) originally only had soundwaves. As we were testing it in the main framework, we began to add the dots and the cube into the functions.
The most challenging part has to be placing the elements properly on the canvas. We spent a lot of time debugging and trying with different numbers. Testing the scenes and the shaders also required a lot of time as our code became lengthy. One small change of variables and break the entire sketch. We felt a sense of accomplishment when we saw the shaders we made in The Book of Shaders Editor are applied to the scenes, it gave us a lot of confidence to keep exploring new possibilities. There are still unsolved problems, such as the canvas now only can switch between fullscreen and full window (windowWidth x windowHeight), rather than a fullscreen and limited size (ie. 800×600). Overall, we really like the final result.