17 ms·

Chromatone – Visual Music Language

246 points by samdung 2y ago

deleted 2y ago
[deleted]
thenoblesunfish 2y ago
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?
- acjohnson55 2y ago
  Physically, they're pretty analogous. But perceptually, sound and sight are very different. We're much less interested in abstract visual arrangements and there's no visual analog of harmony.
  - acjohnson55 2y ago
    Maybe I'll add that our "detectors" for sight and sound operate on different principles. 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.
- davay 2y ago
  Check out this page https://chromatone.center/theory/interplay/spectrum/ https://chromatone.center/theory/interplay/spectrum/ - there's this exact question answered with diagrams and an interactive tool down in the bottom of the page. It shows that just by going up in octaves you get to THz territory on the 44th octave step and the frequency of note A44 matches red color. And other notes fall on the spectrum quite spectacularly.
- creaktive 2y ago
  I get it why this analogy is so tempting. If we consider the visible wavelengths being from 380nm to 780nm, that’s almost precisely one octave. If we could see the “ultraviolet octave”, and/or the “infrared octave”, would it resemble a rainbow? Would be neat if it did. When I was a kid, I wondered if violet and red were actually the same color, somehow. To me personally it feels like red and violet have much more in common than blue and green, for instance.
slaymaker1907 2y ago
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.
- itishappy 2y ago
  > 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: https://en.wikipedia.org/wiki/Jank%C3%B3_keyboard https://en.wikipedia.org/wiki/Jank%C3%B3_keyboard https://www.lumatone.io/ https://www.lumatone.io/
- pimlottc 2y ago
  > This really doesn't reflect the actual structure of Western music for those without absolute pitch (the vast majority of people). 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.
  - recursive 2y ago
    It's very rare, and also not very correlated with musical skill. Some people just have it, seemingly inherently, even without any formal musical training.
  - sssilver 2y ago
    I wouldn’t even call it a “skill”, but perhaps a “trait”
  - rerdavies 2y ago
gcr 2y ago
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 https://youtu.be/Eq3bUFgEcb4
svennidal 2y ago
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.
- davay 2y ago
  Chromatone is useful on the way there while you're still learning those keys and scales. Just open that panel with a note name on the left, choose click the tonic note and choose a scale and you will immediately see the notes to play on your keyboard and guitar/ukulele without any need to memorize or calculate the interval steps. Then you memorize them and don't need the colors any more. But they help you get there much faster and with less pressure on memory and long hours of practice.
  - partomniscient 2y ago
    From personal experience, I think having to unlearn the trigger(s) - in this case a specific colour creates more difficulty than its worth. You're intentionally coupling then de-coupling neuronal networks, and the de-coupling is harder than the coupling. It also makes me wonder how much cognitive dissonance this may cause for those with synaethesia who already have their own thing going on.
    - aaarrm 2y ago
      I'm super curious about this project because I am currently trying to deeply learn music, but it is very difficult to get to a meaningful point of really "understanding" music and theory if you only have the time of a modern adult to commit to it. However I largely agree with you about this unfortunately. Do you think this person's project, where they use colors for relative notation is better? https://news.ycombinator.com/item?id=41442831 https://news.ycombinator.com/item?id=41442831
      - partomniscient 2y ago
        I couldn't say. I only know that my personal experience of using Rocksmith to learn guitar meant I couldn't bust out a song perfectly without looking at the screen, even if I could get 100% in expert (no visible notation) mode for some songs. 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.
