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