Here is an collection of interactive audio experiences which provides the listener an alternative multimedia experience to listening compared to streaming services such as Spotify. Here, you will find a landing page for interactive installations, completely out of context quotes, and generative visuals sprinkled throughout the song collection. I am responsible for all of the performance involving vocals, viola, mandolin, and synthesizers. I also wrote every single note and lyric and am the programmer behind all of the code. For alternate versions of certain installations accompanied by less explanation, work in other genres, some research, along with links to other social media platforms and updates regarding traditional music releases, you may visit my artist website at https://quargskpgreene.com. Enjoy!
Tech Stack: HTML, CSS, p5.js
Inspired by viewing numerous stim boards on Tumblr, Looping Shape Cereal utilizes two drum samples from the aforementioned song, isolating them for the user’s clicking of the ‘$’ and ‘#’ buttons, as well as providing a selection of accompanying looping visuals. Watch purple squares bounce over and over or see an assortment of polygons change color until the cows come home, and more. One can also type any favorite phrases at their own leisure in the provided form without having to worry about submission. One can also generate more squiggles and ellipses on the page via making noise into one’s microphone. With the use of a screen reader, the user additionally has access to hidden audio. You can also expand and contract the browser window to watch the panels go wild. You can view the code here.
Tech Stack: HTML, CSS, p5.js
When the user presses the ‘Eustachian Food Slide’ button, the aforementioned song will be streamed at a random speed and direction between between 0 (exclusive) and 2 (inclusive) times the original speed. While the audio streams, the amplitude data from the audio file will appear in a visualizer on the screen which is shared between a collection of yellow rectangles and circles in an assortment of colors. If you use a screen reader, you can access a secret message, as well as an alert window and burst of pink noise. You can view the code here.
I began writing this piece curious about the ways I could exploit the built-in MIDI capabilities of the notation software, Sibelius. This collection of organized sound is the result of that exploration.
Tech Stack: HTML, CSS, Three.js
The song above will stream while you have the chance to use your mouse, finger, and/or trackpad or toe to manipulate the body parts of a three- dimensional flesh monster via clicking and dragging each textured body part into a configuration of your liking. Make sure the page has loaded before clicking the start button. You can view the code here.
Tech Stack: HTML, CSS, p5.js
Simultaneously view letters which make up a subset of the lyrics to Sex Appeal scurry rapidly across the page, as well as exist scrambled in a line. You may try to guess, using the form provided, which lyric is being shown and will receive feedback regarding the corectness of your guess. Stuck? You’re in luck! Two hints are available to assist the user. You can view the code here.
This song lyrically explores my journey of working to break the cycle of addiction within my family amid many meter changes.
Tech Stack: HTML, CSS, Three.js
Like Looping Shape Cereal, I once more became inspired by the idea of stim boards and created a three-dimensional version. With just one click of the ‘Wee!’ button, the user can watch elbow and hand flesh-textured and cone meshes in the shape of fusilli pasta rotate and move around the scene while also having the capability to click in order to rotate the scene such that one has the choice of multiple different groupings of instruments to emphasize within the corresponding song during streaming using one’s cursoor. You can view the code here.
Tech Stack: HTML, CSS, Three.js
The user must click the ‘q: ecruosnoitcaferardnasnoisserpmocehtdnif’ button in order to be perceptually transported inside of an internet chimney and exist among a variety of nondescript meshes. In the distance lies a spinning cube streaming the aforementioned song, which the user has the ability to navigate towards via the cursor in order to customize the listening experience. You can view the code here.
This is a ground up version of the song directly above accompanied by a pixelated visual of three people talking.
Tech Stack: HTML, CSS, p5.js
The lyrics of this song depict the experience of my quarter-life crisis brought about by multiple musical and academic training settings which lauded multiple child prodigies who were among my classmates, and are served up with a side of mode mixture.
Tech Stack: HTML, CSS, p5.js
Here is another round of guessing lyrics. You can view the code here.
Tech Stack: HTML, CSS, p5.js
Here, we have another interactive stim board, this time with four panels. One can listen to a selection of synths from the above song in addition to making their own music by pressing and holding the ‘Flatulent sulking! Keep on pushin’’ button while dragging one’s cursor, watching a circular display of one word from the song loop through a color gradient, take unique screenshot selfies, and use one’s cursor to draw chaotically with a combination of lines and useful phrases attached. You can view the code here.
Tech Stack: HTML, CSS, p5.js
View the frequency at which each word within the lyrics occurs. You may also input a number of moles and find out how many ways you can arrange them in a circle. Screen reader users also have access to the number of occurrences of each word. You can view the code here.
Tech Stack: HTML, CSS, p5.js
Have you ever wanted to use your cursor to sketch things using orange, translucent triangles? You have arrived at the correct location to do so. Additionally, you may listen to a snippet of the above song and access a secret alert message using a screen reader. You can view the code here.
Tech Stack: HTML, CSS, p5.js
In this installation, one can once more guess lyrics while also having the opportunity to learn a new fact about underwear via the provied forms. Hints are available for when the user becomes stumped and a complementary microphone-influenced L-system resembling a very large shower-shriveled spider is available for viewing. You can view the code here.
Tech Stack: HTML, CSS, p5.js
Play around with the scale used in this song (bebop dominant) You can view the code here.
Tech Stack: HTML, CSS, p5.js
Here are some flashing colors to enhance your collective viewing. You can view the code here.