deleted 2y ago
[deleted]
sporkl 2y ago
Reminds me of the method used for sonifying periodic table elements here[0], but in reverse. [0]: https://youtu.be/Z9dpHWrgzMw https://youtu.be/Z9dpHWrgzMw
webprofusion 2y ago
Love all the features of this app, the chromatone part is just an element but the theory and scales stuff is nice.
HPsquared 2y ago
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.
- defrost 2y ago
  Steel drums are tuned to have notes in a circle - the patterns used can vary, sometimes it's a linear Transmission https://www.youtube.com/watch?v=7Mm6ycEz2A8 https://www.youtube.com/watch?v=7Mm6ycEz2A8 Hang drums might interest you: https://en.wikipedia.org/wiki/Hang_(instrument) https://en.wikipedia.org/wiki/Hang_(instrument) https://www.youtube.com/watch?v=xk3BvNLeNgw https://www.youtube.com/watch?v=xk3BvNLeNgw
  - 082349872349872 2y ago
    Yes, and how many times must Navy pannists sound, before they're forever banned? https://www.youtube.com/watch?v=POrxmmoR24s https://www.youtube.com/watch?v=POrxmmoR24s
    - defrost 2y ago
      Until they're banned, when the wind blows¹, run² ¹ https://www.youtube.com/watch?v=Muw7H5o14Ek https://www.youtube.com/watch?v=Muw7H5o14Ek ² https://www.youtube.com/watch?v=o5zb0WTSLsY https://www.youtube.com/watch?v=o5zb0WTSLsY
      - 082349872349872 2y ago
        I enjoyed ᑖᓐᓂᐊ ᑕᒑᖅ's Maiden cover, but continued on to polka: https://www.youtube.com/watch?v=ui1bCBCLZZM https://www.youtube.com/watch?v=ui1bCBCLZZM
- davay 2y ago
  I guess this is it https://chromatone.center/practice/chroma/touch/ https://chromatone.center/practice/chroma/touch/
davay 2y ago
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/ https://chromatone.center/practice/rhythm/circle/ Very powerful polyrhythmic metronome https://chromatone.center/practice/pitch/spectrogram/ 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/ 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/ 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/ 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/ https://chromatone.center/practice/midi/monitor/ Shows all MIDI signals received in a handy table view https://chromatone.center/practice/synth/elementary/ 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/ https://chromatone.center/practice/generative/bounce/ Generative melodies with shifted period sine waves. https://chromatone.center/practice/jam/random/ 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 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 https://www.npmjs.com/package/use-chromatone) robust and usable by many new music students, explorers and performers. AMA!
ogou 2y ago
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 https://github.com/lucidbeaming/vid2midi
creaktive 2y ago
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-musical-projects-distinguish-notes/ https://hackaday.com/2022/04/26/pianolizer-helps-your-musica...
- deleted 2y ago
  [deleted]
- davay 2y ago
  Oh, that's so cool! I might include your code as one of the experiments there too!
pachico 2y ago
It wouldn't be bad if it had some colour blindness mode.
- davay 2y ago
  Actually the colors there are adjustable! You can click the cog icon in the circle of notes on the main page and change colors of each note individually - it will affect colors in most places all over the web-site. You can even make it black and white back again )
- aaroninsf 2y ago
  Bonus if it's called "achromatone"
- deleted 2y ago
  [deleted]
empressplay 2y ago
[flagged]
- deleted 2y ago
  [deleted]
