Chromatone – Visual Music Language

Hello, Hackers! It's me, Denis, author and developer of Chromatone. Thanks everyone for your views, opinions and very interesting links to other similar projects to learn from. I will try to implement all the insights got here in the upcoming 3.0 version of the web-site.

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!

This seems kind of like inventing a QWERTY alternative. The best thing about QWERTY is that its ubiquitous and good enough, not that it's optimal.

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?

The most compelling use of color in music theory that I've encountered is a color scheme where individual notes are given primary colors (yellow, red, blue) like this:

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.)

Someone sure did put a lot of work into this. I can appreciate that. That said, as a musician, I’d prefer if someone just told me the key and progression, or just started playing and I could jump in. I’m not that good with colors.

This really doesn't reflect the actual structure of Western music for those without absolute pitch (the vast majority of people). Instead, it's pretty much just relations that matter between pitches which makes things way more difficult to visualize. Mixing red and blue gives you a different color than red and green, but A-C is pretty much the same as Bb-Db, they're both minor thirds.

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.

Is there an easy-to-digest overview or even examples anywhere?

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?

For those lost from the landing page here's a visualization that worked for me on mobile (chrome/android) https://see.chromatone.center/

There's a bunch of web apps in the "Practice" section of the site:

https://chromatone.center/practice/

https://chromatone.center/practice/experiments/

https://chromatone.center/practice/sound/

The landing page doesn't seem very exciting (on mobile at least) but the "practice" area of the site contains quite a few web apps to demonstrate the concepts. I think the basic idea is that western music uses 12 tones, and chromatone gives each of those tones a color, and uses those 12 color/tone pairs as a basis for teaching music theory in a visual way.

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/

https://chromatone.center/practice/experiments/

https://chromatone.center/practice/sound/

There’s some previous work from the 1800s and earlier that feels relevant, especially Farbige Noten, which mapped notes to colors as a novel notation method.

There’s a short segment dedicated to it at 1h5m https://youtu.be/Eq3bUFgEcb4

I built a color to notes tool five years ago and even tried to get a patent on the algorithm. Be warned, there are already multiple patents on this approach and the ability to monetize this project will be limited. I know because I just went through the process myself. In a related topic, ByteDance (TikTok) has a massive portfolio of Chinese patents that are direct ripoffs of lots of foreign IP.

https://github.com/lucidbeaming/vid2midi

The big question underlying this kind of analogy: are the spectra of visible things (EM) and the spectra of mechanically vibrating things similar? Naively, I'd say no, so this is yet another fun but ultimately arbitrary mapping which people endlessly invent to make music. Is it deeper than I think at first glance?

I'm not a huge fan of the color/pitch relationship they seem to be trying to establish.

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.

Reminds me of the method used for sonifying periodic table elements here[0], but in reverse.

[0]: https://youtu.be/Z9dpHWrgzMw

I was expecting some sort of programming language to describe music, but this isn't that. I'm not sure what it is exactly though. Navigating the website on mobile doesn't give me a clue

Are there any musical instruments with the notes arranged in a circle like that? Notes are in a repeating cycle after all. Different octaves could be further in/out layers.

What I've been obsessing about is a way to get the "feeling" of a particular piece of music.. is there a field dedicated to this study?

Love all the features of this app, the chromatone part is just an element but the theory and scales stuff is nice.

I liked it, but... is there a way to script it? Clicking on notes gets old fast.

Half expected the landing page to be written in Solresol.

It wouldn't be bad if it had some colour blindness mode.

_

What is it? The web site doesn't work (FF, Windows & macOS). If they really propose replacing pitch by color, how are they going to get people to tell minute differences apart? How are they going to display chords, or polyphony? Octaves? And as if written notation doesn't exclude enough people, they're now also excluding color-blind people, some 5% of the male population where I live.

Coincidentally, I used almost the exact same palette for my own project that overlays a spectrogram on a piano keyboard

https://hackaday.com/2022/04/26/pianolizer-helps-your-musica...

browser shows this permission popup:

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.