How khantmyoaung/khord works
Khord is a browser-based chord instrument with two playing surfaces: a controller/keyboard-driven chord instrument and Khord Fluid, where ripples trigger scale-based notes. The main workflow routes input through the app and play modes to chord theory and audio; recording and loop playback are handled by the looper. Fluid has a separate simulation, marker-trigger, scene, and rendering branch, plus a silent showcase. The README documents capabilities beyond the sampled excerpts; dashed, uncited edges mark fluid runtime wiring not directly visible in those excerpts.
Main entry points: fluid-app.js Pond Controller · app.js App Controller · fluid-notes.js Markers and Drippers · fluid-showcase.js Silent Showcase
Components 15
Chord Instrument
- Instrument Page
index.html - Input Mapping
js/input-manager.js - App Controller
js/app.js - Chord Theory
js/chord-engine.js - Play Modes
js/modes.js
Sound and Loops
- Audio Engine
js/audio-engine.js - Six-Track Looper
js/looper.js
Fluid Instrument
- Pond Page
fluid.html - Pond Controller
js/fluid-app.js - Markers and Drippers
js/fluid-notes.js - Wave Simulation
js/fluid-sim.js
Fluid Visuals
- Pond Scene
js/fluid-scene.js - Water Renderer
js/fluid-render.js - Silent Showcase
js/fluid-showcase.js
Other components
- Player
Connections 22
- Player → Instrument Page: opens
README.md - Player → Input Mapping: plays via
README.md - Input Mapping → App Controller: sends controls
- App Controller → Play Modes: dispatches chords
js/app.js - App Controller → Chord Theory: gets chord data
- Play Modes → Audio Engine: triggers sound
js/modes.js - App Controller → Six-Track Looper: controls recording
js/app.js - Six-Track Looper → Audio Engine: replays events
js/looper.js - Player → Pond Page: opens
README.md - Pond Page → Pond Controller: starts pond
- Pond Controller → Wave Simulation: updates surface
- Pond Controller → Markers and Drippers: manages markers
- Markers and Drippers → Wave Simulation: tests wave height
- Markers and Drippers → Chord Theory: derives pitches
- Markers and Drippers → Audio Engine: triggers notes
js/fluid-notes.js - Pond Controller → Pond Scene: builds scene
- Pond Controller → Water Renderer: draws water
- Water Renderer → Pond Scene: samples backdrop
- Player → Silent Showcase: views preview
README.md - Silent Showcase → Wave Simulation: simulates ripples
js/fluid-showcase.js - Silent Showcase → Pond Scene: builds backdrop
js/fluid-showcase.js - Silent Showcase → Water Renderer: renders pond
js/fluid-showcase.js