ctenb 2y ago
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
spankalee 2y ago
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?
- karmakaze 2y ago
  Yeah, I kept skipping sections of the video over all the theory of hearing parts and found that the "most popular visualization" discussion/demo starts at 27:40 and just before at 24:22 shows the hue coloring by distance from/to root note on x-axis (and dissonance shown on y-axis but unclear how that's utilized). 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.
- jb1991 2y ago
  [flagged]
  - abletonlive 2y ago
    [flagged]
- cainxinth 2y ago
  [flagged]
  - deleted 2y ago
    [deleted]
- pvg 2y ago
  The github repo explains the site a little, it seems https://github.com/chromatone/chromatone.center https://github.com/chromatone/chromatone.center
- deleted 2y ago
albert_e 2y ago
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.
- deleted 2y ago
  [deleted]
- zarzavat 2y ago
  In contemporary British English “program” is used for the computation-related senses. “Programme” is used for all the other senses, e.g. a concert programme. 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.
- rendall 2y ago
  I got that too, but had never seen that permission before. 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.
  - eldog_ 2y ago
    Recently chrome started asking for permission to use MIDI, when before it did not. So lots of existing sites won't tell you that they will request MIDI, which is what most sites that request the webcam do for good UX.
    - sva_ 2y ago
      I suppose it could be used to fingerprint a user.
pohl 2y ago
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.)
- karmakaze 2y ago
  I think they're color-coding with the root note (or key?) being red which makes more sense than coloring the note names. Similar to how hearing perfect pitch can be a bit of an annoyance (with unnecessary detail) than useful.
  - pohl 2y ago
    No, they're definitely assigning the colors to the pitch class. It's not relative to the tonic of the key. I remember that being a stumbling block for me, because I like things that are independent of key. But, no, a C major triad is most certainly orange because C is yellow, and E and G are both red. 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.
    - karmakaze 2y ago
      Thanks for the clarification. So I suppose this is a different way than key + II/ii/etc notation where one would think of implicit key as a color and be aware of consonant/dissonant colors which are certain distances/hues from that color. 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).
tgv 2y ago
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.
- deleted 2y ago
  [deleted]
- a2128 2y ago
  Website is unusable for me on Firefox as well. Nothing is clickable and "This page is slowing down Firefox. To speed up your browser, stop this page". If I block 3rd party scripts and frames in uBlock then it works better
  - davay 2y ago
    Yeah, it happens some times when you refresh the page before the wasm audio engine is loaded - then you just need to close the window and wait for 10-15 seconds before the background processes finish and the web-site should open just fine
dberst 2y ago
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/ 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/ https://chromatone.center/practice/experiments/ https://chromatone.center/practice/experiments/ https://chromatone.center/practice/sound/ https://chromatone.center/practice/sound/
dberst 2y ago
For those lost from the landing page here's a visualization that worked for me on mobile (chrome/android) https://see.chromatone.center/ 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/ https://chromatone.center/practice/experiments/ https://chromatone.center/practice/experiments/ https://chromatone.center/practice/sound/ https://chromatone.center/practice/sound/
- jeffhuys 2y ago
  Page seems to work fine on mobile for me (Orion browser)
adamc 2y ago
I liked it, but... is there a way to script it? Clicking on notes gets old fast.
- davay 2y ago
  I have this lib with most of the functions of the web-site, so you can script everything you want https://www.npmjs.com/package/use-chromatone https://www.npmjs.com/package/use-chromatone
entaloneralie 2y ago
Half expected the landing page to be written in Solresol.
brcmthrowaway 2y ago
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?
- deleted 2y ago
  [deleted]
- jeffhuys 2y ago
  You mean emotion? 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 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.
  - brcmthrowaway 2y ago
    What is the key of electronic music?
- andoando 2y ago
  Can you explain what you mean?
- recursive 2y ago
  I think that's just music composition. Or maybe arrangement.
jdietrich 2y ago
_
- keymasta 2y ago
  I really like the link you provided and have watched it before! 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. [0] https://en.wikipedia.org/wiki/Visible_spectrum https://en.wikipedia.org/wiki/Visible_spectrum [1] https://sciencestruck.com/color-spectrum-chart https://sciencestruck.com/color-spectrum-chart
  - acjohnson55 2y ago
    Perceptually, the C pitch class and the color green have nothing to do with each other.
  - davay 2y ago
    Exactly! It's all made visual and interactive here https://chromatone.center/theory/interplay/spectrum/ https://chromatone.center/theory/interplay/spectrum/ - you can even slide the tuning of A4 by dragging left-to-right the last graph - it will show the distribution on 44th octave notes along the visual spectrum
vermarish 2y ago
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.
recursive 2y ago
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?
- 867-5309 2y ago
  it is a cool toy just play with it
  - recursive 2y ago
    I'd rather just play a real instrument. Also, the author seems to believe that this is a Big Idea, not just a cool toy.
