ABIIOR Album Art . . . . . . . . Feb 2024

        An assignment I made in a class called code of music, taught by Luisa Pereira, this idea came from the Apple Music visualizer. As interesting as it is to look at, actually listening to the music at the same time reveals that the graphics onscreen are not necessarily linked to the sounds being played. Thus I wanted to create a visualizer with graphics that were connected to the instruments and vocals being played with added input from the listener via sliders that adjust the intensity of the visuals with a respective track.

       I got to work, deciding that I wanted to start with a song by The 1975 because I like their quirky yet intelligent sound. I chose “Happiness” and got the stems using splitter.ai. I created foundational code that set up the sliders and played the tracks individually. In my workflow, I found it easier to work with everything laid out as its own “paragraph” in sketch.js rather than condensing everything into a class. Throughout the coding phase I ran into a “buffer error” where one of the five tracks I put in would never seem to load. And instead of looking more into it, I side stepped towards looking at other 1975 songs and was attracted to using “It's Not Living (If It's Not With You).” I was doubly drawn to this song because the album art for A Brief Inquiry into Online Relationships, with its minimalism and little squares of color looked like what could eventually become a visualizer itself. Back to splitting tracks, I noticed a shortcoming with splitter.ai: It is REALLY set on splitting songs into drums, bass, “other”, vocals, and piano tracks despite the possibility of other instruments being present and/or allocates those as pseudo names to different instruments. And barring that, I thought the precision at which the program could separate and reject background noise could be better. Unsatisfied with its stubbornness I found a few more sites offering stems, ultimately landing on: voice.ai’s solution. Its output was similar to splitter.ai but with MUCH cleaner audio. In conjunction with a piano track that I split from a lalal.ai output, I had my list of stems. Here, I also made sure to compress the long stems to allow p5 to load them faster, which in fact DID seem to be the solution to my earlier problem. Thus I set out to recreate the ABIIOR album cover in p5.js.

       Wanting to turn the little cubes into dB meters that would “twinkle” as the song played, I turned to the example code for help where I learned that the background needs to be constantly redrawn in order for that twinkle effect to be achieved or else every previous state of the squares gets left on the white background, making it look like it randomly grows every so often. I actually figured this out when I copy-pasted this example code in and noticed the black outlines of the squares being where they were supposed to be. I originally added the frequency curve to be a thick solid line that would be placed over the album’s title with said title appearing as the wave curved, but in addition to me being unable to figure out how to make the line thicker (at first), it didn’t look visually appealing. So, I made them to act as the upper and lower borders of the canvas. 

       I know I absolutely *dislike* coding (especially in p5.js), but this happens to be one of the few projects built in there that I totally don’t despise. Maybe I’m just biased towards the band and liking their song.