$ show vcync/modV
modV is a desktop application for real-time audio-visual synthesis and effects processing. Built with Electron, Vue.js, and WebGL, it provides a modular environment where users can create chains of visual modules (2D, 3D, shader-based) that react to audio, MIDI, or user-defined parameters. The application features a dual-store Vuex architecture (main and worker processes) to keep the UI responsive while handling intensive graphics and audio processing in a background thread. Key capabilities include audio feature extraction via Meyda, MIDI input mapping, a plugin system for extensibility, and a preset system with seamless state switching. The project emphasizes real-time performance and flexibility for VJs, artists, and live visual performers.
The LLM identified 5 files worth highlighting for reuse:
The input linking system decouples module parameters from their signal sources (audio features, MIDI, tweens, expressions). Each input type (meyda, midi, etc.) is implemented as a Vuex module in the worker store, allowing any numeric parameter to be driven by multiple sources without the module needing to know the origin. This system is highly reusable as it can be extracted into any state-driven application requiring external signal mapping.
The plugin system provides a clean mechanism for extending modV's functionality without modifying core code. Plugins can register new modules, modify stores, add UI components, or hook into the render loop. The system supports both main and worker process plugins, integrates with Vuex for state management, and allows dynamic loading/unloading. This pattern is reusable in any application needing runtime extensibility with clear separation of concerns.
Modules follow a standardized interface with info, init, update, draw, and resize methods, enabling the host to manage them uniformly. This interface supports hot-reloading (modules can be updated without restarting) and clearly separates concerns. The Ball module exemplifies this with audio-reactive properties (using RMS/ZCR from Meyda) and simple 2D rendering. This pattern is reusable in any modular visual or audio processing environment requiring pluggable components.
The expression system allows users to define mathematical expressions (using mathjs) that reference other parameters, time, frame, etc., to compute values. Expressions are parsed and evaluated in a secure context with automatic dependency tracking via Vuex watchers. When any referenced value changes, the expression re-evaluates and updates the target parameter. This reactive expression system is reusable in any application needing user-defined dynamic parameter binding.
The preset system includes a swap mechanism that saves and loads application state without visual glitches by using double-buffering. During a preset switch, the system renders both the old and new states over several frames to ensure a smooth transition. The projects module handles saving/loading the full state (modules, parameters, connections) to/from JSON. This approach to state persistence with seamless transitions is reusable in any real-time application where state changes must not cause visual discontinuities.