davay

Oh, that's so cool! I might include your code as one of the experiments there too!

I guess this is it https://chromatone.center/practice/chroma/touch/

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!

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

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 )

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

Exactly! It's all made visual and interactive here 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

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.

Check out this page 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.