Show HN: Harmopark – Web tool to visually build chords and progressions(harmopark.app)
harmopark.app
Show HN: Harmopark – Web tool to visually build chords and progressions
https://www.harmopark.app/
36 comments
This is really neat. I would however watch a screencast or two where you use it, to get a better idea of what to do
Btw on a iPhone se the hexagons are a little hard to hit. I’m not sure what you can do about it.. I’m gonna open it up in a tablet I guess.
Btw on a iPhone se the hexagons are a little hard to hit. I’m not sure what you can do about it.. I’m gonna open it up in a tablet I guess.
Thank you! I might prepare some screencast demos, it's a good idea. I did a short screencast video a couple of days ago to show a new feature in a forum: https://www.youtube.com/watch?v=SAbLCSoBGMU. It's got no narration and gets straight to the point, though.
The tool can be hard to use in small devices. Were the keys easier to hit using landscape orientation?
yeah, unless you add a mode to collapse the notes out of the scale to gain a bit of space... but even then, that might be a lot of work for (still) little gain (and it kinda kills the table)
EDIT: just realized that in some scales you would gain nothing
EDIT: just realized that in some scales you would gain nothing
this is truly really cool! are there any resources you'd recommend to learn more about this area of music theory?
Thank you!
I used Wikipedia quite a lot when researching on the harmonic table format, chord naming and symbols, scales and modes, Roman numeral analysis, and similar stuff. I found myself frequently visiting threads in https://www.reddit.com/r/musictheory/ and https://music.stackexchange.com/.
And of course there are great Youtube channels about music theory (I linked some of them in the Credits page of the website).
Most of the time I just search in Google and jump from blogs to forums to dedicated websites until I find what I'm loooking for.
I used Wikipedia quite a lot when researching on the harmonic table format, chord naming and symbols, scales and modes, Roman numeral analysis, and similar stuff. I found myself frequently visiting threads in https://www.reddit.com/r/musictheory/ and https://music.stackexchange.com/.
And of course there are great Youtube channels about music theory (I linked some of them in the Credits page of the website).
Most of the time I just search in Google and jump from blogs to forums to dedicated websites until I find what I'm loooking for.
Besides already given references, here's two more:
https://shiverware.com/musixpro/harmonic/chords.html http://www.altkeyboards.com/home
https://shiverware.com/musixpro/harmonic/chords.html http://www.altkeyboards.com/home
Felicidades, se nota que le has puesto mucho trabajo!
- personalmente, creo que usar dos colores (azul/rojo o verde/azul) seria más claro que usar solo rojo, aunque entiendo que tal vez quieres mantener el esquema de color actual. En todo caso, tal vez un pequeño gráfico en alguna parte lo haría más obvio (rectángulo horizontal de rojo claro a rojo oscuro, con texto indicando algo así como notas más - menos ¿armónicas? (dentro de la escala))
- estaría bien poner las configuraciones de los sintes más accesibles, quizás solo cambiar sonido, que es lo más divertido (aunque entiendo que el foco sea la "teoría"), en el menú de la derecha, y dejar iconos de ayuda al lado para acceder a ajustes más detallados o información como la que enlazas en "How To Use"
- sería genial tener algunas canciones de demo para ver de forma más clara lo que pasa en la tabla en "casos reales". incluso cargar desde midi? aunque probablemente no sea ninguna prioridad
seguiré experimentando, muy interesante! házselo llegar a Adam Neely y a Jaime Altozano! yo justo descubrí a Jacob Collier el otro día! mucha suerte!
- personalmente, creo que usar dos colores (azul/rojo o verde/azul) seria más claro que usar solo rojo, aunque entiendo que tal vez quieres mantener el esquema de color actual. En todo caso, tal vez un pequeño gráfico en alguna parte lo haría más obvio (rectángulo horizontal de rojo claro a rojo oscuro, con texto indicando algo así como notas más - menos ¿armónicas? (dentro de la escala))
- estaría bien poner las configuraciones de los sintes más accesibles, quizás solo cambiar sonido, que es lo más divertido (aunque entiendo que el foco sea la "teoría"), en el menú de la derecha, y dejar iconos de ayuda al lado para acceder a ajustes más detallados o información como la que enlazas en "How To Use"
- sería genial tener algunas canciones de demo para ver de forma más clara lo que pasa en la tabla en "casos reales". incluso cargar desde midi? aunque probablemente no sea ninguna prioridad
seguiré experimentando, muy interesante! házselo llegar a Adam Neely y a Jaime Altozano! yo justo descubrí a Jacob Collier el otro día! mucha suerte!
¡Muchas gracias, por el reconocimiento y por las sugerencias!
- Quería diferenciar las notas que pertenecen a la escala seleccionada de las que no pertenecen (como sucede en un piano con las teclas blancas y negras), pero sin utilizar tanto contraste como para hacer pensar que las notas fuera de la escala no se pueden utilizar o algo por estilo. Por eso más o menos utilicé la misma paleta, variando el grado de opacidad. Simultáneamente, las notas se van haciendo un poco más oscuras según se vuelven más graves. Quizá haga alguna prueba con dos colores, a ver qué tal queda.
- Suena bien lo de tener un atajo para cambiar el preset de sintetizador, aunque quisiera tener el interfaz lo más limpio posible porque en pantallas de móvil no sobra el espacio... Si se me ocurre cómo integrarlo lo añadiré.
- Se pueden cargar progresiones con los enlaces que se obtienen al compartirlas, como éste: https://www.harmopark.app/?s=c3g5jd7i_gn0g8JBX9GB1n2g4dzX0aF... . Quizás debería enlazar varias desde algún sitio para que los usuarios recién llegados puedan trastear rápido.
Jaja, puede que escriba a Jaime, sí, por probar... ¡Gracias de nuevo!
- Quería diferenciar las notas que pertenecen a la escala seleccionada de las que no pertenecen (como sucede en un piano con las teclas blancas y negras), pero sin utilizar tanto contraste como para hacer pensar que las notas fuera de la escala no se pueden utilizar o algo por estilo. Por eso más o menos utilicé la misma paleta, variando el grado de opacidad. Simultáneamente, las notas se van haciendo un poco más oscuras según se vuelven más graves. Quizá haga alguna prueba con dos colores, a ver qué tal queda.
- Suena bien lo de tener un atajo para cambiar el preset de sintetizador, aunque quisiera tener el interfaz lo más limpio posible porque en pantallas de móvil no sobra el espacio... Si se me ocurre cómo integrarlo lo añadiré.
- Se pueden cargar progresiones con los enlaces que se obtienen al compartirlas, como éste: https://www.harmopark.app/?s=c3g5jd7i_gn0g8JBX9GB1n2g4dzX0aF... . Quizás debería enlazar varias desde algún sitio para que los usuarios recién llegados puedan trastear rápido.
Jaja, puede que escriba a Jaime, sí, por probar... ¡Gracias de nuevo!
I realize you both mean well, but HN is an English language forum and if you want the other participants to have the benefit of your comments and responses I'm sure we'd love to see them in English (even though GT is only a few away, it's the polite thing to do...).
For those that would like to know what's being written:
"- personally, I think using two colors (blue / red or green / blue) would be lighter than using only red, although I understand that maybe you want to keep the current color scheme. In any case, maybe a small graphic somewhere would make it more obvious (horizontal rectangle from light red to dark red, with text indicating something like more notes - less "harmonics" (within the scale))
- it would be nice to make the settings of the syntheses more accessible, maybe just change sound, which is the most fun (although I understand that the focus is the "theory"), in the menu on the right, and leave help icons next to access more detailed settings or information like the one you link in "How To Use"
- It would be great to have some demo songs to see more clearly what happens in the table in "real cases". even load from midi? although it's probably not a priority
I will continue experimenting, very interesting! give it to Adam Neely and Jaime Altozano! I just discovered Jacob Collier the other day! good luck!"
-------------
Thank you very much for the recognition and the suggestions!
- I wanted to differentiate the notes that belong to the selected scale from those that do not belong (as in a piano with the black and white keys), but without using so much contrast as to suggest that notes outside the scale can not be used or something for style. That's why I more or less used the same palette, varying the degree of opacity. Simultaneously, the notes become a little darker as they become more serious. Maybe I'll do some test with two colors, see how it looks.
- It sounds good to have a shortcut to change the synthesizer preset, although I would like to have the interface as clean as possible because on mobile screens there is not enough space ... If I can figure out how to integrate it, I will add it.
- You can load progressions with the links that are obtained when sharing them, like this one: https: //www.harmopark.app/? S = c3g5jd7i_gn0g8JBX9GB1n2g4dzX0aF .... Maybe you should link several from somewhere so that newcomers can play fast.
Haha, I may write to Jaime, yes, to try ... Thanks again!
For those that would like to know what's being written:
"- personally, I think using two colors (blue / red or green / blue) would be lighter than using only red, although I understand that maybe you want to keep the current color scheme. In any case, maybe a small graphic somewhere would make it more obvious (horizontal rectangle from light red to dark red, with text indicating something like more notes - less "harmonics" (within the scale))
- it would be nice to make the settings of the syntheses more accessible, maybe just change sound, which is the most fun (although I understand that the focus is the "theory"), in the menu on the right, and leave help icons next to access more detailed settings or information like the one you link in "How To Use"
- It would be great to have some demo songs to see more clearly what happens in the table in "real cases". even load from midi? although it's probably not a priority
I will continue experimenting, very interesting! give it to Adam Neely and Jaime Altozano! I just discovered Jacob Collier the other day! good luck!"
-------------
Thank you very much for the recognition and the suggestions!
- I wanted to differentiate the notes that belong to the selected scale from those that do not belong (as in a piano with the black and white keys), but without using so much contrast as to suggest that notes outside the scale can not be used or something for style. That's why I more or less used the same palette, varying the degree of opacity. Simultaneously, the notes become a little darker as they become more serious. Maybe I'll do some test with two colors, see how it looks.
- It sounds good to have a shortcut to change the synthesizer preset, although I would like to have the interface as clean as possible because on mobile screens there is not enough space ... If I can figure out how to integrate it, I will add it.
- You can load progressions with the links that are obtained when sharing them, like this one: https: //www.harmopark.app/? S = c3g5jd7i_gn0g8JBX9GB1n2g4dzX0aF .... Maybe you should link several from somewhere so that newcomers can play fast.
Haha, I may write to Jaime, yes, to try ... Thanks again!
Very interesting, I'll definitely play with it for a bit! I came across this concept of "lattice" about a year ago too, with this beautiful song using it: https://www.youtube.com/watch?v=jA1C9VFqJKo
A couple of comments: - Why select notes by right-clicking rather than left-clicking? - When building a chord, it shows the name on top and the scale degree below. But it's the opposite when I drag it to the chord progression zone, it confused me - Might be worth it to add a few tooltips or links for help (eg explaining what's a "parallel progression") - I don't understand why notes are more or less red - It'd be useful to show the scale degree of each note in the lattice (in addition to the note itself and its octave)
A couple of comments: - Why select notes by right-clicking rather than left-clicking? - When building a chord, it shows the name on top and the scale degree below. But it's the opposite when I drag it to the chord progression zone, it confused me - Might be worth it to add a few tooltips or links for help (eg explaining what's a "parallel progression") - I don't understand why notes are more or less red - It'd be useful to show the scale degree of each note in the lattice (in addition to the note itself and its octave)
Thanks for your helpful feedback!
I believe that lattice in the video is a Tonnetz. The Harmonic table and the Tonnetz are topologically equivalent, actually.
I had doubts about the right-click being the best option to select notes. I thought a new user would left-click on the harmonic table initially, before reading anything, and I wanted that to just produce a sound rather than making an unwanted selection. But it's something I'm willing to change if more people finds it strange.
I think you're right about the label order thing in chord buttons. I guess I found the Roman numerals more relevant in the progression context, but I agree it can be confusing.
There's a help page (/how-to-use.html) with instructions and explanations of some concepts like parallel progression, but maybe a few tooltips can be helpful.
Notes that have a lighter color are those that belong to the currently selected scale, to ease identification. At the same time, notes are slightly darker as they get lower in pitch.
I like your idea about adding the scale degree label to notes. You mean something like 1, b2, 2, b3, 3, etc.? I'd have to make sure it doesn't get confused with octaves, though.
Thanks again for sharing your thoughts.
Hey Pedro,
Awesome work. Some 'notes' (pun intended):
- demo mode, click it to load a set of chords to show what the end result would look / sound like
- real time midi output rather than the built in synth as an option
- allow 'chords' of only one note to be dragged as well as placeholders to build on later.
- ability to erase a single chord from a progression, rather than only all of them at once.
Super nice work, thank you for making and posting it.
Awesome work. Some 'notes' (pun intended):
- demo mode, click it to load a set of chords to show what the end result would look / sound like
- real time midi output rather than the built in synth as an option
- allow 'chords' of only one note to be dragged as well as placeholders to build on later.
- ability to erase a single chord from a progression, rather than only all of them at once.
Super nice work, thank you for making and posting it.
Hi, thanks a lot for your feedback!
- Progressions can be shared as a link, so a demo could be just a link like this: https://www.harmopark.app/?s=bVw_q_qn7g7JBH0GB1n1g3d7a_en9g7.... That's the famous Pachelbel's progression; it's embedded as an example in the 'How to use' page.
- I'd like to explore those MIDI possibilities, both input and output.
- It's possible to use a simple power chord dyad (root + fifth) as a roughly neutral placeholder.
- Individual chords can be removed by dragging and dropping into the Trash.
- Progressions can be shared as a link, so a demo could be just a link like this: https://www.harmopark.app/?s=bVw_q_qn7g7JBH0GB1n1g3d7a_en9g7.... That's the famous Pachelbel's progression; it's embedded as an example in the 'How to use' page.
- I'd like to explore those MIDI possibilities, both input and output.
- It's possible to use a simple power chord dyad (root + fifth) as a roughly neutral placeholder.
- Individual chords can be removed by dragging and dropping into the Trash.
Somewhat related - here's my hexagonal musical instrument for Android: https://play.google.com/store/apps/details?id=com.castlewrat...
Unlike Harmopark's focus on composition and music theory features, my app is all about preforming music in real time.
Unlike Harmopark's focus on composition and music theory features, my app is all about preforming music in real time.
Hi, nice work! That's right, I wanted this tool to be browser-based and sound processing is more limited in a browser than in a native mobile app. So the focus is not on real-time playing. Still, you can do cool stuff on tablets.
Now I've spent some time with harmopark, let me share some thoughts.
Experience is somewhat clumsy on laptops without mouse. Maybe in 'select mode' the left click could also toggle selected nodes. On tablet the interface makes more sense.
I like how easy it is to enter a progression and generate a musical loop. Harmonic table is great choice for working with chords.
Arpeggios sound great. With a bit of reverb and delay there are some nifty soundscapes in there. The synths themselves could use some improvement.
Sound settings could perhaps be pulled out of modal into main page? I had fun fiddling with settings, I'd like them to be more accessible & exposed.
It would be nifty if 'explore harmony' chords could be dragged onto progression track. Maybe clicking a chord in that modal could make it a active selection and than it could be dragged from selection info.
Thanks for sharing this with us. It looks great already and I'll drop in occasionally to check for updates.
Experience is somewhat clumsy on laptops without mouse. Maybe in 'select mode' the left click could also toggle selected nodes. On tablet the interface makes more sense.
I like how easy it is to enter a progression and generate a musical loop. Harmonic table is great choice for working with chords.
Arpeggios sound great. With a bit of reverb and delay there are some nifty soundscapes in there. The synths themselves could use some improvement.
Sound settings could perhaps be pulled out of modal into main page? I had fun fiddling with settings, I'd like them to be more accessible & exposed.
It would be nifty if 'explore harmony' chords could be dragged onto progression track. Maybe clicking a chord in that modal could make it a active selection and than it could be dragged from selection info.
Thanks for sharing this with us. It looks great already and I'll drop in occasionally to check for updates.
That's some valuable feedback, thank you very much!
When you say laptops without mouse, are you talking about using a touchpad or a touchscreen? The "Play mode / Select mode" switch is only visible on touch-enabled devices and doesn't really affect mouse or touchpad clicks. Using a touchpad, the left button plays and the right button selects/deselects. I suppose what you mean is that I should modify the behaviour of the mouse/touchpad in the case the mode switch is visible. That seems reasonable.
I'm not an expert on sound synthesis and most of the included synth configurations are library defaults, or presets I found somewhere. I'd like them to have a bit more character, and it would also be nice to add some more. This is an area I could work on, I agree.
Someone else here has suggested the same thing about making the sound settings more visible. I think it's a good idea, I'll see what I can do!
I thought about adding that feature in the 'explore harmony' modal but I was concerned about having to choose a specific voicing for the chords. But I guess it shouldn't be a big deal: if the provided voicing is not the best to integrate in your progression, you can always modify it.
Great comments, thanks again. And good luck with your Hexpress app!
When you say laptops without mouse, are you talking about using a touchpad or a touchscreen? The "Play mode / Select mode" switch is only visible on touch-enabled devices and doesn't really affect mouse or touchpad clicks. Using a touchpad, the left button plays and the right button selects/deselects. I suppose what you mean is that I should modify the behaviour of the mouse/touchpad in the case the mode switch is visible. That seems reasonable.
I'm not an expert on sound synthesis and most of the included synth configurations are library defaults, or presets I found somewhere. I'd like them to have a bit more character, and it would also be nice to add some more. This is an area I could work on, I agree.
Someone else here has suggested the same thing about making the sound settings more visible. I think it's a good idea, I'll see what I can do!
I thought about adding that feature in the 'explore harmony' modal but I was concerned about having to choose a specific voicing for the chords. But I guess it shouldn't be a big deal: if the provided voicing is not the best to integrate in your progression, you can always modify it.
Great comments, thanks again. And good luck with your Hexpress app!
Just to follow up on the first issue: my laptop has a touch screen. The framework I use (Love2D, which is built on SDL2) can detect this and receives multiple simultaneous touches.
In Harmopark the touchscreen is detected, but multi-touch doesn't work. Therefore I had to use touchpad.
Auto-voicing is complicated and it's very culture-specific. One good implementation is this: http://www.sealab2021.tv/etcetera/choir/
In Harmopark the touchscreen is detected, but multi-touch doesn't work. Therefore I had to use touchpad.
Auto-voicing is complicated and it's very culture-specific. One good implementation is this: http://www.sealab2021.tv/etcetera/choir/
Ok, I see. I use p5.js to handle input, and I've just read this in the reference: "The touches[] array is not supported on Safari and IE on touch-based desktops (laptops)." Is that your case?
That link you shared is amazing. I've just visited David Li's website and his work is so cool.
But I don't think I need a smart algorithm to harmonize a melody. In the case of my "diatonic chords chart", I already know what notes to put in the Harmonic table. My voicing concerns are simply about the octave to use and the position in the hex lattice. The voicing itself is constructed out of stacking thirds, roughly speaking.
By the way, I've already added this feature following your advice: the last pressed chord button will be selected in the hex lattice.
That link you shared is amazing. I've just visited David Li's website and his work is so cool.
But I don't think I need a smart algorithm to harmonize a melody. In the case of my "diatonic chords chart", I already know what notes to put in the Harmonic table. My voicing concerns are simply about the octave to use and the position in the hex lattice. The voicing itself is constructed out of stacking thirds, roughly speaking.
By the way, I've already added this feature following your advice: the last pressed chord button will be selected in the hex lattice.
Neat. I think it would benefit from having a traditional keyboard/chromatic layout alongside the hex lattice. Sometimes I want just one note that would easier to grab off the keyboard than get from switching keys/scales.
Although perhaps I'm not the target audience.
Although perhaps I'm not the target audience.
I'm not sure I understand. Why do you need to switch key/scale to select a single note? The notes in the harmonic table are always the same, the only thing that can change is the enharmonic spelling.
Just how I think about music-- seeing a chromatic representation alongside the hex lattice would help me get the note I want faster; I often think in terms of intervals.
should this work on Firefox (60.6)?
Yes, it should. I've tested the website on Windows Firefox and iOS Firefox and it worked OK, except for some sound distortion when selecting certain synth presets, like "FM". But I think that's a bug of the sound library I'm using and I hope it will be fixed soon.
very cool
I'm Pedro, the creator of Harmopark (https://www.harmopark.app). A year ago I found out about this interesting hexagonal lattice named 'Harmonic table' and decided to build a web music tool whose UI includes this note layout with the purpose of exploring harmonic concepts and helping with composing.
Features:
- Build chords in a visual way and get their possible symbols immediately.
- Harmonize scales and their modes. Display a chord chart based on any scale.
- Create chord progressions and visualize them while they play.
- Easily switch progressions to any parallel scale/mode you want.
- Get a mirror version of a chord progression using negative harmony concepts.
- Use modal interchange borrowing chords from the parallel and negative progressions to create more interesting harmonic sequences.
- Export progressions as MIDI files to work with them in a DAW.
- Share progressions via link or embed code.
- Just use the harmonic table as an instrument to play around on. Sound can be adjusted choosing among several synth presets and effects.
I would love to hear your thoughts.