Show HN: Harmopark – Web tool to visually build chords and progressions

https://www.harmopark.app/

by pitpank • 7 years ago

153 35 7 years ago

pitpank15• 7 years ago

Hello HN,

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.

marmaduke• 7 years ago

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.

slx262• 7 years ago

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

pitpank15• 7 years ago

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?

slx262• 7 years ago

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!

pitpank15• 7 years ago

¡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!

zach43• 7 years ago

this is truly really cool! are there any resources you'd recommend to learn more about this area of music theory?

scroblart• 7 years ago

https://en.wikipedia.org/wiki/Tonnetz

pitpank15• 7 years ago

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.

veli_joza4• 7 years ago

Besides already given references, here's two more:

https://shiverware.com/musixpro/harmonic/chords.html http://www.altkeyboards.com/home

trashraccoon• 7 years ago

very cool

williamdclt• 7 years ago

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)

pitpank15• 7 years ago

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.

i_am_proteus2• 7 years ago

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.

pitpank15• 7 years ago

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.

i_am_proteus2• 7 years ago

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.

quakenul• 7 years ago

Really cool! And not only that but very intuitive and fun to use. I can see a lot of music makers who lack the theoretical background get great results out of this.

pitpank15• 7 years ago

Thank you very much! I'm happy you find it intuitive and fun to use, and I hope the tool is useful to people.

rglover• 7 years ago

Very handy for songwriting. Great work :)

pitpank15• 7 years ago

Thank you! I tried to aim for that goal.

jacquesm3• 7 years ago

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.

pitpank15• 7 years ago

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.

holri• 7 years ago

should this work on Firefox (60.6)?

pitpank15• 7 years ago

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.

ktpsns• 7 years ago

For me it does not work on Firefox 66.0.

veli_joza4• 7 years ago

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.

pitpank15• 7 years ago

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.

veli_joza4• 7 years ago

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.

Show HN: Harmopark – Web tool to visually build chords and progressions

Related Stories