Chromatone – Visual Music Language
chromatone.center
chromatone.center
It's been a 7+ years solo build research and design project that is based on my own research and experiments made to explore music as an engineer and independent learner. I was a drummer when I started working on Chromatone but now I have released a number of music albums and singles as solo musician, play 2-4 live sessions a week and help others get into music in their own way.
But I'm not fanatic about the colorful notes. On the main page of web-site you can click a cog icon in the "flower" logo and then adjust any of all of 12 note colors to your preference. And this palette will be used throughout the Theory articles and Practice apps. I know that some people might have synesthesia with conflicting colors. And that those who have music in their hands already wouldn't appreciate another door to the room they're already inside of. But yeah, no matter what language you use to get into music, finally we can always close our eyes and just listen to it. The instrument stickers I make for Chromatone get smaller with the growing skill of musicians using them.
So the Chromatone web-site itself is my gift to those who would like to go the same path from wondering what are all these notes about to having a variety of instruments at hand that I can teach, explore and perform music with. And many of them are those web-apps in the Practice section.
Check out these main points of interest there:
https://chromatone.center/practice/rhythm/circle/ Very powerful polyrhythmic metronome
https://chromatone.center/practice/pitch/spectrogram/ Colorful spectrogram of incoming signal. It's showing the significance of Chromatone coloring as it's absolute and can give exact color for any given frequency and vice versa. So we can see frequencies and relations between them. You can literally see timbre as lines of harmonics present in the sound. The better the mic - the better the spectrogram resolution and quality.
https://chromatone.center/practice/chord/fifths/ Very useful interactive Circle of Fifths with MIDI support, seventh chords and 4 inversions of each available to play with. Incredibly useful instrument for composers.
https://chromatone.center/practice/chord/array/ Tonnetz diagram colored with Chromatone looks quite appealing. Choose a tonic and a scale at the panel to the left (circle with the tonic note name) it will filter out inactive notes and chords. Multitouch available.
https://chromatone.center/practice/chroma/palette/ Minimalist and efficient visualization of MIDI and analysed sound notes in a GLSL shader.
https://chromatone.center/practice/midi/monitor/ Shows all MIDI signals received in a handy table view
https://chromatone.center/practice/synth/elementary/ Main synth on the web-site is quite powerful now and has saw/square oscillators, noise oscillators, Karplus-Strong string voices, sampler voices in a polyphonic synth with some reverb and ping-pong delay added. All adjustable with the left side panel (with keyboard icon).
https://chromatone.center/practice/generative/bounce/ Generative melodies with shifted period sine waves.
https://chromatone.center/practice/jam/random/ a tool for jams - click that one button and get a random BPM and scale to jam in for the next 10 minutes or so. It's like a geolocation for a jam session.
-----
The project is open-source https://github.com/chromatone/chromatone.center and I'm open not only to good advice but to actual contributions to the Theory articles in Markdown and also the Practice apps code written in Vue 3, Vitepress, UnoCSS, pug and other JS ecosystem goodness. Or just give the repo a star! We're approaching v3.0 soon - it will mark the completion of ongoing cleanup of tech debt from years of early development making the site and the NPM lib (https://www.npmjs.com/package/use-chromatone) robust and usable by many new music students, explorers and performers.
AMA!
Although in the case of chromatone, I don't see any arguments made about technical improvements. Instead of spelling note names with letters, we have colors. Why is this better? This some argument about the visible spectrum mapping. But like, how is that useful? I can tell a group of working musicians "1-4-2-5 in E minor", and we'd probably be able to play something moderately coherent based on that. How do I do that in Chromatone? What's the advantage?
Most people (aside from those with perfect pitch) experience pitch relatively. Things like intervals or scale degree given a tonic. Maybe there's something interesting one could do mapping colors to something in this domain, a la solfege, like a minor 9 chord becomes green or something. I'm still not totally sure what the point would be. Maybe you could read a chart quicker.
But like, what's the problem in traditional notation/theory that we're trying to solve here?
just play with it
aside from that, I make a library of structures used in Western music (in the header). I've started saving structures a week ago, so there isn't much content right now
the main emergent property of my system is visibility of structures. chords, chord progressions, parallel / relative modulation symmetries suddenly make sense and are viscerally perceivable
and I hope my visualizations are directly useful in a context of speaking about music theory to people without sheet music experience (or, dare I say, without 10 years of such experience)
my thing is open source: https://github.com/vpavlenko/rawl
i ranted about it here: https://x.com/vitalypavlenko/status/1771820942680830417
Can you expand on this? I’m a hobbyist that’s learned how to sight read, and one of the coolest things was when I stopped seeing individual notes and began to see structure, as in chords and progressions. I’m not sure how sheet music would obscure the structure because that’s all I see in it now.
Basically, you can somewhat see chords in sheet music. Like, you can easily see a C major chord in a treble clef.
1) How many milliseconds does it take you to understand that the entire bar you're looking at is just a C major chord arpeggiated in different octaves?
2) What if it's a bass + treble clef? What if it's an orchestral score?
3) How fast can you verify that a treble clef is active now? That it's not a C-sharp major or a C major chord?
4) Do you actually care that it's a C major chord or rather should you care that it's a I chord (a tonic major chord)?
5) If you care about relative chords (Roman numerals), does it mean you should learn 7 to 12 times visual cues of what's going on now?
These are just the beginning questions, where the end questions that I care about are:
101) What are the backbone structures making a list of midi pitches played suddenly a tango? A ragtime? A malaguena? A Bulgarian horo?
102) What are differences between styles (languages) of specific composers? How do I rapidly see what's different between Nobuo Uematsu and Koji Kondo? Between Chopin and Schumann? Between (tonal) Copland and (tonal) Debussy?
103) How do I imitate any of those or any fusion of those? How do I make sure that I don't miss any structural feature when I analyze and decompose their style and their pieces?
Literature: https://github.com/vpavlenko/study-music
Music has a lot of the same steps and it just takes time to get to the different stages of comprehension. At the stage I’m at now, it’s fairly easy to look at sheet music and determine if it’s ragtime or swing or jazz. I’m sure I’ll be able to pick up more nuance as time goes on too.
But, I think it’s cool that you’re exploring different approaches! I don’t want to take away from that, I just wanted to put out a challenge to the presumptions your making that classic notation is insufficient in some of these areas :)
C is yellow, C#/Db is red, D is blue, D#/Eb is yellow,...etc
First observation: the notes of each of the three diminished tetrads are monochromatic (their notes all have the same color.)
Then, look at the major minor triads and assign them secondary colors (purple, orange, green) depending upon the colors of their constituent notes.
So, for example the C major and C minor triads are both orange chords. F major and F minor triads are green chords. E minor and E major triads are green chords, etc.
This is a scheme that Tom Glazebrook calls "metaharmony", and he uses it in the context of studying the Barry Harris approach to Jazz, but it's actually isomorphic to Erno Lendvai's "Axis Theory" analysis of the music of Bela Bartok. (The secondary colors correspond to the T, D, and S functions.)
Here's a video someone made to describe the idea better than I have:
https://www.youtube.com/watch?v=qjR13Jz7YYw
Here's a screenshot of a Tonnetz I drew in SwiftUI using this color scheme:
https://imgur.com/a/metaharmony-tonnetz-c-major-6th-diminish...
I ultimately made peace with this because the greater goal is to break you out of the key prison so you can learn to move anywhere. In this light, it makes sense to assign the colors to the pitch class.
I'm not really buying that we can interpret degrees of hue differences to identify which ones are consonant/dissonant when the base/reference color is changing. I would certainly expect our hue perception and usage to be absolute and not relative--vs pitch perception being mostly relative.
I can't say how a certain green is 'higher' than a red by the same amount a certain blue is higher than a green. It's requiring us to develop the same intuitions we already have for pitch for hues--creating a problem rather than solving one (if I'm understanding this correctly).
That's definitely not the aim here. There's nothing here related to consonance/dissonance, and there are no variations in hues. There's just one red, one yellow, one blue, one orange, one purple, and a single green: six fixed colors altogether.
So a major/minor triad that has one yellow note and two red notes is the same shade of orange as one that has two yellow notes and one red note.
The utility and beauty of the colors is that the 3 primary colors — and their equal-parts mixing forms secondary colors — makes an astonishing metaphor for how individual notes mix to create base triads that have one of 3 musical functions, which correspond to the secondary colors.
Then, in addition to that, the color of extension notes (which will again be primary colors) seem to make that chord "want to resolve" to chords where the base triad is the complement of that extension note's color.
One can try to take the metaphor too far, but just this much is compels me.
There are other interesting details, though, like all augmented triads and sus2 or sus4 triads are tri-color, which seems to align well with their functional ambiguities.
If you look at the screenshot of the Tonnetz I linked to elsewhere in the thread, it seems that what we feel when we sense that we have moved from one chord-function to another (in some chord progression) actually comes from moving from one of the diagonal secondary-color "lanes" in the tonnetz to another.
It also makes me wonder how much cognitive dissonance this may cause for those with synaethesia who already have their own thing going on.
The 60hz refresh visual input was 'expected' by my brain to be there in order to coordinate my body with correct timing, intonation etc. i.e. it seemed to be mixed in with my so called 'muscle memory'.
One other thing that was most noticeable is the gamification noises (e.g. the noise you get for reaching the 25x multiplier) became part of my mental model, and when I recognised this and turned them off in the options, my inability to play that part of song nearly as well became extremely evident, although persisting with the option set to off allowed me to overcome it.
If you want to analyze it algorithmically, you probably need to start looking at topology or something so that you can correctly relate musical structures in a way that is resistant to transposition.
Here's some alternative keyboard layouts that explore that idea:
It’s worth mentioning that this includes the majority of musicians (professional and otherwise). Having perfect pitch is in no way necessary to be an excellent player or composer of music. Most of the greats didn’t have it. It is a very rare skill.
Among professional musicians who have perfect pitch, it's considered more of a curse than a blessing.
> Intrigued, I played him a Cmaj7 chord and asked him to identify that. He shook his head in despair, and gave up almost immediately.
> "Can't you just home in on each note in turn and identify the separate colours?" I suggested. "Then you could look at your list of notes and figure out what the chord is."
> "No, you don't understand," he replied. "All chords sound brown to me!"
- Guthrie Govan, from Creative Guitar 1 (which, incidentally, I had to dig out to find the quote)
I imagine that Guthrie's student might have been able to combine his pitch training with some ear training and have a better shot of hearing something other than mud when he heard a chord, but this always stuck in my brain and I'm reminded of it every time I see discussions of perfect pitch. It seems like perfect pitch is barely even desirable, in this framing.
And that makes sense, as discussed elsewhere in the thread, what you really want as a musician is a great sense of relative pitch, and a good mind-body connection between the fingers and ears that lets you easily turn what you're hearing in your mind - where your ear wants to go - into actual music.
I see a bunch of pretty deep-dive articles, a long video, a lot of tools, but I can't see a description of how the supposed visual language works yet, or even examples. How does this system represent notes and chords over time?
One common trap(?) they fell into is allocating hues by frequency, where humans are far more sensitive in distinguishing hues between red and green. So many of the blue/greens look pretty much the same. It may have been intentional because those higher intervals matter less but wasn't clear.
There's a bunch of web apps in the "Practice" section of the site:
https://chromatone.center/practice/
Here's a simple app that works on mobile (android/chrome anyway): https://see.chromatone.center/
And also here's where I found a lot of additional web apps. I'll look through them more when I'm at my PC. But just thought I'd post these here for anyone who clicked on the hn link but was underwhelmed or confused by the landing page: https://chromatone.center/practice/
There’s a short segment dedicated to it at 1h5m https://youtu.be/Eq3bUFgEcb4
Our sight system is a camera, capturing a 2-D image of the world. Color is picked up by 3ish sensors that have broadband frequency responses, meaning that a huge amount of information on the actual spectral content of the light is discarded. Countless spectral combinations get flattened into individual color values.
Our sound system approximates a Fourier-like decomposition of sound into frequency bins at points in time. It preserves much more spectral fidelity, but very little spatial fidelity.
What I do appreciate is the engineering design in these interactives. The circular metronome in the rhythm apps is very cool, might be good for generating musical ideas once I get past the semi-opaque UX.
Hang drums might interest you: https://en.wikipedia.org/wiki/Hang_(instrument)
If yes, this page helps me enormously when I want to start writing a new song: https://legacy.wmich.edu/mus-theo/courses/keys.html
I’m not sure how scientifically valid this is, but when playing these notes, I agree with their designated emotion. Though, that might just be my western brain vibing with the western brain of the author.
In any case, when I feel sad, and I press the F minor, I agree.
But - I do want to say that C == green is not arbitrary at all. It is consistent with my calculations, which are consistent with Newton's calculations. Usually I see the colours being assigned to notes as wrong.. but this C == green is consistent with mapping light, using octave equivalence, given by the following:
f_prime = f * 2 ** (i / 12)
# Where,
# f' is the derived f, (in this case Green {5.66 × 10^14 Hz})
# f is the reference f (in this case 261.63 Hz)
# i is the interval in semitones
Let's say that C == 261.63 Hz, and that Green == 5.66 × 10^14 Hz. Using the preceding formula we can make a small (python) program to check whether C == Green. light_range_min = 400 * 10 ** 9 # Hz
light_range_max = 790 * 10 ** 9 # Hz
C = 261.63 # Hz
octave = 0
for octave in range(100): # we are just using a high number here
f_prime = C * 2 ** (12 * octave / 12)
if f_prime >= light_range_min:
octave = octave
break
print(f"C in the range of light has f == {f_prime}, which is {f_prime / 10 ** 9} THz. We had to go {octave} octaves up to arrive there")
# outputs: C in the range of light has f == 561846146826.24, which is 561.84614682624 THz. We had to go 31 octaves up to arrive there
We can look up colour charts like [0] or [1] and find that this frequency is in fact associated with the colour green.The rest of your commentary seems valid.
https://hackaday.com/2022/04/26/pianolizer-helps-your-musica...
chromatone.center wants to control and reprogramme your MIDI devices. [Allow/Block]
off-topic: is "reprogramme" a british spelling - dont remember seeing this spelling in a long time.
Using “reprogramme” in a computation context is very old-fashioned and would be considered nonstandard spelling these days. I suspect this is someone taking BrE localisation too seriously or it’s a non-British person’s idea of what British English is.
I just went ahead and allowed it.
Current best practice is not to ask permissions like that (location, notifications, or programming midi devices) on landing, but to stick them behind an interaction like a toggle or button press.