- vitaly-pavlenko 2y ago
  that's a great point. i'm making my alternative https://rawl.rocks/ https://rawl.rocks/ which does exactly that: a relative color-coding, starting from the tonic 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 https://github.com/vpavlenko/rawl

246 points by samdung 2y ago

deleted 2y ago

[deleted]

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?

acjohnson55 2y ago
Physically, they're pretty analogous. But perceptually, sound and sight are very different. We're much less interested in abstract visual arrangements and there's no visual analog of harmony.
- acjohnson55 2y ago
  Maybe I'll add that our "detectors" for sight and sound operate on different principles. 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.
davay 2y ago
Check out this page https://chromatone.center/theory/interplay/spectrum/ https://chromatone.center/theory/interplay/spectrum/ - there's this exact question answered with diagrams and an interactive tool down in the bottom of the page. It shows that just by going up in octaves you get to THz territory on the 44th octave step and the frequency of note A44 matches red color. And other notes fall on the spectrum quite spectacularly.
creaktive 2y ago
I get it why this analogy is so tempting. If we consider the visible wavelengths being from 380nm to 780nm, that’s almost precisely one octave. If we could see the “ultraviolet octave”, and/or the “infrared octave”, would it resemble a rainbow? Would be neat if it did. When I was a kid, I wondered if violet and red were actually the same color, somehow. To me personally it feels like red and violet have much more in common than blue and green, for instance.

slaymaker1907 2y ago

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.

itishappy 2y ago
> 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: https://en.wikipedia.org/wiki/Jank%C3%B3_keyboard https://en.wikipedia.org/wiki/Jank%C3%B3_keyboard https://www.lumatone.io/ https://www.lumatone.io/
pimlottc 2y ago
> This really doesn't reflect the actual structure of Western music for those without absolute pitch (the vast majority of people). 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.
- recursive 2y ago
  It's very rare, and also not very correlated with musical skill. Some people just have it, seemingly inherently, even without any formal musical training.
- sssilver 2y ago
  I wouldn’t even call it a “skill”, but perhaps a “trait”
- rerdavies 2y ago

gcr 2y ago

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 https://youtu.be/Eq3bUFgEcb4

svennidal 2y ago

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.

davay 2y ago
Chromatone is useful on the way there while you're still learning those keys and scales. Just open that panel with a note name on the left, choose click the tonic note and choose a scale and you will immediately see the notes to play on your keyboard and guitar/ukulele without any need to memorize or calculate the interval steps. Then you memorize them and don't need the colors any more. But they help you get there much faster and with less pressure on memory and long hours of practice.
- partomniscient 2y ago
  From personal experience, I think having to unlearn the trigger(s) - in this case a specific colour creates more difficulty than its worth. You're intentionally coupling then de-coupling neuronal networks, and the de-coupling is harder than the coupling. It also makes me wonder how much cognitive dissonance this may cause for those with synaethesia who already have their own thing going on.
  - aaarrm 2y ago
    I'm super curious about this project because I am currently trying to deeply learn music, but it is very difficult to get to a meaningful point of really "understanding" music and theory if you only have the time of a modern adult to commit to it. However I largely agree with you about this unfortunately. Do you think this person's project, where they use colors for relative notation is better? https://news.ycombinator.com/item?id=41442831 https://news.ycombinator.com/item?id=41442831
    - partomniscient 2y ago
      I couldn't say. I only know that my personal experience of using Rocksmith to learn guitar meant I couldn't bust out a song perfectly without looking at the screen, even if I could get 100% in expert (no visible notation) mode for some songs. 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.

deleted 2y ago

[deleted]

sporkl 2y ago

Reminds me of the method used for sonifying periodic table elements here[0], but in reverse. [0]: https://youtu.be/Z9dpHWrgzMw https://youtu.be/Z9dpHWrgzMw

webprofusion 2y ago

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

HPsquared 2y ago

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.

