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