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