Responsive Visuals for ZAPPA

For HfG's interdisciplinary "Laborwoche," I used JavaScript to create real-time music-reactive visuals for the "Friendship Collective's" after-party in Gmünd. Working both in a group and solo, we developed cohesive projections using audio amplitude and spectrum data, employing basic shapes and a yellow-orange-red palette. My contribution included a unique colour-shifting visual, and five of my creations were showcased at the after-show event.

The "Laborwoche" initiative at HfG aims to broaden students' horizons by encouraging them to engage with unfamiliar fields. I used this opportunity to revisit JavaScript, a programming language we had touched upon early in the semester but hadn't used extensively since.

For the project, the HfG had received a request from the "Friendship Collective," a Berlin art and electronic music group, for visual projections to accompany DJs at the after-party for their "Lycosia" exhibition, held at ZAPPA in Gmünd after its opening at the Gmünder Kunstverein.

We used p5.js (2D visuals) and three.js (3D visuals), both JavaScript libraries, to create visuals that would adapt and react to the nightclub's music. Working in groups of three, we aimed for cohesive visuals through similar shapes, styles, or colour schemes.

Follow the link to see the event on the Instagram page of the Friendship Collective

We learned to code responses to the music's amplitude (loudness) and spectrum (tones) using p5.js. This allowed for interactive visuals based on the music's dynamics and tonal characteristics, despite the code's relative simplicity.

Amplitude-responsive visualization (volume levels)

Frequency spectrum visualization (tone response)

My group used basic shapes and a yellow-orange-red colour range. We utilised amplitude and spectrum code to modify movement, colour shading, and element size. I also created a unique visual that, while using the same audio reactivity, rapidly cycled through colours every 50 pixels of movement.

The "Laborwoche" culminated in a successful showcase of all participating groups' code. I produced five reactive visuals that were displayed at the after-party.

My Visualizations

Interactive Balls Visualization

Dynamic Squares Pattern

Swirling Color Patterns

Triangular Formations

Wall Pattern Visualization