defrost 2y ago
Steel drums are tuned to have notes in a circle - the patterns used can vary, sometimes it's a linear Transmission https://www.youtube.com/watch?v=7Mm6ycEz2A8 https://www.youtube.com/watch?v=7Mm6ycEz2A8 Hang drums might interest you: https://en.wikipedia.org/wiki/Hang_(instrument) https://en.wikipedia.org/wiki/Hang_(instrument) https://www.youtube.com/watch?v=xk3BvNLeNgw https://www.youtube.com/watch?v=xk3BvNLeNgw
- 082349872349872 2y ago
  Yes, and how many times must Navy pannists sound, before they're forever banned? https://www.youtube.com/watch?v=POrxmmoR24s https://www.youtube.com/watch?v=POrxmmoR24s
  - defrost 2y ago
    Until they're banned, when the wind blows¹, run² ¹ https://www.youtube.com/watch?v=Muw7H5o14Ek https://www.youtube.com/watch?v=Muw7H5o14Ek ² https://www.youtube.com/watch?v=o5zb0WTSLsY https://www.youtube.com/watch?v=o5zb0WTSLsY
    - 082349872349872 2y ago
      I enjoyed ᑖᓐᓂᐊ ᑕᒑᖅ's Maiden cover, but continued on to polka: https://www.youtube.com/watch?v=ui1bCBCLZZM https://www.youtube.com/watch?v=ui1bCBCLZZM
davay 2y ago
I guess this is it https://chromatone.center/practice/chroma/touch/ https://chromatone.center/practice/chroma/touch/

davay 2y ago

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/ https://chromatone.center/practice/rhythm/circle/ Very powerful polyrhythmic metronome https://chromatone.center/practice/pitch/spectrogram/ 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/ 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/ 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/ 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/ https://chromatone.center/practice/midi/monitor/ Shows all MIDI signals received in a handy table view https://chromatone.center/practice/synth/elementary/ 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/ https://chromatone.center/practice/generative/bounce/ Generative melodies with shifted period sine waves. https://chromatone.center/practice/jam/random/ 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 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 https://www.npmjs.com/package/use-chromatone) robust and usable by many new music students, explorers and performers. AMA!

ogou 2y ago

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 https://github.com/lucidbeaming/vid2midi

creaktive 2y ago

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-musical-projects-distinguish-notes/ https://hackaday.com/2022/04/26/pianolizer-helps-your-musica...

deleted 2y ago
[deleted]
davay 2y ago
Oh, that's so cool! I might include your code as one of the experiments there too!

pachico 2y ago

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

davay 2y ago
Actually the colors there are adjustable! You can click the cog icon in the circle of notes on the main page and change colors of each note individually - it will affect colors in most places all over the web-site. You can even make it black and white back again )
aaroninsf 2y ago
Bonus if it's called "achromatone"
deleted 2y ago
[deleted]

empressplay 2y ago

[flagged]

deleted 2y ago
[deleted]

ctenb 2y ago

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

spankalee 2y ago

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?

