Composition Showcase: Three-Layer Coil Editor
do re mi) or press MIDI Connect and play notes on your keyboard (Octave 4). Press Enter to commit.View Source Code
<ppt-container style="height: 100%; min-height: 100%;">
<ppt-flex direction="column" gap="1.5rem">
<ppt-solfege-text-input emit-id="coil-glyph-input"></ppt-solfege-text-input>
<ppt-coil-mixer>
<ppt-coil>
<ppt-grid-coordinator column-width="4em"></ppt-grid-coordinator>
<ppt-coil-layer layer="melody">
<ppt-coil-row>
<ppt-phrase-editor justify="grid" listen-id="coil-glyph-input"></ppt-phrase-editor>
</ppt-coil-row>
</ppt-coil-layer>
<ppt-coil-layer layer="harmony">
<ppt-coil-row>
<ppt-phrase-editor justify="grid" listen-id="coil-glyph-input"></ppt-phrase-editor>
</ppt-coil-row>
</ppt-coil-layer>
<ppt-coil-layer layer="rhythm" muted>
<ppt-coil-row>
<ppt-phrase-editor justify="grid" listen-id="coil-glyph-input"></ppt-phrase-editor>
</ppt-coil-row>
</ppt-coil-layer>
<ppt-playback-scheduler></ppt-playback-scheduler>
<ppt-tone-voice voice-id="default"></ppt-tone-voice>
</ppt-coil>
</ppt-coil-mixer>
<ppt-flex width="100%" justify="flex-end">
<ppt-coil-transport></ppt-coil-transport>
</ppt-flex>
</ppt-flex>
</ppt-container>The Three-Layer Architecture
Prime Period Theory organises musical material across three distinct perceptual and structural strata. Rather than treating pitch, rhythm, and harmony as attributes of a single note stream, PPT separates them into independent layers that are mapped against each other at playback time. This mirrors the way the ear actually processes music — rhythm is a scaffold on which melodic events land, and harmonic colour is a field that envelops the melodic line.
The primary pitch stream. Solfège glyphs here describe individual scale degrees relative to a tonic. Each glyph occupies one rhythmic onset determined by the Rhythm layer below it. The melody layer uses the PitchMapper when receiving MIDI input, translating piano notes into Uniform Solfège syllables. See the Melodic Grammar documentation for more details.
Vertical pitch relationships — chords or sustained tones played simultaneously. Harmonic glyphs sustain until the next harmonic event, rather than strictly following the rhythm grid beat-for-beat. The HarmonyMapper translates MIDI chords into stacked Solfège tokens. A padding token (-) holds the harmonic field through several rhythmic beats.
The foundational periodic grid. In PPT, there is no concept of a "rest" — silence is simply the absence of a pitch entry at a given rhythmic position. Rhythm layer tokens primarily use Do and Di to mark onsets and off-beats. This layer acts as the master timing reference — the PlaybackScheduler reads the Rhythm layer first to generate a sequence of onset times, then maps Melody and Harmony tokens onto those times. See the Rhythmic Grammar documentation for more details. The Rhythm layer is muted by default in this demo.
Layers are displayed bottom-to-top in the editor — Rhythm at the bottom, Harmony above it, Melody at the top — reflecting the compositional dependency chain: rhythm provides time, harmony provides colour, melody provides line.
Uniform Solfège Input
Uniform Solfège (PPT's base-12 notation layer) names all twelve chromatic pitch classes relative to a tonic. Unlike traditional solfège, it is fully chromatic — every semitone step has a unique, unambiguous syllable name. The twelve syllables are:
| Degree | 1 | ♭2 | 2 | ♭3 | 3 | 4 | ♭5 | 5 | ♭6 | 6 | ♭7 | 7 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Syllable | Do | Di | Re | Ri | Mi | Fa | Fi | So | Si | La | Te | Ti |
To enter a phrase via keyboard, click a row to focus it, then type syllable names separated by spaces into the text input above and press Enter. For example, entering Do Mi So Mi Do produces a simple ascending-descending arpeggio.
Layer-Specific Interpretation
Uniform Solfège is interpreted differently depending on the active layer:
- Melody: Syllables can be interpreted as either absolute pitch positions within the solfège space or as interval movements from the previously sounded note (via Melodic Grammar).
- Harmony: Syllables represent vertical chord structures. The text parser allows for grouping multiple syllables to specify stacked notes, and a dash (
-) can be used to explicitly pad or hold the harmonic field across rhythmic beats. - Rhythm: Syllables strictly define rhythmic groupings and accents.
DoandDiencode primary onsets and off-beats, without any attached pitch meaning.
MIDI Solfège Input
The MIDI Connect button in the text input bar initiates a WebMIDI API request. Once permission is granted, notes played on any connected MIDI device are automatically mapped to Uniform Solfège syllables and routed to the currently focused phrase editor. This makes the editor function as a transcription surface — play a musical idea directly on your instrument and see it rendered in Solfège notation in real time.
Layer-Aware Mappers & Input Octaves
The mapping strategy changes depending on which layer has focus. To facilitate both pitch selection and editing commands, the MIDI mapping divides the keyboard into two key regions: the Input Octave (C4 to B4) for note entry, and the Modifier Octave (C3 to B3) for structural commands and chord modifications.
- PitchMapper (Melody): Translates each incoming MIDI note in the Input Octave to its Uniform Solfège syllable relative to the root. Single notes map to single glyphs. Suitable for step-by-step melodic entry.
- HarmonyMapper (Harmony): Translates MIDI notes into stacked Solfège tokens. The lowest note played in the Input Octave defines the root of the chord, while additional notes held in the Modifier Octave specify the chord tones relative to that root. When you release all notes, or press the commit modifier, the chord is committed. Holding C3 in the Modifier Octave allows entering dot or dash padding symbols.
- RhythmMapper (Rhythm): Converts MIDI note timing into rhythmic tokens. Notes map to
Do(onset) orDi, allowing you to tap a rhythm pattern directly on your instrument without needing dedicated rhythmic hardware.
General Modifier Keys
When using MIDI input, the Modifier Octave (C3 to B3) contains dedicated keys for editing and controlling the flow of syllables:
- E3 (Delete): Acts as a backspace to delete the last entered syllable in the active row.
- G3 (Commit): Explicitly commits the currently held chord or syllable to the phrase.
Structural Command Chords
Beyond note input, a special structural chord allows you to trigger structural editing commands without lifting your hands from the instrument. Hold C3 + B4 simultaneously, then press one of the following modifier notes:
| Modifier note | MIDI # | Action |
|---|---|---|
| E3 | 52 | Delete current row |
| G3 | 55 | Add new row to current layer |
| F♯3 | 54 | Navigate up to previous row |
| D♯3 | 51 | Navigate down to next row |
MIDI input requires browser support for the WebMIDI API. Chrome and Edge support this natively. Firefox requires the Jazz-Plugin or similar. iOS/Safari is not currently supported.
Playback Engine
The playback system in this demo consists of cooperating headless components that live inside the <ppt-coil>. When you press Play, the transport publishes the current BPM and loop settings. The playback scheduler receives this, reads the rhythm layer's tokens to generate a timing grid of note onsets (or falls back to a 16-sixteenth-note grid if the rhythm layer is empty), then maps each melody and harmony token onto an onset and schedules the corresponding audio.
The synthesizer handles the actual audio synthesis, receiving events with frequency and duration from the scheduler. Multiple voices can be defined — one per row — to give each row its own timbre and register.
Mixer Controls
The <ppt-coil-mixer> wrapper injects Mute (M) and Solo (S) buttons into the header slot of each row. These are not just visual — mute/solo state is published to the EventBus and the PlaybackScheduler respects it when building the schedule. If any row is soloed, only soloed rows sound; if a row is muted, it is excluded from the schedule entirely.
In this demo, the Rhythm layer starts muted. You can unmute it once you have rhythm tokens entered to hear the full three-layer texture. The Mute button on the Rhythm row is highlighted red to indicate default-muted status.