SumiVibe — Art + Music in Time

The project started with a simple question: what would it feel like to watch ink paint itself?

I've always been drawn to sumi-e (Japanese ink wash painting) for its meditative quality. The brush moves, ink flows, and something organic emerges. Traditional sumi-e is defined by its organic imperfections—the way bristles split and separate, how ink depletes along a stroke, the spontaneous splatters and dry-brush effects. I wanted to capture this feeling in real-time, creating a continuous stream of flowing calligraphy that draws itself.

• Organic movement — Graceful, swooping curves that feel like hand-drawn strokes
• Authentic ink appearance — Bristle textures, pressure variation, dry-brush effects
• Meditative atmosphere — Floating petals, ambient music, serene color palettes
• Technical elegance — 60fps performance with complex procedural effects

The project started with no code—just thinking. Over a few days, I kept returning to the same vision: art that makes itself, movement that feels like breathing, an aesthetic that's minimalist but alive.

Using AI as a thinking partner: Before writing code, I used ChatGPT for preliminary concept exploration, programming ideation, and level-of-effort estimation. This surfaced potential challenges early (shader complexity, mobile performance) and gave me a mental map of the work ahead.

Naming the project: Finding the right name matters. After going through dozens of options, SumiVibe emerged—'Sumi' directly references sumi-e ink, 'Vibe' captures the atmospheric, feeling-based nature. It's short, memorable, and the domain was available. Securing `sumivibe.com` made the project feel real.

The ribbon is the heart of SumiVibe—a continuously growing 3D ink stroke that flows through space. Getting this right took the most iteration and represented about 40% of the total project effort.

The breakthrough: layered waves. Single sine waves look mechanical. Instead, I stacked multiple movement patterns:

• Slow sweeping arcs — The dominant 'breathing' feel
• Medium S-curves — Flowing transitions between movements
• Figure-8 patterns — Elegant crossing motions
• Fractal noise wobble — Subtle organic variation

Each layer operates at different frequencies, combining into something that feels hand-drawn rather than computed. Catmull-Rom spline interpolation creates smooth curves between control points, and age-based fading makes old geometry disappear gracefully.

Self-regulating systems: The ribbon has homeostatic mechanisms—chaos damping when movement gets too erratic, and 'boredom injection' when it gets too straight. This creates organic variation without manual intervention.

The ribbon geometry is only half the story. A custom fragment shader creates the authentic ink appearance:

• Bristle simulation — 32 virtual bristles, each with unique ink capacity and depletion
• Dry-brush effects — Random dry patches where ink fails to transfer
• Jagged edges — Sharp interpolation creating realistic bristle separation
• Depth-based fading — Old strokes gracefully fade over 35 seconds

The fragment shader does ~32 bristle calculations per pixel, per frame—something JavaScript could never handle at 60fps. Shaders are essential for real-time brush effects.

Motif orchestrator: Branches, flowers, and leaves spawn along the ribbon path, transforming abstract ink into something that feels like growing paintings. An orchestrator manages spawn timing, variety, and lifecycle—watching the ribbon and making intelligent decisions about when and what to spawn.

Floating petals: Ambient particles drift across the scene independent of the ribbon. They feature 3D tumbling rotation, dynamic geometry that curves as petals flip, wind simulation with occasional gusts, and object pooling for performance. These run in 'preview mode' on the start screen.

Procedural background: The background isn't static—it's a shader-generated paper texture with procedural grain, fiber patterns, motion-responsive streaks, and vignette focusing. The shader creates a living background that participates in the experience.

The original vision was more ambitious: a visual experience for guitar playing. I wanted to create an immersive guitar practicing application where the visuals would react to your playing in real-time—an experience that makes practice feel like performance.

But I needed to get the visuals right first. Building audio-reactive guitar visuals on top of a shaky visual foundation would have been a mistake. The ribbon system, the ink shaders, the botanical motifs—all of this needed to feel alive and organic before layering in audio reactivity. You can't create an immersive experience if the base isn't immersive on its own.

So I shelved the guitar aspect. Rather than rush to build something half-baked, I focused entirely on perfecting the visual experience. The audio system I built (Web Audio API integration, pitch detection, amplitude extraction) still exists in the codebase, waiting for when the visuals are fully ironed out.

The plan is to bring it back. Once the visual foundation is solid, SumiVibe will evolve into a guitar practicing application that reacts to your playing—an immersive visual experience that makes practicing feel like meditation.

The architecture is deliberately simple: a central orchestrator coordinates visual systems that operate independently through a shared event bus. Performance optimizations include:

• Pre-allocated buffers — Fixed-size geometry buffers, never reallocated at runtime
• Reused working vectors — No garbage collection from vector operations
• DrawRange updates — Only update draw range, don't recreate geometry
• Damp instead of lerp — Frame-rate independent smoothing
• Object pooling — Petals and motifs recycled instead of created/destroyed
• Seeded PRNG — Mulberry32 algorithm enables deterministic replay

• Three.js — 3D rendering and scene management
• Vite — Fast development and production builds
• Custom GLSL shaders — Ink effects and background textures
• Web Audio API — Music playback and ambient audio

• Let ideas marinate — A few days of background thinking before coding can save weeks of building the wrong thing
• The core mechanic matters most — The ribbon is 80% of SumiVibe's identity. Getting that right was worth the disproportionate effort
• Build tools for yourself — Time spent on TweakPanel and debugging visualizers paid dividends in faster iteration
• Be willing to cut features — Audio reactivity was technically impressive but experientially wrong. Removing it improved the project
• Layered waves create organic movement — Single sine waves look mechanical; 4-5 waves at irrational frequency ratios creates complexity
• Procedural content needs self-regulation — Without homeostatic systems, generative art spirals into chaos or settles into boring patterns

SumiVibe is designed for future expansion:

• Guitar practicing mode — The ultimate vision: visuals that react to your playing, making practice feel immersive and meditative
• Session recording — The seeded PRNG enables deterministic replay of exact visual sequences
• New motif types — The orchestrator is ready for additional visual elements
• Mobile optimization — Core runs well, but touch UX needs polish

Experience it yourself at sumivibe.com. Click 'Begin Experience,' and watch the ink flow.

Built with patience, iteration, and a love for the meditative quality of ink on paper.