Vizardry
Audio-Reactive VisualsProblem?
Traditional audio-visualisers often feel disconnected from the user. They are static, pre-rendered, or locked behind expensive paywalls that limit creative expression for independent artists.
Solution?
Vizardry is a web-based generative art suite built using p5.js that transforms real-time audio input into visual geometry. The project explores the intersection of creative coding and user experience, offering a library of visualisers and methods for interaction.
The visuals showing onload are only scatching the surface of possibilities, experimental is strongly encouraged.
The Interface
The User Interface (UI) follows a "disappearing element” pattern. The control parameters are housed in a translucent panel that reveals itself only upon hover or keyboard interaction, and automatically fades out after a period of inactivity.
Controls
Different users prefer different interaction models and the control schemes should reflect this. The visualisers can be manipulated using the on-screen slider interface, mapped keyboard shortcuts (keys 1-6), or a custom hardware dial unit.
Constraints
Given the high computational cost of real-time rendering and Fast Fourier Transform (FFT) audio analysis, the decision to enforce a "Desktop Only" constraint was made. The application detects the viewport size and serves a specific message to mobile users encouraging them to switch devices.