Isho Audio Visualizer

User Experience / Visual Identity

Reimagining How We Listen and See Music

CHALLENGE

How can we turn an otherwise ephemeral auditory experience into one that leaves a lasting impression?

OUTCOME

An audiovisual environment that gives music the power to create enduring physical impressions.

SHARE THIS

SKILLS

p5.js (JavaScript)
Illustrator
Photoshop

Background

For my creative computing term project, I teamed up with designer Miranda Luong to rethink how audio could be visualized.

Concept

Growing up playing the viola, saxophone, and bassoon, I quickly learned that music is just as much about expression as it is about a musician's passion and interpretation.

Music in its present form is widely consumed in a prerecorded auditory form. Opportunities to encounter a unique musical experience are few and in between. In creating this visualization, we wanted to add a unique and engaging visual component that is as much shaped by the music as it is accompanying it.

Using p5.js (Javascript), we imagined the canvas as a series of horizontal lines, symbolic of string instruments or staves (musical notation). We created particle attractors with amplitude, beat, peak, and duration variables, we not only created a unique listening experience, but also a lasting one. By the end of the song, the music has imprinted the terrain with valleys, dips, and ridges.  
‍

Try it Out

Try it for yourself! If you're on Safari, don't pause after you've started as p5.js is not optimized for non-Chrome browsers or mobile interfaces.
‍
Click the play button in the editor below to check it out in motion!
KEYS: Press 'Spacebar' to toggle between black and white backgrounds.
Press 's' to increase stroke weight or later reset to 1
‍

Physical Projection

As an environments designer, the next step was to imagine Isho in a physical space. Could people interact with Isho, further altering the experience? How would it be projected? These were the questions we strived to answer in our physical projection tests.
‍



Next Steps

This is not only one of my favorite technical projects, but one that I believe has wide-ranging applications. Currently, I am working on translating this experience into a physical space either building up the projection mapping setup I currently have or transitioning to LED strips. Below is a visualization of an LED strip concept.