# khantmyoaung/khord architecture

> Architecture diagram of the GitHub repository khantmyoaung/khord, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/khantmyoaung/khord
- Repository: https://github.com/khantmyoaung/khord

## Overview

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: [`js/fluid-app.js`](https://github.com/khantmyoaung/khord/blob/master/js/fluid-app.js) (Pond Controller), [`js/app.js`](https://github.com/khantmyoaung/khord/blob/master/js/app.js) (App Controller), [`js/fluid-notes.js`](https://github.com/khantmyoaung/khord/blob/master/js/fluid-notes.js) (Markers and Drippers), [`js/fluid-showcase.js`](https://github.com/khantmyoaung/khord/blob/master/js/fluid-showcase.js) (Silent Showcase)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_main["Chord Instrument"]
  node_main_page["Instrument Page<br/>[index.html]"]
  node_input["Input Mapping<br/>[input-manager.js]"]
  node_app["App Controller<br/>[app.js]"]
  node_theory["Chord Theory<br/>[chord-engine.js]"]
  node_modes["Play Modes<br/>[modes.js]"]
end

subgraph group_audio["Sound and Loops"]
  node_audio_engine["Audio Engine<br/>[audio-engine.js]"]
  node_looper["Six-Track Looper<br/>[looper.js]"]
end

subgraph group_fluid["Fluid Instrument"]
  node_fluid_page["Pond Page<br/>[fluid.html]"]
  node_fluid_app["Pond Controller<br/>[fluid-app.js]"]
  node_fluid_notes["Markers and Drippers<br/>[fluid-notes.js]"]
  node_fluid_sim["Wave Simulation<br/>[fluid-sim.js]"]
end

subgraph group_visual["Fluid Visuals"]
  node_scene["Pond Scene<br/>[fluid-scene.js]"]
  node_render["Water Renderer<br/>[fluid-render.js]"]
  node_showcase["Silent Showcase<br/>[fluid-showcase.js]"]
end

node_player(("Player"))

node_player -->|"opens"| node_main_page
node_player -->|"plays via"| node_input
node_input -.->|"sends controls"| node_app
node_app -->|"dispatches chords"| node_modes
node_app -.->|"gets chord data"| node_theory
node_modes -->|"triggers sound"| node_audio_engine
node_app -->|"controls recording"| node_looper
node_looper -->|"replays events"| node_audio_engine
node_player -->|"opens"| node_fluid_page
node_fluid_page -.->|"starts pond"| node_fluid_app
node_fluid_app -.->|"updates surface"| node_fluid_sim
node_fluid_app -.->|"manages markers"| node_fluid_notes
node_fluid_notes -.->|"tests wave height"| node_fluid_sim
node_fluid_notes -.->|"derives pitches"| node_theory
node_fluid_notes -->|"triggers notes"| node_audio_engine
node_fluid_app -.->|"builds scene"| node_scene
node_fluid_app -.->|"draws water"| node_render
node_render -.->|"samples backdrop"| node_scene
node_player -->|"views preview"| node_showcase
node_showcase -->|"simulates ripples"| node_fluid_sim
node_showcase -->|"builds backdrop"| node_scene
node_showcase -->|"renders pond"| node_render

click node_main_page "https://github.com/khantmyoaung/khord/blob/master/index.html"
click node_input "https://github.com/khantmyoaung/khord/blob/master/js/input-manager.js"
click node_app "https://github.com/khantmyoaung/khord/blob/master/js/app.js"
click node_theory "https://github.com/khantmyoaung/khord/blob/master/js/chord-engine.js"
click node_modes "https://github.com/khantmyoaung/khord/blob/master/js/modes.js"
click node_audio_engine "https://github.com/khantmyoaung/khord/blob/master/js/audio-engine.js"
click node_looper "https://github.com/khantmyoaung/khord/blob/master/js/looper.js"
click node_fluid_page "https://github.com/khantmyoaung/khord/blob/master/fluid.html"
click node_fluid_app "https://github.com/khantmyoaung/khord/blob/master/js/fluid-app.js"
click node_fluid_notes "https://github.com/khantmyoaung/khord/blob/master/js/fluid-notes.js"
click node_fluid_sim "https://github.com/khantmyoaung/khord/blob/master/js/fluid-sim.js"
click node_scene "https://github.com/khantmyoaung/khord/blob/master/js/fluid-scene.js"
click node_render "https://github.com/khantmyoaung/khord/blob/master/js/fluid-render.js"
click node_showcase "https://github.com/khantmyoaung/khord/blob/master/js/fluid-showcase.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main_page,node_input,node_app,node_theory,node_modes toneBlue
class node_audio_engine,node_looper toneAmber
class node_fluid_page,node_fluid_app,node_fluid_notes,node_fluid_sim toneMint
class node_scene,node_render,node_showcase toneRose
class node_player toneIndigo
```

## Components

### Chord Instrument

- [Instrument Page](https://github.com/khantmyoaung/khord/blob/master/index.html): `index.html`
- [Input Mapping](https://github.com/khantmyoaung/khord/blob/master/js/input-manager.js): `js/input-manager.js`
- [App Controller](https://github.com/khantmyoaung/khord/blob/master/js/app.js): `js/app.js`
- [Chord Theory](https://github.com/khantmyoaung/khord/blob/master/js/chord-engine.js): `js/chord-engine.js`
- [Play Modes](https://github.com/khantmyoaung/khord/blob/master/js/modes.js): `js/modes.js`

### Sound and Loops

- [Audio Engine](https://github.com/khantmyoaung/khord/blob/master/js/audio-engine.js): `js/audio-engine.js`
- [Six-Track Looper](https://github.com/khantmyoaung/khord/blob/master/js/looper.js): `js/looper.js`

### Fluid Instrument

- [Pond Page](https://github.com/khantmyoaung/khord/blob/master/fluid.html): `fluid.html`
- [Pond Controller](https://github.com/khantmyoaung/khord/blob/master/js/fluid-app.js): `js/fluid-app.js`
- [Markers and Drippers](https://github.com/khantmyoaung/khord/blob/master/js/fluid-notes.js): `js/fluid-notes.js`
- [Wave Simulation](https://github.com/khantmyoaung/khord/blob/master/js/fluid-sim.js): `js/fluid-sim.js`

### Fluid Visuals

- [Pond Scene](https://github.com/khantmyoaung/khord/blob/master/js/fluid-scene.js): `js/fluid-scene.js`
- [Water Renderer](https://github.com/khantmyoaung/khord/blob/master/js/fluid-render.js): `js/fluid-render.js`
- [Silent Showcase](https://github.com/khantmyoaung/khord/blob/master/js/fluid-showcase.js): `js/fluid-showcase.js`

### Other components

- **Player**

## Connections

- Player → Instrument Page: opens (evidence: `README.md`)
- Player → Input Mapping: plays via (evidence: `README.md`)
- Input Mapping → App Controller: sends controls
- App Controller → Play Modes: dispatches chords (evidence: `js/app.js`)
- App Controller → Chord Theory: gets chord data
- Play Modes → Audio Engine: triggers sound (evidence: `js/modes.js`)
- App Controller → Six-Track Looper: controls recording (evidence: `js/app.js`)
- Six-Track Looper → Audio Engine: replays events (evidence: `js/looper.js`)
- Player → Pond Page: opens (evidence: `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 (evidence: `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 (evidence: `README.md`)
- Silent Showcase → Wave Simulation: simulates ripples (evidence: `js/fluid-showcase.js`)
- Silent Showcase → Pond Scene: builds backdrop (evidence: `js/fluid-showcase.js`)
- Silent Showcase → Water Renderer: renders pond (evidence: `js/fluid-showcase.js`)