Webgl Particle Audio Visualizer

February 2018 | By Sehyun Av Kim

A particle system that reacts to audio input

Launch experiment Get the code

Collection:

Chrome Experiments

$\"\"$

This experiment uses the WebAudio API to listen to input from your microphone. A WebGL visualization morphs its geometry and generates a particle system based on this data.

Built with:

WebGL, Three.js

Submitting...

Saving...

","url","link_url","/p/mygaq9otjj0yqsearr6n","versioned_link_url","/p/mygaq9otjj0yqsearr6n/1","yapping","The user wants me to create a WebGL Particle Audio Visualizer based on the HTML they provided, but remove unnecessary commentary, notes, and company/people names. Looking at the HTML, this appears to be from a Google Experiments page showcasing a WebGL particle system that reacts to audio input.\n\nI need to create a clean implementation of this concept using:\n- WebGL/Three.js for the particle system\n- Web Audio API for microphone input\n- Real-time audio visualization that morphs geometry and generates particles\n\nThe key features should be:\n1. Microphone input handling\n2. Audio frequency analysis\n3. Particle system that reacts to audio data\n4. WebGL visualization with morphing geometry\n\nI should create a modern, clean implementation without any branding or attribution, focusing on the core functionality. I'll use Three.js for WebGL, implement audio analysis, and create a responsive particle system.\n\nI'll need to:\n1. Set up the HTML structure\n2. Create the JavaScript for audio handling\n3. Implement the particle system\n4. Add controls and UI\n5. Style it appropriately\n\nLet me create this step by step, making sure to include tweakable parameters as requested.\n\n```index.html\n```","cursor","eyJpZCI6Im15Z2FxOW90amoweXFzZWFycjZuIn0","token","included",[182],{"_64":183,"_102":66,"_184":-5,"_185":55,"_186":55,"_187":55,"_188":97,"_189":97,"_190":97},"project_permissions","user_id","can_edit","can_delete","can_edit_members","can_view","can_list","can_participate","routes/browser/layout","actionData","errors"]