[{"data":1,"prerenderedAt":246},["ShallowReactive",2],{"embed-dancing-blob":3},{"id":4,"title":5,"author":6,"body":9,"date":229,"description":230,"extension":231,"featured":232,"lastUpdated":229,"meta":233,"navigation":232,"path":236,"responsive":237,"seo":238,"stem":239,"tags":240,"thumbnail":244,"__hash__":245},"experiments\u002Fexperiments\u002Fdancing-blob.md","Dancing blob",[7,8],"luckystriike","alvarosabu",{"type":10,"value":11,"toc":219},"minimark",[12,21,26,29,63,67,70,126,130,156,160,186,190,216],[13,14,15,16,20],"p",{},"This experiment creates a ",[17,18,19],"strong",{},"mesmerizing audio-reactive blob"," that responds to your microphone input in real-time. Using custom shaders and Web Audio API, the sphere morphs and dances to the sound of your voice or ambient audio.",[22,23,25],"h3",{"id":24},"what-youll-see","What You'll See",[13,27,28],{},"An immersive audio-visual experience featuring:",[30,31,32,39,45,51,57],"ul",{},[33,34,35,38],"li",{},[17,36,37],{},"Morphing Icosahedron",": High-resolution sphere (80 subdivisions) that deforms based on audio input",[33,40,41,44],{},[17,42,43],{},"Real-Time Audio Analysis",": FFT analysis of microphone input driving visual effects",[33,46,47,50],{},[17,48,49],{},"Custom Shader Materials",": Perlin noise-based vertex displacement with gradient coloring",[33,52,53,56],{},[17,54,55],{},"Dynamic Typography",": Large-scale background text creating depth and atmosphere",[33,58,59,62],{},[17,60,61],{},"Permission Handling",": Seamless microphone access request with elegant UI modal",[22,64,66],{"id":65},"technical-implementation","Technical Implementation",[13,68,69],{},"This experiment demonstrates advanced audio-visual techniques:",[30,71,72,82,88,94,100,114,120],{},[33,73,74,77,78],{},[17,75,76],{},"Web Audio API",": Real-time microphone stream analysis using ",[79,80,81],"code",{},"AnalyserNode",[33,83,84,87],{},[17,85,86],{},"FFT Processing",": Frequency domain analysis converting audio to visual parameters",[33,89,90,93],{},[17,91,92],{},"Custom Vertex Shader",": Perlin noise displacement based on audio amplitude",[33,95,96,99],{},[17,97,98],{},"Fragment Shader",": Gradient coloring from bright orange to lime green",[33,101,102,105,106,109,110,113],{},[17,103,104],{},"VueUse Integration",": ",[79,107,108],{},"useUserMedia"," and ",[79,111,112],{},"usePermission"," for seamless audio access",[33,115,116,119],{},[17,117,118],{},"Reactive Controls",": Real-time adjustment of wireframe, colors, and amplitude",[33,121,122,125],{},[17,123,124],{},"Post-Processing Effects",": Vignette effect for cinematic presentation",[22,127,129],{"id":128},"audio-features","Audio Features",[30,131,132,138,144,150],{},[33,133,134,137],{},[17,135,136],{},"Frequency Analysis",": 2048-point FFT for detailed audio spectrum analysis",[33,139,140,143],{},[17,141,142],{},"Average Amplitude",": Real-time calculation of audio energy levels",[33,145,146,149],{},[17,147,148],{},"Responsive Displacement",": Vertex positions react proportionally to audio intensity",[33,151,152,155],{},[17,153,154],{},"Smooth Animation",": Continuous rotation combined with audio-driven morphing",[22,157,159],{"id":158},"visual-design","Visual Design",[30,161,162,168,174,180],{},[33,163,164,167],{},[17,165,166],{},"Gradient Shading",": Smooth color transitions from orange (#ff9900) to lime (#d7f250)",[33,169,170,173],{},[17,171,172],{},"Typography Integration",": Anton and JetBrains Mono fonts for industrial aesthetic",[33,175,176,179],{},[17,177,178],{},"Dark Theme",": Deep blue background (#0c1a30) for optimal contrast",[33,181,182,185],{},[17,183,184],{},"Professional Layout",": Strategic text placement with proper z-indexing",[22,187,189],{"id":188},"key-technologies","Key Technologies",[30,191,192,198,204,210],{},[33,193,194,197],{},[17,195,196],{},"Custom GLSL Shaders",": Hand-written vertex and fragment shaders for performance",[33,199,200,203],{},[17,201,202],{},"Perlin Noise",": Mathematical noise functions for organic displacement patterns",[33,205,206,209],{},[17,207,208],{},"Audio Context",": Modern Web Audio API for low-latency audio processing",[33,211,212,215],{},[17,213,214],{},"Permission Management",": Robust handling of browser microphone permissions",[13,217,218],{},"This experiment showcases the power of combining audio processing with real-time 3D graphics, creating an engaging interactive experience that bridges digital art and music visualization.",{"title":220,"searchDepth":221,"depth":221,"links":222},"",2,[223,225,226,227,228],{"id":24,"depth":224,"text":25},3,{"id":65,"depth":224,"text":66},{"id":128,"depth":224,"text":129},{"id":158,"depth":224,"text":159},{"id":188,"depth":224,"text":189},"2024-09-01","A sphere dancing to the sound of your microphone. This demo utilizes your microphone, so please ensure that you allow access.","md",true,{"slug":234,"status":235},"dancing-blob","published","\u002Fexperiments\u002Fdancing-blob",false,{"title":5,"description":230},"experiments\u002Fdancing-blob",[241,242,243],"basic","audio","shaders","\u002Fexperiments\u002Fdancing-blob.webp","YamdqxDGpaKRoMdGAXyP5VvHvZuUZ6J3ezsiRsBEDRs",1793714844054]