karmakaze 2y ago
Yeah, I kept skipping sections of the video over all the theory of hearing parts and found that the "most popular visualization" discussion/demo starts at 27:40 and just before at 24:22 shows the hue coloring by distance from/to root note on x-axis (and dissonance shown on y-axis but unclear how that's utilized). 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.
jb1991 2y ago
[flagged]
- abletonlive 2y ago
  [flagged]
cainxinth 2y ago
[flagged]
- deleted 2y ago
  [deleted]
pvg 2y ago
The github repo explains the site a little, it seems https://github.com/chromatone/chromatone.center https://github.com/chromatone/chromatone.center
deleted 2y ago

albert_e 2y ago

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.

deleted 2y ago
[deleted]
zarzavat 2y ago
In contemporary British English “program” is used for the computation-related senses. “Programme” is used for all the other senses, e.g. a concert programme. 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.
rendall 2y ago
I got that too, but had never seen that permission before. 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.
- eldog_ 2y ago
  Recently chrome started asking for permission to use MIDI, when before it did not. So lots of existing sites won't tell you that they will request MIDI, which is what most sites that request the webcam do for good UX.
  - sva_ 2y ago
    I suppose it could be used to fingerprint a user.

pohl 2y ago

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

karmakaze 2y ago
I think they're color-coding with the root note (or key?) being red which makes more sense than coloring the note names. Similar to how hearing perfect pitch can be a bit of an annoyance (with unnecessary detail) than useful.
- pohl 2y ago
  No, they're definitely assigning the colors to the pitch class. It's not relative to the tonic of the key. I remember that being a stumbling block for me, because I like things that are independent of key. But, no, a C major triad is most certainly orange because C is yellow, and E and G are both red. 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.
  - karmakaze 2y ago
    Thanks for the clarification. So I suppose this is a different way than key + II/ii/etc notation where one would think of implicit key as a color and be aware of consonant/dissonant colors which are certain distances/hues from that color. 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).

tgv 2y ago

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.

deleted 2y ago
[deleted]
a2128 2y ago
Website is unusable for me on Firefox as well. Nothing is clickable and "This page is slowing down Firefox. To speed up your browser, stop this page". If I block 3rd party scripts and frames in uBlock then it works better
- davay 2y ago
  Yeah, it happens some times when you refresh the page before the wasm audio engine is loaded - then you just need to close the window and wait for 10-15 seconds before the background processes finish and the web-site should open just fine

dberst 2y ago

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/ 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/ https://chromatone.center/practice/experiments/ https://chromatone.center/practice/experiments/ https://chromatone.center/practice/sound/ https://chromatone.center/practice/sound/

dberst 2y ago

For those lost from the landing page here's a visualization that worked for me on mobile (chrome/android) https://see.chromatone.center/ 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/ https://chromatone.center/practice/experiments/ https://chromatone.center/practice/experiments/ https://chromatone.center/practice/sound/ https://chromatone.center/practice/sound/

jeffhuys 2y ago
Page seems to work fine on mobile for me (Orion browser)

adamc 2y ago

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

davay 2y ago
I have this lib with most of the functions of the web-site, so you can script everything you want https://www.npmjs.com/package/use-chromatone https://www.npmjs.com/package/use-chromatone

entaloneralie 2y ago

Half expected the landing page to be written in Solresol.

brcmthrowaway 2y ago

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?

deleted 2y ago
[deleted]
jeffhuys 2y ago
You mean emotion? 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 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.
- brcmthrowaway 2y ago
  What is the key of electronic music?
andoando 2y ago
Can you explain what you mean?
recursive 2y ago
I think that's just music composition. Or maybe arrangement.

jdietrich 2y ago

keymasta 2y ago
I really like the link you provided and have watched it before! 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. [0] https://en.wikipedia.org/wiki/Visible_spectrum https://en.wikipedia.org/wiki/Visible_spectrum [1] https://sciencestruck.com/color-spectrum-chart https://sciencestruck.com/color-spectrum-chart
- acjohnson55 2y ago
  Perceptually, the C pitch class and the color green have nothing to do with each other.
- davay 2y ago
  Exactly! It's all made visual and interactive here https://chromatone.center/theory/interplay/spectrum/ https://chromatone.center/theory/interplay/spectrum/ - you can even slide the tuning of A4 by dragging left-to-right the last graph - it will show the distribution on 44th octave notes along the visual spectrum

vermarish 2y ago

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.

recursive 2y ago

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?

867-5309 2y ago
it is a cool toy just play with it
- recursive 2y ago
  I'd rather just play a real instrument. Also, the author seems to believe that this is a Big Idea, not just a cool toy.
vitaly-pavlenko 2y ago
that's a great point. i'm making my alternative https://rawl.rocks/ https://rawl.rocks/ which does exactly that: a relative color-coding, starting from the tonic 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 https://github.com/vpavlenko/rawl