The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
A generative ambient station of drones, rain, and distant thunder.
I built this project to test A generative ambient station of drones, rain, and distant thunder. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Web Audio API while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Continuous algorithmic generative music that never repeats, with sub-bass drone layers
Atmospheric rain, vinyl static, and distant thunder audio synthesis
THE TECHNICAL SIDE:
Built entirely with native Web Audio AudioNodes. Oscillators tuned to just-intonation intervals modulate lowpass filters, while brownian noise generates random rain and thunder rumbles.
Everything executes in the browser using Web Audio API, Generative Ambient Synthesis, Binaural Noise Engine. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Audio clipping easily occurs when multiple generative sound layers peak concurrently. Implementing a master dynamics compressor node preserved acoustic clarity.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on my JSFiddle. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
Fantastic layout creativity. Can I copy your JSFiddle source code?
Sure it's open for everyone😊
Your visual concepts are always captivating.
Thank you for the feedback. Let me know how you like me other builds😊
This is a fully functional and complete build. You are more than welcome to see it's source code on my JSFiddle (https://jsfiddle.net/Saminsami/4n7r8z2v/2). Inspect and fiddle with it as much as you like and let me know how you like it😊
jsfiddle.net
MIDNIGHT RADIO - Samin Sami
Samin Sami - a HTML example you can edit and run in your browser on JSFiddle.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Turning complex AI workflows into a calm, monochrome experience, brought to life with motion. We'd love to hear your thoughts!
Before we move on to some client collaborations, a last post about the new LUCERRÁ digital experience to wrap it up.
A watch movement lifted from one photograph into 3D. HEXANOX is an independent horology institute. We certify mechanical movements by measurement, amplitude, beat error, positional variance, to tolerances your eye cannot see.
I built this project to test A watch movement lifted from one photograph into 3D. HEXANOX is an independent horology institute. We certify mechanical movements by measurement, amplitude, beat error, positional variance, to tolerances your eye cannot see. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Three.js (GLB 3D) while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Precision implementation of image → GLB under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE:
Engineered directly in the browser with Three.js (GLB 3D), WebGL / GLSL Shaders, Canvas2D, Image → GLB. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response.
Everything executes in the browser using Three.js (GLB 3D), WebGL / GLSL Shaders, Canvas2D, Image → GLB. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Balancing the mathematical rigors of image → GLB with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
