(Your browser does not support canvas)


Cmusic approaches music visually, but it is not your standard iTunes visualizer. It digs deeper, demonstrating the dynamics of a piece while revealing relationships among individual notes. Through motion, speed, size, and color, the intricacies of music are easily explained. Complexity becomes simplicity. We demonstrate this transformation by visualizing J.S. Bach's Prelude in C Major.

Rules to Visualize By.

Each individual tone of the piece is represented by a single colored circle, or a Note-Circle. Using the mathematics behind the frequency of pitch, we derive the vertical falling speed of a particular Note-Circle. The higher the pitch of the note, the faster the speed of the note-circle's movement.

Likewise, the color of each Note-Circle is generated based on of the note's location on a piano. Middle-C (C4; Key #40) represents the base color. Every color surrounding this one is an interpolation between black for lower frequency pitches and white for higher frequency pitches. Thus the darker the Note-Circle appears, the lower its frequency and the brighter it appears the higher its frequency.

All Note-Circles upon first generation have the same radius. However, as the piece progresses and we begin to uncover the pitches which bound the piece together, the radius of a particular pitch's Note-Circle increases on every re-generation. In this manner, we highlight the subtleties of notes not in the musical key of C Major or that are less visited, introducing the dependency of the piece on certain notes.

Note-Circles are generated in a left-to-right manner with the sounding of a pitch. We define the width of the left-to-right motion to be an eight note sequence representing the individual 8-note phrases of the Prelude.

As a Note-Circle falls, it progressively become more transparent, signifying the relationship of pitches fading after their initial sounding from a piano.

When a crucial dynamic in the piece begins to surface, we visualize this through making Note-Circles move in a circular path. In this example, the turning point occurs as heavy bass notes wind the sound upwards until it reaching a point of resolution.


P : Pause the playback (clicking outside of the window will also temporarily pause the visualization)

O : Background Note Color Mode - see the Note-Circle color change through the canvas background.