Music and mathematics have shared a deep bond since the ancient Pythagoreans discovered the integer ratios behind musical harmony.
Johann Sebastian Bach and later classical composers took this connection to new heights by constructing music around geometric symmetries in 2D coordinate space.
If we plot a melody on a coordinate grid where the horizontal axis represents Time ($x$) and the vertical axis represents Pitch ($y$), musical forms become geometric transformations:
Transposition = Translation $(x, y) \to (x, y + k)$: Shifting all pitches up or down by a constant interval $k$.
Retrograde = Horizontal Reflection $(x, y) \to (L - x, y)$: Playing the melody backward in time, mirroring across a vertical line.
Inversion = Vertical Reflection $(x, y) \to (x, 2y_{\text{pivot}} - y)$: Mirroring pitches across a horizontal pitch axis $y_{\text{pivot}}$. An ascending step of $+2$ semitones becomes a descending step of $-2$ semitones!
Retrograde Inversion = 180° Rotation: Combining both reflections so the melody is both backward and upside down!
With CodeByMath's interactive abcjs music engine, you can generate sheet music in standard ABC notation and hear it played immediately with a built-in audio synthesizer:
music_play(abc_string) renders clean SVG sheet music and launches the audio player in the viewport!
music_render(abc_string) displays sheet music notation only.
Move the mouse over a dotted box for more information.
Interactive Playback: Click Play in the music player to hear the theme and all three geometric transformations synthesized directly in your browser!
Loop and Warp: Use the player controls to loop the playback or change the tempo speed.
Download ABC: Click Download ABC to save your musical composition as a standard .abc notation file.
Now you try. Change the original theme to your own 7-note melody, or change the inversion pivot from 3 (E) to 4 (F) or 5 (G) and listen to how the pitch symmetry changes!
Type your code here:
See your results here:
The code has ???? for the final tonic note of the theme. Replace ???? with 1 (representing C) and click Run to generate the score and audio synthesizer in the viewport!
1. In the viewport, you will see all four musical phrases written in standard music notation on the staff:
1. Theme: The ascending-then-descending melodic motif.
2. Retrograde: The exact same melody played in reverse.
3. Inversion: Every upward leap becomes an equal downward leap around the central pitch $E$.
4. Retrograde Inversion: Both reversed in time and inverted in pitch!
2. Click the Play button on the player bar at the bottom to hear the audio synthesizer play all 8 measures.
3. Click Download ABC to save the raw ABC notation text file to your computer.
Share your code
Show a friend, family member, or teacher what you've done!