10 ms·

Show HN: A Little Tool to Visualize Guitar Chords

157 points by thisisseb 4y ago

diehunde 4y ago
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!
ploden 4y ago
Love it!
tshaddox 4y ago
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.
asimpleusecase 4y ago
Nice
milchek 4y ago
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.
guillef 4y ago
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)
slyrus 4y ago
Nice! Very minor nit: Half-diminished chord should be written as m7b5 - not M7b5.
tartoran 4y ago
This is pretty! Love it!
bshaksbdvdhe 4y ago
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
- just-tom 4y ago
  I came to say this, it also got me confused a little.
- doytch 4y ago
  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.
razerbeans 4y ago
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!
maybelsyrup 4y ago
This is great! Thank you for sharing.
tzs 4y ago
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 https://imgur.com/a/VBG7Fja [2] https://en.wikipedia.org/wiki/List_of_chords https://en.wikipedia.org/wiki/List_of_chords [3] http://brunojazz.com/vt-Maj7flat5.htm http://brunojazz.com/vt-Maj7flat5.htm
dhon_ 4y ago
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.
4lejandrito 4y ago
Very nice! The design is beautiful. If you’re looking for something more interactive have a look at https://react-guitar.com https://react-guitar.com (I’m the author).
- BuildTheRobots 4y ago
  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.
  - someweirdperson 4y ago
    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.
    - 4lejandrito 4y ago
      That was my reasoning too. Thanks!
      - BuildTheRobots 4y ago
        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 :)
jarek83 4y ago
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'.
- ALotOfBees 4y ago
  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).
  - jarek83 4y ago
    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.
- taylodl 4y ago
  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.
- davisoneee 4y ago
  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.
SamBam 4y ago
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.
wintermutestwin 4y ago
I appreciate the readability, but I wish you (and every one else who makes tools like this) had included Phyrigian Dominant in your scales.
RickJWagner 4y ago
Nice! Sadly, I play the 5 string banjo. I wish I had one of those for that instrument!

157 points by thisisseb 4y ago

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!

ploden 4y ago

Love it!

tshaddox 4y ago

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.

asimpleusecase 4y ago

Nice

milchek 4y ago

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.

guillef 4y ago

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)

slyrus 4y ago

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

tartoran 4y ago

This is pretty! Love it!

bshaksbdvdhe 4y ago

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

just-tom 4y ago
I came to say this, it also got me confused a little.
doytch 4y ago
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.

razerbeans 4y ago

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!

maybelsyrup 4y ago

This is great! Thank you for sharing.

tzs 4y ago

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 https://imgur.com/a/VBG7Fja [2] https://en.wikipedia.org/wiki/List_of_chords https://en.wikipedia.org/wiki/List_of_chords [3] http://brunojazz.com/vt-Maj7flat5.htm http://brunojazz.com/vt-Maj7flat5.htm

dhon_ 4y ago

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.

4lejandrito 4y ago

Very nice! The design is beautiful. If you’re looking for something more interactive have a look at https://react-guitar.com https://react-guitar.com (I’m the author).

BuildTheRobots 4y ago
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.
- someweirdperson 4y ago
  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.
  - 4lejandrito 4y ago
    That was my reasoning too. Thanks!
    - BuildTheRobots 4y ago
      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 :)

jarek83 4y ago

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

ALotOfBees 4y ago
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).
- jarek83 4y ago
  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.
taylodl 4y ago
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.
davisoneee 4y ago
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.

SamBam 4y ago

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.

wintermutestwin 4y ago

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

RickJWagner 4y ago

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