Composition Showcase: Metronome

Rhythm as Periodicity

The metronome is one of the clearest demonstrations of the central claim of Prime Period Theory: that pitch, rhythm, and timbre are all manifestations of the same underlying phenomenon — periodicity. A metronome beat is a periodic event in time, exactly as a musical pitch is a periodic vibration in air pressure. PPT treats these as the same kind of structural object, differing only in their frequency domain.

This metronome is built from the same <ppt-period> container used in the Tonal Clock. There is no separate "Metronome component" — only the same circular period primitive, now holding a <ppt-period-sequencer> that advances through the steps at a tempo-driven rate.

How It Works

Toggle Play in the floating control panel to start the sequencer. It will step through each beat marker in turn, triggering the pitch assigned to that step. Beat 1 is assigned a higher-pitched accent (C5, red) while beats 2, 3, and 4 use a softer tone (C4, grey) — the classic 4/4 pulse pattern.

The sequencer itself (<ppt-period-sequencer>) is a non-visual slot component — it occupies a slot position in the period but renders nothing. Its sole responsibility is to fire the sequential step-highlight events that cause each<ppt-period-step-circle> to animate in turn.

The floating control panel demonstrates the event bus pattern: the Play and Tempo controls emit named events (metronome-play, metronome-tempo) which the sequencer listens for via its listen-id attribute. No JavaScript event wiring is required — the binding is purely declarative in HTML.

The Periodicity Connection

In PPT, a four-beat bar is understood as a period of length 4. The downbeat accent on beat 1 is the "Do" equivalent in the rhythmic domain — the tonic point from which the sub-periods (beats 2, 3, 4) are measured. Changing the number of steps changes the metre: remove a step for 3/4, add one for 5/4.

This isomorphism between pitch and rhythm is not merely metaphorical in PPT. Both are modelled using the same <ppt-period> container with the same auto-positioning logic. The only structural difference is whether you attach pitch information or timing information to the steps.

Open in the Designer to experiment with different step counts. A 3-step period produces a waltz; a 5-step period creates an asymmetric pulse similar to Dave Brubeck's Take Five. Try adding a second sequencer on a nested period to explore polyrhythm as overlapping period lengths.