Show HN: A Little Tool to Visualize Guitar Chords | Hacker News Reader

Show HN: A Little Tool to Visualize Guitar Chords

muted.io

157 pointsthisisseb34 comments

Very nice! The design is beautiful.

If you’re looking for something more interactive have a look at https://react-guitar.com (I’m the author).

Really Nice.

Though as an extremely novice guitarist, can I ask why the fretboard is "upside down" with the lower notes at the bottom, rather than physically on top as they would be when holding a guitar? (Having the strings be different thicknesses might make this more obvious too). This made trying to test with the couple of chords I know more difficult, as I had to try and flip them vertically first.

When holding a normal guitar right-handed (neck to the left) with the human head above the guitar, that's also "upside-down", so it matches the display on the screen.

Of course there are lefty guitars, and people playing right-handed guitars left handed, and as there is nothing that doesn't exist probably also someone playing a lefty guitar right-handed, ... so switches to flip in all directions would probably make sense.

That was my reasoning too. Thanks!

Makes sense, though I'd say that my brain still has a concept of up even when looking down at a fretboard. More so when I'm holding a guitar and looking horizontally outwards (reading from a screen) - my brain knows which line/string is closest to the ceiling and which is closest to the floor. If I'm copying a chord from another player (very common) then I'm naturally doing the horizontal transposition but never a vertical one (ok, lefties playing a right handed guitar backwards, but that's rare and confusing in itself).

As the page seems to be a resource for inexperienced players, and as there's already a lot of confusion between up/down for notes and spatially on a fretboard, making things blindingly obvious seems like a bonus. Even something as simple as making the "strings" different widths would give someone more information to spatially orientate themselves.

edit: I guess my brain is far more wired up to deal with things flipped horizontally (looking in a mirror, being shown how to perform an action by someone facing me), but I can't think of anything where I have to deal with objects flipped vertically (rather than rotated 180). Interesting to find out this seems to be a "me" things rather than common/obvious one :)

@4lejandrito Thanks for that, I was playing with it and the chord naming feels a bit off from what I expected. Chords like D and C got unconventional namings: https://react-guitar.com?strings=0%7C1%7C0%7C2%7C3%7C0

Remember to remove the unplayed strings too. The chord names look correct for when you hold the chord but play all strings.

Exactly. Thanks!

This would be the real C Major: https://react-guitar.com/?strings=0|1|0|2|3|-1.

Really nice and useful.

Aside from it, I always wonder why chords are presented in a way that they are never seen when you play it - in this tool in both orientations the fretboard layout never corresponds to what it would look like in the mirror - 0 fret on the left bottom E string at the bottom. It seems that it would make it easier to follow as it would require less 'brain translation'.

I don't think it requires any translation, as if you just tilt the guitar neck back towards you, this view is the view you'd have of the keyboard. If you had the mirrored translation, you'd always need to mentally flip the chord unless you're playing in front of a mirror.

The only way I can think of to present it as you'd play it would be to implement the notes facing 'away' from you, and have a transparency effect like you're looking through the back of the neck (to make it clear we're talking guitar orientation). Otherwise, the articles' orientation is how you'd see the fretboard if you just tilted the neck towards yourself.

Unless of course, you are left handed, in which case it's mirrored, and hard to follow.

The explanation I've always heard is they want the lower frequency strings to be physically lower than the higher frequency strings. So the low E string is on bottom and the high E string is on top. Also, it helps to know the high E string is numbered string 1 and the low E string is numbered string 6.

I've been playing guitar going on 20 years and I have never thought of or heard of anyone playing guitar in front of a mirror to see what notes their fingers are playing. It's much easier to just turn the fretboard slightly and look at your fingers (which really you only have to do as a beginner).

Yeah, I didn't mean actual playing in front of the mirror, I just changed CSS to show like it is in a mirror and found that it's much simpler to follow the fingers pattern.

This is exactly what I've been looking for, but unable to find in such an approachable format! I recently picked up guitar after almost a decade without, and I've realized that guitar tutorials online follow a similar structure as cooking recipes: full of fluff at the top and you have to scroll a while before you get to the content. Well done!

You're note names are buggy. I'm guessing it's to do with open strings not being labeled. C major is visualizing a G on the b string first fret but it should be a C. This is in horizontal mode at least

Yeah I noticed this. Pulled up Am7 and the note on the first fret of the B string is labelled as E and A for different voicings.

I came to say this, it also got me confused a little.

Very nice.

In your example images on the homepage: the second diagram for CMaj shows the bar for the first finger behind 2 3 4, nicely showing that the first finger is pressing down on the strings, even though it's not actually affecting the 2nd, 3rd and 4th strings.

In the third diagram, the bar for the first finger just covers the 2nd, 3rd, 4th strings, and doesn't cover the 5th. A beginner might interpret this as their index finger shouldn't press on the 5th string, but this would be very hard.

This is really nicely made, love the style and all the other little tools (scales and modes, chords in keys). Super handy to have a clean minimal reference like this. Great work!

I think my favourite thing about this is 'horizontal' orientation. That's such a small thing that makes a big difference for people learning and not having to re-orient what they're seeing on screen with the guitar they're holding in their hands.

Great looking site, well done.

Are the chords all hand coded? What determines which notes are included? For example some G-shape chords (using CAGED system) are missing the low E & A strings, while some are missing the high E.

It would also be nice to see all 5 CAGED versions of the chord, rather than just 4.

This is awesome! My only feedback would be to also add the typical symbols used in jazz worksheets for diminished, major, etc, instead of just the name.

Great work!

This is neat. It takes me back to all the triad positions on the GBE strings that my instructor always said I need to practice more than I did.

I’m having trouble understanding what’s going on with the middle finger in the C dominant 9th chord in the second position.

Nice! Very minor nit: Half-diminished chord should be written as m7b5 - not M7b5.

Neat! While on the "note names" mode it would be great to have the notes colored by note instead of by finger (i.e the G note would be always red)

I appreciate the readability, but I wish you (and every one else who makes tools like this) had included Phyrigian Dominant in your scales.

1. How do you decide on which of the possible ways to play the chord to include? For instance consider B♭ Major 7th, which has the notes B♭ D F A.

One way to play it is x13231 (numbers are fret numbers) using a bar on 1, giving B♭ F A D F. Another way to play it in the same general area of the fretboard is x00331, giving A D B♭ D F.

The tool shows the first, and does not show the second.

2. A display mode that might be useful to add is one that shows all the places on the fretboard that you can play notes of the chord. I've got an ancient command line tool that does this. Here's its output for a B♭ Major 7th cord:

     |-<5>-|-----|-----|-----|-<7>-|-<1>-|-----|-----|-----|-<3>-|-----|-----|
     |-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|-----|-<7>-|-<1>-|-----|
     |-----|-<7>-|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|
  <3>|-----|-----|-<5>-|-----|-----|-----|-<7>-|-<1>-|-----|-----|-----|-<3>-|
  <7>|-<1>-|-----|-----|-----|-<3>-|-----|-----|-<5>-|-----|-----|-----|-<7>-|
     |-<5>-|-----|-----|-----|-<7>-|-<1>-|-----|-----|-----|-<3>-|-----|-----|

The numbers are the intervals in the chord, so it is showing all the places you can play the root, 3rd, 5th, and 7th.

Adding such a display at the bottom of your page after the chord diagrams could be helpful if someone is having trouble fingering one of the suggested forms. They can look at the whole fretboard diagram and see if there are any notes of the chord that are an easier reach for whatever finger is giving them trouble.

3. Does anyone know something that goes the other way? I would like to give the notes and be told what the chord is called. Earlier this year I scanned all the handouts from the classical/flamenco guitar class I took in college 40+ years ago, and started trying to remember/relearn guitar after decades of not playing by trying to work through the pieces that I remembered once being able to play decently.

One of the pieces was this lively anonymous Spanish piece [1]. I noticed on the chord diagrams at the top that what it calls a B♭ is not the normal B♭. The notes actually in the diagramed chord are A D B♭ D F♭. I tried playing it as diagrammed, and playing a normal B♭ or B♭ Major 7th thinking maybe the diagram was in error, but it sounded a little better played as diagramed. I also found a YouTube video of a longer and fancier version of this piece that included tab, and it too played that chord as diagrammed. The diagram then appears to be right...it just isn't named right.

It took a while to find a name for that chord. The big list here [2] failed me. I finally found this article [3] which tells me it is B♭maj7(♭5).

[1] https://imgur.com/a/VBG7Fja

[2] https://en.wikipedia.org/wiki/List_of_chords

[3] http://brunojazz.com/vt-Maj7flat5.htm

As someone that enjoys trying to make up inversions on the spot, and laments that chord charts only ever seem to acknowledge open chords and E/A-shape barres, that command line tool looks fantastic. Is it available to download anywhere?

(P.S. I can't work out the tuning in the score you posted, but it looks like another user posting above[1] made a tool that provides a fingering -> chord name solver?)

[1] https://news.ycombinator.com/item?id=32979909

You can get the source for that command line tool here [1]. It's a single file C program that just uses stdio.h and stdlib.h and inputs from stdin and outputs to stdout, so should be easy to get working on anything that has a C compiler and a terminal with a simple "cc chord.c".

There's a little bit of documentation in this comment from a couple years ago [2]. There's a source link in that comment too, but that is to an older version. I added a couple more chord types later so use [1] instead.

Note: I'm not sure I got all the chord types quite right, so be sure to look at the notes it says are in the chord you asked for to make sure it got the right notes.

Check out the whole post that [2] was a comment on. There were several other people who also commented sharing guitar or music tools they had developed.

[1] https://pastebin.com/HKyKWHip

[2] https://news.ycombinator.com/item?id=23922951

Nice! Sadly, I play the 5 string banjo. I wish I had one of those for that instrument!

This is great! Thank you for sharing.

This is pretty! Love it!

Love it!

Nice

Reply on news.ycombinator.com