
Show HN: Harmopark – Web tool to visually build chords and progressions - pitpank
https://www.harmopark.app/
======
pitpank
Hello HN,

I'm Pedro, the creator of Harmopark
([https://www.harmopark.app](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.

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

~~~
pitpank
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/](https://www.reddit.com/r/musictheory/)
and [https://music.stackexchange.com/](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.

------
williamdclt
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](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)

~~~
pitpank
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.

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

~~~
pitpank
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...](https://www.harmopark.app/?s=bVw_q_qn7g7JBH0GB1n1g3d7a_en9g7J9a_en7g7d7W_qpHJFb_yFihWHVq_SpKd5y4WFyhYHVq4t-anOaTdFp9ieeeeeeeefmaj-1).
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.

------
veli_joza
Somewhat related - here's my hexagonal musical instrument for Android:
[https://play.google.com/store/apps/details?id=com.castlewrat...](https://play.google.com/store/apps/details?id=com.castlewrath.hexpress)

Unlike Harmopark's focus on composition and music theory features, my app is
all about preforming music in real time.

~~~
pitpank
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_joza
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.

~~~
pitpank
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!

~~~
veli_joza
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/](http://www.sealab2021.tv/etcetera/choir/)

~~~
pitpank
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.

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

~~~
pitpank
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_proteus
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
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.

~~~
pitpank
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
Very handy for songwriting. Great work :)

~~~
pitpank
Thank you! I tried to aim for that goal.

------
holri
should this work on Firefox (60.6)?

~~~
pitpank
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
For me it does not work on Firefox 66.0.

~~~
pitpank
On what platform? What are the issues you experience?

------
trashraccoon
very cool

