This is my final project for DES 111 at UC Davis, a creative coding class for designers using processing [a graphical library and IDE using the Java language]. The assignment was open ended and I was granted complete creative and conceptual control.

My initial brainstorm for this project was inspired by early 2000s iTunes music visualizers. I remember loving to watch the animations on my family computer while I listened to music as a child -- but I always felt frustrated that the visualizers were not connected to the beat of the music.

For my project, I resolved to make a customizable music visualizer of my own that would follow the bpm of the song at hand.

Before the coding process, I sketched several UI concepts alongside some notes on their accompanying UX features. From the beginning, I felt strongly that the user must have customization control over the visualizer, and the visualizer animation should be directly linked to the bpm of the song, effectively shifting and moving with it.

I decided that the visualizer would consist of overlapping transparent shapes with varying stroke colors, attached to different waveforms from the chosen song file.

The user would have the option to customize these shapes, and choose either rectangles or ellipses. The user would also be able to choose the stroke color, from various static colors or constantly shifting random colors for a rainbow strobelight effect.

The first version of the project was meant to develop the visualizer animation and functionality, with a rough UI meant to brainstorm color schemes and develop a feeling to work from.

I began by stacking several ellipses and tying their dimensions to the left and right channels of the currently playing stereo audio track using the minim library. Each circle relied in a different manner on the audio channels, creating a fluctuating, versatile, geometric effect. I also added a version of this using rectangles instead of ellipses. For the UI, I decided on a black background, to match early iTunes visualizers.

In the next version of my project, I added customization options. I added functionality to switch between “ellipse” and “rectangle” options, and afforded the user basic color (blue, red, yellow) + a rainbow option that would change to a random color on each beat of the song. I also experimented with “fill” and “no-fill” options for the shapes used in the visualizer. The type included in the rough version was meant for my own personal reference during testing and would later be implemented into the final UI.

The final product contains a user flow starting at a “homepage” with navigation controls leading to individual “now playing” pages for each song. The “now playing” pages contain customization options for the visualizer, as well as play/pause controls and control to return to the homepage. Also included on the homepage are several color-scheme options for the UI, with a default “dark mode,” “light mode,” and “alternate.”

At the top of each “now playing” page exists a bar showing progress through the song, as well as a background animation simulating stars and space, as well as an expanding array of dots following the cursor. The “now playing” pages were designed around a centered visualizer and emphasis on the song name.

Click here for a video demo, and here to try the app yourself.

My initial brainstorm for this project was inspired by early 2000s iTunes music visualizers. I remember loving to watch the animations on my family computer while I listened to music as a child, but I always felt frustrated that the visualizers were not connected to the beat of the music. I decided to make a customizable music visualizer of my own that would follow the bpm of the song at hand. I resolved to design my visualizer in a similar way to iTunes, where the animation takes up the center of attention and the song’s metadata is emphasized.

Since I would be using Processing for this project, I found further inspiration in Processing: A Programming Handbook for Visual Designers and Artists by Casey Reas. I was inspired by creative coding projects based around audio, including Messa di Voce by Golan Levin and Multimedia Beethoven: The Ninth Symphony by Robert Winter.

From the beginning, I was resolved to design my program as a “music player” – emphasizing song metadata with a centered music player. This is directly inspired by old iTunes visualizers, as well as new ones – in modern Apple Music “mini-players” the album art takes up 80% of the display, with the song name, album name, artist, and a progress bar taking the rest. I would include all of these things in my UI, with my visualizer essentially replacing the spot of the album art.

I hoped to communicate a vintage feeling similar to old CD-ROM programs with my default UI color scheme, using a black background and blue text.

The first iteration of the project was meant to develop the visualizer animation and functionality, with a rough UI meant to brainstorm color schemes and type + develop a feeling to work from.

I developed a version of the visualizer using ellipses, as well as a version using rectangles. Inline with my initial objectives, I decided on a black background with blue type.

The color scheme of my project stayed largely the same through different variations, and the biggest changes lied in the user flow and UI layout.

In the second iteration of my project, I added customization options. I added functionality to switch between “ellipse” and “rectangle” options, and afforded the user basic color (blue, red, yellow) + a rainbow option that would change to a random color on each beat of the song. I also experimented with “fill” and “no-fill” options for the shapes used in the visualizer. The type included in this rough version was meant for my own personal reference during testing and would later be implemented into the final UI.

The final iteration of my project would be incorporate a user flow centered around a homepage and individual "now-playing" pages for each song, outlined in the next section.

The final product contains a user flow starting at a “homepage” with navigation controls leading to individual “now playing” pages for each song. The “now playing” pages contain customization options for the visualizer, as well as play/pause controls and control to return to the homepage. Also included on the homepage are several color-scheme options for the UI, with a default “dark mode,” “light mode,” and “alternate.”

At the top of each “now playing” page exists a bar showing progress through the song, as well as a background animation simulating stars and space, as well as an expanding array of dots following the cursor. The “now playing” pages were designed around a centered visualizer and emphasis on the song name.

Click here for a video demo, and here to try the app yourself.

This app was made through the desire to create a music visualizer that followed the beat of the music, inspired by a childhood frustration that early iTunes music visualizers were randomly generated with no relation to the song at hand.

The music player and visualizer was written in Processing using the Minim library. The app generates rectangular or ellipse patterns based on the waveform + bpm of the chosen song. The user can customize the stroke color and desired shape of the visualizer pattern. The user has the option to cycle between 5 different songs.

USER CONTROLS: ** also outlined in app **

1-5 keys cycle between 5 different song options (each key corresponds to a different song)

a-e keys control play functionality for each song -- a will play "1", b will play "2" etc.

"u" key selects ellipse visualizer -- "v" key selects rectangular visualizer

w-z keys cycle through various stroke color options

SPACE key will stop playback.

Click here for a video demo, and here to try the app yourself.