[{"data":1,"prerenderedAt":478},["ShallowReactive",2],{"navigation":3,"/experiments/dancing-blob":122,"authors":361},[4],{"title":5,"path":6,"stem":7,"children":8,"page":121},"Experiments","/experiments","experiments",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117],{"title":10,"path":11,"stem":12},"Array of cameras","/experiments/array-cameras","experiments/array-cameras",{"title":14,"path":15,"stem":16},"Brickelangelo David","/experiments/brickelangelo-david","experiments/brickelangelo-david",{"title":18,"path":19,"stem":20},"Basic Brownian distribution","/experiments/brownian-distribution","experiments/brownian-distribution",{"title":22,"path":23,"stem":24},"Porsche 911 Car Showcase","/experiments/car-showcase","experiments/car-showcase",{"title":26,"path":27,"stem":28},"Coffee Smoke","/experiments/coffee-smoke","experiments/coffee-smoke",{"title":30,"path":31,"stem":32},"Cube Boy Dancefloor","/experiments/cube-boy-dancefloor","experiments/cube-boy-dancefloor",{"title":34,"path":35,"stem":36},"Cult of the lamb 🐑","/experiments/cult-of-the-lamb","experiments/cult-of-the-lamb",{"title":38,"path":39,"stem":40},"Dancing blob","/experiments/dancing-blob","experiments/dancing-blob",{"title":42,"path":43,"stem":44},"Fireworks Shader","/experiments/fireworks-shader","experiments/fireworks-shader",{"title":46,"path":47,"stem":48},"Galaxy Generator 🪐","/experiments/galaxy-generator","experiments/galaxy-generator",{"title":50,"path":51,"stem":52},"Glass/Plastic Material","/experiments/glass-material","experiments/glass-material",{"title":54,"path":55,"stem":56},"Grainy Liquid Blobs","/experiments/grainy-liquid","experiments/grainy-liquid",{"title":58,"path":59,"stem":60},"Haunted House","/experiments/haunted-house","experiments/haunted-house",{"title":62,"path":63,"stem":64},"Phone with HTML inside","/experiments/html-phone","experiments/html-phone",{"title":66,"path":67,"stem":68},"Low Poly Planet","/experiments/lowpoly-planet","experiments/lowpoly-planet",{"title":70,"path":71,"stem":72},"Magical Marbles","/experiments/magical-marbles","experiments/magical-marbles",{"title":74,"path":75,"stem":76},"Nuxt Stones","/experiments/nuxt-stones","experiments/nuxt-stones",{"title":78,"path":79,"stem":80},"Particle Pumpkin Shader","/experiments/particle-pumpkin","experiments/particle-pumpkin",{"title":82,"path":83,"stem":84},"Particles Morphing","/experiments/particles-morphing","experiments/particles-morphing",{"title":86,"path":87,"stem":88},"Portal Journey","/experiments/portal-journey","experiments/portal-journey",{"title":90,"path":91,"stem":92},"Wizard's Potion Classroom","/experiments/potions-classroom","experiments/potions-classroom",{"title":94,"path":95,"stem":96},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":98,"path":99,"stem":100},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":102,"path":103,"stem":104},"Space Game","/experiments/space-game","experiments/space-game",{"title":106,"path":107,"stem":108},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":110,"path":111,"stem":112},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":114,"path":115,"stem":116},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":118,"path":119,"stem":120},"WebGPU","/experiments/webgpu","experiments/webgpu",false,{"id":123,"title":38,"author":124,"body":127,"date":347,"description":348,"extension":349,"featured":350,"lastUpdated":347,"meta":351,"navigation":350,"path":39,"seo":354,"stem":40,"tags":355,"thumbnail":359,"__hash__":360},"experiments/experiments/dancing-blob.md",[125,126],"luckystriike","alvarosabu",{"type":128,"value":129,"toc":337},"minimark",[130,139,144,147,181,185,188,244,248,274,278,304,308,334],[131,132,133,134,138],"p",{},"This experiment creates a ",[135,136,137],"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.",[140,141,143],"h3",{"id":142},"what-youll-see","What You'll See",[131,145,146],{},"An immersive audio-visual experience featuring:",[148,149,150,157,163,169,175],"ul",{},[151,152,153,156],"li",{},[135,154,155],{},"Morphing Icosahedron",": High-resolution sphere (80 subdivisions) that deforms based on audio input",[151,158,159,162],{},[135,160,161],{},"Real-Time Audio Analysis",": FFT analysis of microphone input driving visual effects",[151,164,165,168],{},[135,166,167],{},"Custom Shader Materials",": Perlin noise-based vertex displacement with gradient coloring",[151,170,171,174],{},[135,172,173],{},"Dynamic Typography",": Large-scale background text creating depth and atmosphere",[151,176,177,180],{},[135,178,179],{},"Permission Handling",": Seamless microphone access request with elegant UI modal",[140,182,184],{"id":183},"technical-implementation","Technical Implementation",[131,186,187],{},"This experiment demonstrates advanced audio-visual techniques:",[148,189,190,200,206,212,218,232,238],{},[151,191,192,195,196],{},[135,193,194],{},"Web Audio API",": Real-time microphone stream analysis using ",[197,198,199],"code",{},"AnalyserNode",[151,201,202,205],{},[135,203,204],{},"FFT Processing",": Frequency domain analysis converting audio to visual parameters",[151,207,208,211],{},[135,209,210],{},"Custom Vertex Shader",": Perlin noise displacement based on audio amplitude",[151,213,214,217],{},[135,215,216],{},"Fragment Shader",": Gradient coloring from bright orange to lime green",[151,219,220,223,224,227,228,231],{},[135,221,222],{},"VueUse Integration",": ",[197,225,226],{},"useUserMedia"," and ",[197,229,230],{},"usePermission"," for seamless audio access",[151,233,234,237],{},[135,235,236],{},"Reactive Controls",": Real-time adjustment of wireframe, colors, and amplitude",[151,239,240,243],{},[135,241,242],{},"Post-Processing Effects",": Vignette effect for cinematic presentation",[140,245,247],{"id":246},"audio-features","Audio Features",[148,249,250,256,262,268],{},[151,251,252,255],{},[135,253,254],{},"Frequency Analysis",": 2048-point FFT for detailed audio spectrum analysis",[151,257,258,261],{},[135,259,260],{},"Average Amplitude",": Real-time calculation of audio energy levels",[151,263,264,267],{},[135,265,266],{},"Responsive Displacement",": Vertex positions react proportionally to audio intensity",[151,269,270,273],{},[135,271,272],{},"Smooth Animation",": Continuous rotation combined with audio-driven morphing",[140,275,277],{"id":276},"visual-design","Visual Design",[148,279,280,286,292,298],{},[151,281,282,285],{},[135,283,284],{},"Gradient Shading",": Smooth color transitions from orange (#ff9900) to lime (#d7f250)",[151,287,288,291],{},[135,289,290],{},"Typography Integration",": Anton and JetBrains Mono fonts for industrial aesthetic",[151,293,294,297],{},[135,295,296],{},"Dark Theme",": Deep blue background (#0c1a30) for optimal contrast",[151,299,300,303],{},[135,301,302],{},"Professional Layout",": Strategic text placement with proper z-indexing",[140,305,307],{"id":306},"key-technologies","Key Technologies",[148,309,310,316,322,328],{},[151,311,312,315],{},[135,313,314],{},"Custom GLSL Shaders",": Hand-written vertex and fragment shaders for performance",[151,317,318,321],{},[135,319,320],{},"Perlin Noise",": Mathematical noise functions for organic displacement patterns",[151,323,324,327],{},[135,325,326],{},"Audio Context",": Modern Web Audio API for low-latency audio processing",[151,329,330,333],{},[135,331,332],{},"Permission Management",": Robust handling of browser microphone permissions",[131,335,336],{},"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":338,"searchDepth":339,"depth":339,"links":340},"",2,[341,343,344,345,346],{"id":142,"depth":342,"text":143},3,{"id":183,"depth":342,"text":184},{"id":246,"depth":342,"text":247},{"id":276,"depth":342,"text":277},{"id":306,"depth":342,"text":307},"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":352,"status":353},"dancing-blob","published",{"title":38,"description":348},[356,357,358],"basic","audio","shaders","/dancing-blob.png","F8H6TLRNWV1ftaV45IWdWsDZz8b35RzyI9hN70B1qPY",[362,378,393,410,426,444,460],{"id":363,"title":364,"avatar":365,"body":366,"description":338,"email":370,"extension":349,"github":126,"meta":371,"name":372,"navigation":350,"path":373,"seo":374,"slug":126,"stem":375,"twitter":126,"website":376,"__hash__":377},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpg",{"type":128,"value":367,"toc":368},[],{"title":338,"searchDepth":339,"depth":339,"links":369},[],"hola@alvarosaburido.dev",{},"Alvaro Saburido","/authors/alvarosabu",{"description":338},"authors/alvarosabu","https://alvarosaburido.dev","FWpr6-OcVRzMvvsjRaD8icRidgpKVLCtrKy9-l_5GZM",{"id":379,"title":380,"avatar":381,"body":382,"description":338,"email":386,"extension":349,"github":387,"meta":388,"name":387,"navigation":350,"path":389,"seo":390,"slug":387,"stem":391,"twitter":386,"website":386,"__hash__":392},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":128,"value":383,"toc":384},[],{"title":338,"searchDepth":339,"depth":339,"links":385},[],null,"andretchen0",{},"/authors/andretchen0",{"description":338},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":394,"title":395,"avatar":396,"body":397,"description":338,"email":401,"extension":349,"github":402,"meta":403,"name":404,"navigation":350,"path":405,"seo":406,"slug":402,"stem":407,"twitter":408,"website":386,"__hash__":409},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":128,"value":398,"toc":399},[],{"title":338,"searchDepth":339,"depth":339,"links":400},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":338},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":411,"title":412,"avatar":413,"body":414,"description":338,"email":386,"extension":349,"github":418,"meta":419,"name":420,"navigation":350,"path":421,"seo":422,"slug":418,"stem":423,"twitter":424,"website":386,"__hash__":425},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":128,"value":415,"toc":416},[],{"title":338,"searchDepth":339,"depth":339,"links":417},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":338},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":427,"title":428,"avatar":429,"body":430,"description":338,"email":434,"extension":349,"github":435,"meta":436,"name":428,"navigation":350,"path":437,"seo":438,"slug":439,"stem":440,"twitter":441,"website":442,"__hash__":443},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":128,"value":431,"toc":432},[],{"title":338,"searchDepth":339,"depth":339,"links":433},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":338},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":445,"title":446,"avatar":447,"body":448,"description":338,"email":452,"extension":349,"github":453,"meta":454,"name":125,"navigation":350,"path":455,"seo":456,"slug":125,"stem":457,"twitter":452,"website":458,"__hash__":459},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":128,"value":449,"toc":450},[],{"title":338,"searchDepth":339,"depth":339,"links":451},[],"none","luckystriike22",{},"/authors/luckystriike",{"description":338},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":461,"title":462,"avatar":463,"body":464,"description":338,"email":468,"extension":349,"github":469,"meta":470,"name":471,"navigation":350,"path":472,"seo":473,"slug":469,"stem":474,"twitter":475,"website":476,"__hash__":477},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":128,"value":465,"toc":466},[],{"title":338,"searchDepth":339,"depth":339,"links":467},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":338},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",1768600262097]