MYCELIA

MYCELIA transforms human memory into living 3D botanical art. Plant your stories to germinate unique procedural organisms with custom colors, interactive audio frequencies, and multiplayer presence.

Comment

💡 Inspiration

Memories in the digital age are all too often reduced to static text logs, endless social media feeds, or rigid database rows. But human memories aren't static—they are fluid, interconnected, and deeply emotional.

We asked ourselves: What if our thoughts and memories could be planted like seeds in a shared digital canvas? What if they could sprout into living, breathing 3D organisms that look, feel, and sound like the emotions embedded within them?

Inspired by the subterranean fungal mycelium networks that connect whole forests beneath the surface, MYCELIA was created to visualizes human connection, narrative memory, and shared emotional frequencies in an interactive 3D ecosystem.

🔮 What It Does

MYCELIA is an interactive, full-stack 3D visual memory canvas where users plant written memories that procedurally germinate into custom 3D botanical forms.

1. Text-to-Genome Deterministic Engine

Every memory text input undergoes hash-seeded processing (using a mulberry32 PRNG) to produce a 128-bit Genome structure containing:

  • Archetype: Classified into one of 5 visual growth forms.
  • Warmth & Hue: Color spectrum mapping warm vs. cool emotional tones ($0-360^\circ$ HSL).
  • Energy: Controls branch density, terminal tip burst count, and segment turbulence.
  • Scale & Recursion Depth: Physical volume ($0.5\times - 1.3\times$) and branching depth ($3-5$ recursive levels).

Because the algorithm is deterministic, the exact same story always yields the exact same 3D structure anywhere in the world.

2. 5 Memory Growth Archetypes

  • 🪸 Coral: Compact, radiating geometry representing warmth, social connection, and community.
  • 🍄 Mycelium: Sprawling, subterranean root network representing hidden, interconnected, or introspective thoughts.
  • 🌿 Vine: Vertical climbing spiral structure representing ambition, growth, and reaching forward.
  • 💎 Crystal: Geometric, sharp regular angles representing clarity, precision, order, and stillness.
  • 🌸 Bloom: Explosive multi-directional terminal tips representing creativity, joy, and high energy.

3. Interactive 3D WebGL Rendering & FX

  • Procedural Tube Geometry: Custom generated 3D meshes rendered via Three.js with dynamic curve sampling and radius decay tapering per depth level.
  • Multi-Layer Depth Particle Field: 1,250 particles stratified across 4 depth layers (blue, orange, purple, pink) featuring GLSL shader-based parallax, depth opacity blending, and subtle twinkle effects.
  • Post-Processing Pipeline: Custom Bloom, Chromatic Aberration, and Vignette effects for a filmic, high-end visual polish.

4. Hover Audio Synthesis (Spatial Sound)

Hovering over any organism triggers a Web Audio API audio synthesizer. The audio engine derives fundamental frequencies, harmonic overtones, gain envelopes, and pan position directly from the memory's warmth and energy metrics—allowing users to listen to the emotional frequency of memories.

5. Real-Time Multiplayer Presence & Live Planting

Powered by Supabase Realtime, users see live glowing cursors of other explorers traversing the canvas. When a user anywhere in the world plants a new seed, all connected clients watch the organism germinate live in real time.

🛠️ How We Built It

Architecture Flow

User Text Input
   └─► textToGenome() [Hash + Mulberry32 PRNG]
          ├─► Genome { archetype, hue, warmth, energy, depth, scale }
          └─► generateBranches() [Procedural Recursive Algorithm]
                 └─► buildOrganismGeometry() [Three.js Tube Geometry + Shader Material]
                        ├─► R3F Canvas Render + Post-Processing (Bloom / Chromatic Aberration)
                        ├─► 4-Layer GLSL Particle Starfield
                        ├─► Web Audio API Harmonic Synthesis (on hover)
                        └─► Supabase Realtime Sync (Broadcast & Cursor Presence)

Tech Stack Breakdown

  • Frontend Core: React 19.2, TypeScript 6.0, Vite 8.1
  • 3D Graphics Engine: Three.js v0.185, React Three Fiber v9.6, @react-three/postprocessing
  • Custom Shaders: GLSL fragment and vertex shaders for depth particle attenuation and glowing tendril highlights
  • Audio: Native HTML5 Web Audio API with custom gain envelope and dual oscillator synthesizer
  • Styling & UI: Tailwind CSS 4.3 with custom glassmorphism utilities, Framer Motion 12.42, GSAP 3.15
  • Backend & Sync: Supabase PostgreSQL database, Supabase Realtime Channels (Presence & Broadcast), Supabase Edge Functions

⚡ Challenges We Ran Into

  1. WebGL Geometry Performance Optimization: Generating high-density procedural 3D tube geometries dynamically can quickly overwhelm GPU memory. We solved this by implementing cached curve segment sampling, vertex buffer reuse, and bounding-sphere frustum culling.
  2. Platform-Independent Determinism: Ensuring float calculations in JavaScript hash functions produced identical seed values across V8 (Chrome), JavaScriptCore (Safari), and SpiderMonkey (Firefox).
  3. Multi-Layer Shader Depth Blending: Balancing 4 particle layers with distinct blending modes alongside heavy post-processing Bloom without triggering visual artifacts or GPU frame drops. We tuned custom GLSL depth attenuation formulas (gl_FragColor = vec4(uColor, alpha * vDepth * vTwinkle)).
  4. Browser Audio Autoplay Policies: Modern browsers block Web Audio API contexts until user interaction occurs. We designed an implicit gesture listener that safely initializes the AudioContext upon the user's first click or hover action.

🏆 Accomplishments That We're Proud Of

  • 🌌 Sensory Harmony: Achieving a seamless synthesis of procedural 3D art, interactive sound design, and emotional text analysis.
  • ⚡ Solid 60 FPS Performance: Maintaining silky-smooth framerates even with dozens of 3D procedural organisms, 1,250 depth particles, post-processing shaders, and real-time network presence.
  • 🔒 Zero-Drift Deterministic Engine: The exact same story always yields the exact same living organism across all devices and sessions.
  • 💎 Ultra-Sleek Aesthetic: Delivering a modern, dark-mode glassmorphic interface that wows users at first sight.

📚 What We Learned

  • Advanced procedural geometry generation techniques using Three.js CatmullRomCurve3 and dynamic TubeGeometry.
  • Custom GLSL shader development in React Three Fiber for particle depth attenuation and volumetric lighting effects.
  • Spatial audio synthesis techniques using native Web Audio API oscillators to translate multi-dimensional numeric data into pleasant musical intervals.
  • Optimizing React render cycles when binding high-frequency 3D render loops (useFrame) with stateful React UI overlays.

🔮 What's Next for MYCELIA

  • 🥽 WebXR / Spatial Computing: Full VR/AR support allowing users to physically walk inside their memory gardens.
  • 🧠 Deep AI Sentiment Embeddings: Integrating LLM embeddings (Claude / Gemini API) to extract subtle emotional nuances (nostalgia, longing, joy, tranquility) for hyper-personalized growth parameters.
  • 🎙️ Voice Memory Planting: Real-time voice recording with speech-to-text and acoustic pitch emotion extraction.
  • 🌐 Ecosystem Evolution: Memory cross-pollination, seasonal growth cycles, and memory decay/blooming over time based on community interactions.

Built With

Share this project:

Updates