Noise King

Side Project

Side Project

Interaction Design


JavaScript p5js p5 sound library

Team/ Roles



I developed a visual art project using p5.js, transforming sound into dynamic waveform graphs with an FFT algorithm. I wanted this interaction to be comical, so it features a responsive rainbow effect that changes with sound levels, enhanced by color gradients and animations. The noise king prefers abosoute silence, and goes crazy otherwise.

What’s a Rich Text element?How to customize formatting for each rich textHeadings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn More.

Transforming Sound into Visual Art with p5.js

I harnessed the power of p5.js to create an innovative visual representation of sound input, employing the Fast Fourier Transform (FFT) algorithm. This advanced technique allows me to translate intricate sound wave data into a visually stunning waveform graph. This graph dynamically illustrates the frequency and amplitude of the sound, transforming auditory sensations into a captivating visual display.

A Symphony of Colors: The Rainbow Effect

To add an extra layer of engagement, I incorporated a mesmerizing rainbow effect that evolves in response to the sound level. This feature is not just a feast for the eyes; it's a technical marvel too. I meticulously designed color gradients and added animation effects to enhance the user experience. The result is a playful and engaging interaction that turns sound into a kaleidoscope of moving colors.

Responsive Growth: Interactive and Adaptable Design

My final touch was integrating mathematical principles and responsive design techniques to make the visual representation adapt in real-time. The character within the visualization grows and scales in harmony with changes in noise levels and screen sizes. This responsive and interactive element ensures that the experience is not only visually stunning but also highly engaging, making the art form adaptable to various environments and user interactions.



Let's connect
Need to find something?