Generative Synthesizer

Inspiration

The project started with the mix of visual math and generative audio. The goal was to make an experience where visual shapes show sound features. This way abstract code becomes an art display.

What it does

Generative Synthesizer is a website tool and Fourier visualizer that combines sound and images. It shows shapes like orbits, grids and deltas all linked to real-time audio. Important features are:

Polyphonic Spatial Audio: Sound moves across the stereo field depending on the trackers X-coordinate.
AI Stochastic Motif Generator: Makes changing parts using algorithmic scales like Lydian Hexatonic and Phrygian Dominant set in A-B-A-C forms.
Fourier Phase Space Mode: Shows shapes using epicycles from a Discrete Fourier Transform (DFT).
Interactive. Recording: Lets users click the canvas to add randomness through visual ripples and record or save sessions as WebM files.

How I built it

The app was made from scratch using web tools organized with modern ES6 classes for easier updates:

AudioEngine: Handles the Web Audio API with custom oscillators biquad lowpass filters and per-note ADSR envelopes to avoid issues.
Visualizer: Handles HTML5 Canvas drawing, shape creation Fourier coefficient math and ripple effects.
AIComposer: Makes musical data arrays and scale matrices.
MediaRecorder API: Combines canvas streams and Web Audio stream ends for video and audio recording in the browser.

Challenges I ran into

Audio Issues & Clipping: Fast frequency changes caused pops and clicks. I fixed this by making a polyphonic node system and using smooth ADSR attack and release ramps.
Performance Issues: Calculating Fourier transform epicycles while animating the canvas meant I had to cut down on garbage collection and save point arrays to keep a frame rate.

Accomplishments that I am glad of

Making a setup that works completely in the browser with no libraries.
Getting in-browser A/V recording to capture both the canvas and the audio at the same time.
Making an experience where clicking the canvas creates visible ripples and changes the sound.

What I learned

Got better at using the Web Audio API with node paths, stereo panner positioning and audio context details.
Learned how to use the Discrete Fourier Transform (DFT) for epicycles and shaping waves.

What's next for Generative Synthesizer

MIDI Support: Letting outside keyboards control frequencies and start generative sequences.
Custom Path Drawing: Allowing users to draw their paths on the canvas and quickly make custom Fourier epicycles and related sounds.
WebGL Shaders: Upgrading the part to WebGL for effects, like bloom, glow and particles.