[{"data":1,"prerenderedAt":482},["ShallowReactive",2],{"navigation":3,"/experiments/dancing-blob":126,"authors":365},[4],{"title":5,"path":6,"stem":7,"children":8,"page":125},"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,121],{"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},"Rapier Object Clump","/experiments/rapier-object-clump","experiments/rapier-object-clump",{"title":98,"path":99,"stem":100},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":102,"path":103,"stem":104},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":106,"path":107,"stem":108},"Space Game","/experiments/space-game","experiments/space-game",{"title":110,"path":111,"stem":112},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":114,"path":115,"stem":116},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":118,"path":119,"stem":120},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":122,"path":123,"stem":124},"WebGPU","/experiments/webgpu","experiments/webgpu",false,{"id":127,"title":38,"author":128,"body":131,"date":351,"description":352,"extension":353,"featured":354,"lastUpdated":351,"meta":355,"navigation":354,"path":39,"seo":358,"stem":40,"tags":359,"thumbnail":363,"__hash__":364},"experiments/experiments/dancing-blob.md",[129,130],"luckystriike","alvarosabu",{"type":132,"value":133,"toc":341},"minimark",[134,143,148,151,185,189,192,248,252,278,282,308,312,338],[135,136,137,138,142],"p",{},"This experiment creates a ",[139,140,141],"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.",[144,145,147],"h3",{"id":146},"what-youll-see","What You'll See",[135,149,150],{},"An immersive audio-visual experience featuring:",[152,153,154,161,167,173,179],"ul",{},[155,156,157,160],"li",{},[139,158,159],{},"Morphing Icosahedron",": High-resolution sphere (80 subdivisions) that deforms based on audio input",[155,162,163,166],{},[139,164,165],{},"Real-Time Audio Analysis",": FFT analysis of microphone input driving visual effects",[155,168,169,172],{},[139,170,171],{},"Custom Shader Materials",": Perlin noise-based vertex displacement with gradient coloring",[155,174,175,178],{},[139,176,177],{},"Dynamic Typography",": Large-scale background text creating depth and atmosphere",[155,180,181,184],{},[139,182,183],{},"Permission Handling",": Seamless microphone access request with elegant UI modal",[144,186,188],{"id":187},"technical-implementation","Technical Implementation",[135,190,191],{},"This experiment demonstrates advanced audio-visual techniques:",[152,193,194,204,210,216,222,236,242],{},[155,195,196,199,200],{},[139,197,198],{},"Web Audio API",": Real-time microphone stream analysis using ",[201,202,203],"code",{},"AnalyserNode",[155,205,206,209],{},[139,207,208],{},"FFT Processing",": Frequency domain analysis converting audio to visual parameters",[155,211,212,215],{},[139,213,214],{},"Custom Vertex Shader",": Perlin noise displacement based on audio amplitude",[155,217,218,221],{},[139,219,220],{},"Fragment Shader",": Gradient coloring from bright orange to lime green",[155,223,224,227,228,231,232,235],{},[139,225,226],{},"VueUse Integration",": ",[201,229,230],{},"useUserMedia"," and ",[201,233,234],{},"usePermission"," for seamless audio access",[155,237,238,241],{},[139,239,240],{},"Reactive Controls",": Real-time adjustment of wireframe, colors, and amplitude",[155,243,244,247],{},[139,245,246],{},"Post-Processing Effects",": Vignette effect for cinematic presentation",[144,249,251],{"id":250},"audio-features","Audio Features",[152,253,254,260,266,272],{},[155,255,256,259],{},[139,257,258],{},"Frequency Analysis",": 2048-point FFT for detailed audio spectrum analysis",[155,261,262,265],{},[139,263,264],{},"Average Amplitude",": Real-time calculation of audio energy levels",[155,267,268,271],{},[139,269,270],{},"Responsive Displacement",": Vertex positions react proportionally to audio intensity",[155,273,274,277],{},[139,275,276],{},"Smooth Animation",": Continuous rotation combined with audio-driven morphing",[144,279,281],{"id":280},"visual-design","Visual Design",[152,283,284,290,296,302],{},[155,285,286,289],{},[139,287,288],{},"Gradient Shading",": Smooth color transitions from orange (#ff9900) to lime (#d7f250)",[155,291,292,295],{},[139,293,294],{},"Typography Integration",": Anton and JetBrains Mono fonts for industrial aesthetic",[155,297,298,301],{},[139,299,300],{},"Dark Theme",": Deep blue background (#0c1a30) for optimal contrast",[155,303,304,307],{},[139,305,306],{},"Professional Layout",": Strategic text placement with proper z-indexing",[144,309,311],{"id":310},"key-technologies","Key Technologies",[152,313,314,320,326,332],{},[155,315,316,319],{},[139,317,318],{},"Custom GLSL Shaders",": Hand-written vertex and fragment shaders for performance",[155,321,322,325],{},[139,323,324],{},"Perlin Noise",": Mathematical noise functions for organic displacement patterns",[155,327,328,331],{},[139,329,330],{},"Audio Context",": Modern Web Audio API for low-latency audio processing",[155,333,334,337],{},[139,335,336],{},"Permission Management",": Robust handling of browser microphone permissions",[135,339,340],{},"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":342,"searchDepth":343,"depth":343,"links":344},"",2,[345,347,348,349,350],{"id":146,"depth":346,"text":147},3,{"id":187,"depth":346,"text":188},{"id":250,"depth":346,"text":251},{"id":280,"depth":346,"text":281},{"id":310,"depth":346,"text":311},"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":356,"status":357},"dancing-blob","published",{"title":38,"description":352},[360,361,362],"basic","audio","shaders","/experiments/dancing-blob.webp","Gd9qbha4baUrkjdq5i0exYkoyYfrMTtrogs1V-SQpL0",[366,382,397,414,430,448,464],{"id":367,"title":368,"avatar":369,"body":370,"description":342,"email":374,"extension":353,"github":130,"meta":375,"name":376,"navigation":354,"path":377,"seo":378,"slug":130,"stem":379,"twitter":130,"website":380,"__hash__":381},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpg",{"type":132,"value":371,"toc":372},[],{"title":342,"searchDepth":343,"depth":343,"links":373},[],"hola@alvarosaburido.dev",{},"Alvaro Saburido","/authors/alvarosabu",{"description":342},"authors/alvarosabu","https://alvarosaburido.dev","FWpr6-OcVRzMvvsjRaD8icRidgpKVLCtrKy9-l_5GZM",{"id":383,"title":384,"avatar":385,"body":386,"description":342,"email":390,"extension":353,"github":391,"meta":392,"name":391,"navigation":354,"path":393,"seo":394,"slug":391,"stem":395,"twitter":390,"website":390,"__hash__":396},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":132,"value":387,"toc":388},[],{"title":342,"searchDepth":343,"depth":343,"links":389},[],null,"andretchen0",{},"/authors/andretchen0",{"description":342},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":398,"title":399,"avatar":400,"body":401,"description":342,"email":405,"extension":353,"github":406,"meta":407,"name":408,"navigation":354,"path":409,"seo":410,"slug":406,"stem":411,"twitter":412,"website":390,"__hash__":413},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":132,"value":402,"toc":403},[],{"title":342,"searchDepth":343,"depth":343,"links":404},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":342},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":415,"title":416,"avatar":417,"body":418,"description":342,"email":390,"extension":353,"github":422,"meta":423,"name":424,"navigation":354,"path":425,"seo":426,"slug":422,"stem":427,"twitter":428,"website":390,"__hash__":429},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":132,"value":419,"toc":420},[],{"title":342,"searchDepth":343,"depth":343,"links":421},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":342},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":431,"title":432,"avatar":433,"body":434,"description":342,"email":438,"extension":353,"github":439,"meta":440,"name":432,"navigation":354,"path":441,"seo":442,"slug":443,"stem":444,"twitter":445,"website":446,"__hash__":447},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":132,"value":435,"toc":436},[],{"title":342,"searchDepth":343,"depth":343,"links":437},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":342},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":449,"title":450,"avatar":451,"body":452,"description":342,"email":456,"extension":353,"github":457,"meta":458,"name":129,"navigation":354,"path":459,"seo":460,"slug":129,"stem":461,"twitter":456,"website":462,"__hash__":463},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":132,"value":453,"toc":454},[],{"title":342,"searchDepth":343,"depth":343,"links":455},[],"none","luckystriike22",{},"/authors/luckystriike",{"description":342},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":465,"title":466,"avatar":467,"body":468,"description":342,"email":472,"extension":353,"github":473,"meta":474,"name":475,"navigation":354,"path":476,"seo":477,"slug":473,"stem":478,"twitter":479,"website":480,"__hash__":481},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":132,"value":469,"toc":470},[],{"title":342,"searchDepth":343,"depth":343,"links":471},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":342},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",1776253346774]