|
|
@@ -0,0 +1,110 @@
|
|
|
+# Dawdlehorn - Architecture & Patterns
|
|
|
+
|
|
|
+## Technical Architecture Plan
|
|
|
+
|
|
|
+### Core Technology Stack
|
|
|
+
|
|
|
+#### Audio Processing
|
|
|
+- **Web Audio API**: Native browser audio processing
|
|
|
+- **Audio Worklets**: For low-latency, real-time audio processing
|
|
|
+- **Tone.js**: High-level audio synthesis and effects library
|
|
|
+ - Provides instruments, effects, and scheduling
|
|
|
+ - Built on Web Audio API with better abstractions
|
|
|
+ - Excellent for groovebox-style synthesis
|
|
|
+
|
|
|
+#### Input Handling
|
|
|
+- **Web Gamepad API**: Native gamepad support
|
|
|
+- **Custom Input Manager**: Abstraction layer for different controller types
|
|
|
+- **Event-driven architecture**: Responsive input handling
|
|
|
+
|
|
|
+#### UI Framework
|
|
|
+- **Vanilla JavaScript + Web Components**: For maximum performance
|
|
|
+- **Alternative**: Svelte (minimal runtime overhead)
|
|
|
+- **Canvas API**: For real-time visualizations and waveforms
|
|
|
+
|
|
|
+#### State Management
|
|
|
+- **Custom State Manager**: Lightweight, audio-focused
|
|
|
+- **Immutable updates**: Prevent audio glitches from state changes
|
|
|
+- **Separate audio and UI state**: Different update cycles
|
|
|
+
|
|
|
+### Application Architecture
|
|
|
+
|
|
|
+```
|
|
|
+┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
|
|
+│ Input Layer │ │ Audio Engine │ │ UI Layer │
|
|
|
+│ │ │ │ │ │
|
|
|
+│ • Gamepad API │───▶│ • Tone.js │───▶│ • Web Components│
|
|
|
+│ • MIDI API │ │ • Audio Worklets│ │ • Canvas │
|
|
|
+│ • Input Manager │ │ • Synthesis │ │ • Visualizers │
|
|
|
+└─────────────────┘ └─────────────────┘ └─────────────────┘
|
|
|
+ │ │ │
|
|
|
+ └───────────────────────┼───────────────────────┘
|
|
|
+ │
|
|
|
+ ┌─────────────────┐
|
|
|
+ │ State Manager │
|
|
|
+ │ │
|
|
|
+ │ • Pattern Data │
|
|
|
+ │ • Audio Params │
|
|
|
+ │ • UI State │
|
|
|
+ └─────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+### Key Design Patterns
|
|
|
+
|
|
|
+#### 1. Audio-First Architecture
|
|
|
+- Audio processing runs in separate thread (Audio Worklets)
|
|
|
+- UI updates never block audio processing
|
|
|
+- State changes are batched and scheduled
|
|
|
+
|
|
|
+#### 2. Component-Based UI
|
|
|
+- Modular components for different controls
|
|
|
+- Each component handles its own gamepad mappings
|
|
|
+- Reusable across different views/modes
|
|
|
+
|
|
|
+#### 3. Event-Driven Input
|
|
|
+- Gamepad events trigger audio parameter changes
|
|
|
+- Debounced input for smooth parameter transitions
|
|
|
+- Configurable input mappings
|
|
|
+
|
|
|
+#### 4. Pattern-Based Sequencing
|
|
|
+- Step sequencer with pattern storage
|
|
|
+- Real-time pattern switching
|
|
|
+- Quantized timing for musical accuracy
|
|
|
+
|
|
|
+### Library Selection Rationale
|
|
|
+
|
|
|
+#### Tone.js Benefits
|
|
|
+- Mature Web Audio abstraction
|
|
|
+- Built-in instruments and effects
|
|
|
+- Transport and timing utilities
|
|
|
+- Active community and documentation
|
|
|
+
|
|
|
+#### Web Components Benefits
|
|
|
+- Native browser support
|
|
|
+- Encapsulated styling and behavior
|
|
|
+- Framework-agnostic
|
|
|
+- Excellent for audio UI controls
|
|
|
+
|
|
|
+#### Audio Worklets Benefits
|
|
|
+- True real-time audio processing
|
|
|
+- Separate thread from main UI
|
|
|
+- Low-latency parameter updates
|
|
|
+- Future-proof Web Audio approach
|
|
|
+
|
|
|
+### Performance Considerations
|
|
|
+
|
|
|
+#### Audio Performance
|
|
|
+- Use Audio Worklets for synthesis
|
|
|
+- Minimize garbage collection in audio thread
|
|
|
+- Pre-allocate audio buffers
|
|
|
+- Batch parameter updates
|
|
|
+
|
|
|
+#### Input Performance
|
|
|
+- Poll gamepad at 60fps
|
|
|
+- Debounce rapid input changes
|
|
|
+- Use requestAnimationFrame for smooth updates
|
|
|
+
|
|
|
+#### UI Performance
|
|
|
+- Canvas for real-time visualizations
|
|
|
+- Virtual scrolling for large pattern lists
|
|
|
+- Efficient DOM updates with Web Components
|