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