[1] Sample VM Color Piano Animations | [2] Theory | [3] Project History | [4] Tools



Welcome to colorpiano.com, home of the Color Piano Project, an interactive representational system devised to bridge visualization and understanding between language, color and music. The Color Piano Project is an open source exploratory educational color/music system.

[1] Sample VM Color Piano Flash Animations

Sample Animation 1 (chromatic scale)
Sample Animation 2 (on black background)
Sample Animation 2 (on white background)



[2] Theory

2.1 The Basics

To understand the Color Piano Project one needs a basic understanding of musical (sound) and color (light) systems. The easiest way to start is to think about the colors in the rainbow. Imagine spreading the colors of the rainbow (see Fig.1.1) evenly across 1 octave of keys on a piano. On the far left you have red, which represents the musical note "C" on the far right you have magenta and that becomes the musical note "B". By chance, 12 (the number of notes in an octave) is the scientific division of the color spectrum that allows both RGB and CMYK values to appear. The VM (Velocity Meter) Color Piano takes the whole idea one simple step further by repeating that idea for all the octaves across the 88 notes of the piano. The the next octave up and down repeat this sequence of colors but with one catch. The octaves simply become lighter (tints) for higher octaves and darker (shades) for lower octaves. The vertical axis of the VM Color Piano Chart (as seen in sample animations) denotes volume, the louder the note the higher the color bar extends vertically.

Figure 1.1 - Color Spectrum


Figure 1.2 - Color Piano Middle Octave


Figure 1.3 - Color Piano 88 Keys (low notes get shaded and high notes get tinted)


Figure 1.4 - Linear Color Strip (same 88 colors as above)


2.2 Color Systems

There are two prevailing color systems, RGB (Red, Green, Blue) and CMYK (Cyan, Magenta, Yellow and Black). RGB is an additive color model used for things like your computer monitor. CMYK is a subtractive color model most commonly used in commercial printing. The beauty of the VM Color Piano is that it begins to unify these color systems in a rather simple way using no more than two (100% or 50%) percentages in either color system at one time.


Table 1.1 - Color Piano Percentages (Middle Octave)

[-] Helpful Links (Wikipedia)

> Color Theory
> Music Theory
> Synesthesia
> Visual Music

[-] Other Tools, Research and Resources

> Color Piano Chrome Experiment by Michael Deal
> Center for Visual Music
> ColourMuse Piano Method by Michael Maxwell Steer
> Hyperinstruments by Tod Machover (MIT)
> The iotaCenter
> Playing with Colour by Sharon Goodey
> The Tobin Music System by Candida Tobin
> Visual Explanations by Edward R. Tufte

  R G B | C M Y
B 100% C 50%   - 100% 50%
A#/B- 100% 100% -   - 100% - <- Magenta
A 50% - 100%   50% 100% -
G#/A- - - 100%   100% 100% - <- Blue
G - 50% 100%   100% 50% -
F#/E- - 100% 100%   100% - - <- Cyan
F - 100% 50%   100% - 50%
E - 100% -   100% - 100% <- Green
D#/E- 50% 100& -   50% - 100%
D 100% - 100%   - - 100% <- Yellow
C#/D- 100% 50% -   - 50% 100%
C 100% - -   - 100% 100% <- Red


[3] Project History

The Color Piano Project is an exploratory color/music system developed by Dan Vlahos as part of his 1999 undergraduate graphic design thesis project at Massachusetts College of Art and Design. The research culminated with a linear scale design that bridged frequency cognition with a pragmatic representation of music through the use of common of color systems (CMYK and RGB). The animated version of this scale also reflects the volume or "velocity" of the note. The VM (Velocity Meter) Color Piano was inspired and informed by the color organ theories of A. Wallace Rimington (Colour-Music: The Art of Mobile Color, 1912) and color theories pioneered by A.H. Munsell.

In 2010 several Color Piano Project concepts were referenced in the design and development of the Color Piano Chrome Experiment by Michael Deal. According to Michael "Color Piano is an educational reference that ties together chords, scales, inversions, octaves, and key signatures—providing a visual interface for learning the Piano. Also includes color schemes historic figures believed best represented each note, which can be fun to imagine."



[4] Tools and Suggestions

4.1 Composing and Animating using the VM Color Piano System

Any animation has a frame rate and any piece of music has a tempo. Getting these two things to align can be tricky but some basic math can help. In an animation like the ones created in Flash, the default frame rate is usually 12 frames per second (fps). For my animations I increased that to 20 fps. For the music I composed a song at 120 beats per minute (bpm) or 2 beats per second (bps). This was done intentionally, knowing that when all was said and done I'd have a nice even beat landing on every 10 frames of the animation.

The next thing you need is a music software package the records MIDI data, most importantly note velocity (volume). For my first composition I used Apple's GarageBand paired with an M-Audio USB keyboard. The note velocity (volume) is what will determine how high the color bar should pop up when played.

[-] Templates

Chromatic Scale Flash Temple (fla)
Sample GarageBand Music File (band)