Prime Period Theory

Composition Showcase: Tonal Clock

View Source Code
<ppt-period shape="circle" starting-angle="-90" interactive="true" min-width="200" min-height="200">
  <ppt-period-step-circle slot="step" label="Do" color="var(--solfege-do)" style="--ppt-text-color: #fff; --ppt-marker-border: none;" pitch="C4"></ppt-period-step-circle>
  <ppt-period-step-circle slot="step" label="Ra" color="var(--solfege-re)" style="--ppt-text-color: #000; --ppt-marker-border: none;" pitch="Db4"></ppt-period-step-circle>
  <ppt-period-step-circle slot="step" label="Re" color="var(--solfege-re)" style="--ppt-text-color: #000; --ppt-marker-border: none;" pitch="D4"></ppt-period-step-circle>
  <ppt-period-step-circle slot="step" label="Me" color="var(--solfege-mi)" style="--ppt-text-color: #fff; --ppt-marker-border: none;" pitch="Eb4"></ppt-period-step-circle>
  <ppt-period-step-circle slot="step" label="Mi" color="var(--solfege-mi)" style="--ppt-text-color: #fff; --ppt-marker-border: none;" pitch="E4"></ppt-period-step-circle>
  <ppt-period-step-circle slot="step" label="Fa" color="var(--solfege-fa)" style="--ppt-text-color: #fff; --ppt-marker-border: none;" pitch="F4"></ppt-period-step-circle>
  <ppt-period-step-circle slot="step" label="Fi" color="var(--solfege-fi)" style="--ppt-text-color: #fff; --ppt-marker-border: none;" pitch="Gb4"></ppt-period-step-circle>
  <ppt-period-step-circle slot="step" label="So" color="var(--solfege-so)" style="--ppt-text-color: #fff; --ppt-marker-border: none;" pitch="G4"></ppt-period-step-circle>
  <ppt-period-step-circle slot="step" label="Le" color="var(--solfege-la)" style="--ppt-text-color: #fff; --ppt-marker-border: none;" pitch="Ab4"></ppt-period-step-circle>
  <ppt-period-step-circle slot="step" label="La" color="var(--solfege-la)" style="--ppt-text-color: #fff; --ppt-marker-border: none;" pitch="A4"></ppt-period-step-circle>
  <ppt-period-step-circle slot="step" label="Te" color="var(--solfege-ti)" style="--ppt-text-color: #fff; --ppt-marker-border: none;" pitch="Bb4"></ppt-period-step-circle>
  <ppt-period-step-circle slot="step" label="Ti" color="var(--solfege-ti)" style="--ppt-text-color: #fff; --ppt-marker-border: none;" pitch="B4"></ppt-period-step-circle>
</ppt-period>

What is the Tonal Clock?

The Tonal Clock is not a single component — it is a composition. What you see above is a <ppt-period> container configured with a circular shape, holding twelve individual <ppt-period-step-circle> markers. Each marker calculates its own angular position automatically based on its slot index and the total number of steps in the container. There is no layout arithmetic in the source — the geometry emerges from the structure.

Click any marker to hear its corresponding pitch. The interactive mode onppt-period enables this without any additional event wiring.

Why a Clock Layout?

The clock metaphor for pitch space has a long tradition — most famously in representations of the circle of fifths. PPT repurposes it for a different purpose: mapping all twelve chromatic pitch classes by their proximity relationships within an octave period, rather than by fifth-based distance.

Arranged clockwise starting at 12 o'clock (Do), each step is one equal-tempered semitone from its neighbours. The colour of each marker is drawn from theUniform Solfège colour system, where hue encodes prime family:

  • Red — Do (tonic, 2-prime / octave family)
  • Orange — Ra, Re (2nds, 3-prime)
  • Yellow — Me, Mi (3rds, 5-prime)
  • Green — Fa (4th, 3-prime subdominant)
  • Teal — Fi (tritone, equidistant axis)
  • Blue — So (5th, 3-prime dominant)
  • Indigo — Le, La (6ths, 5-prime)
  • Purple — Te, Ti (7ths, 7-prime)

The result is that prime families cluster visually. Tonal regions — major triads, minor triads, pentatonic sets, whole-tone collections — appear as distinct colour groupings on the clock face rather than as abstract interval counts.

Composition, Not Configuration

The key PPT design principle on display here is that the twelve pitches are not hard-coded properties of a "Tonal Clock" component. You can place any number of steps in any order, use any pitches, and apply any colours. The same <ppt-period>primitive drives the circular metronome in the next showcase — the only difference is what you put inside it.

Try opening the composition in the Designer to add, remove, or reorder pitch markers and observe how the geometry self-organises. You could build a pentatonic clock (5 steps), a whole-tone clock (6 steps), or a microtonal 24-step layout with the same underlying component.