Oolong’s Playground

This is an interactive diagram of a guitar fretboard. It shows you all the different ways that chords can be made, in different tunings.

It’s inspired by Robert Johnston’s Hello Guitar Method of teaching, but doesn’t necessarily do it justice. You might also be interested in relating this to the ‘CAGED guitar system’.

The diagram shows a guitar (or violin or ukulele) with the head on the left. The root note of any chord is shown in white wherever it appears on the fretboard, and the other notes that appear in any chord are highlighted with colours depending on their relation to the root. A chord is made up of three or more different notes, each of which might be played  on one or more string, so that there is always a range of different ways of playing any chord on a stringed instrument. Usually the root note is the deepest string played, but not always.

Use the drop-down menus to choose your chord, or else click on the applet to give it focus and then use the keyboard to select chords:

• a-g choose the root note of the chord.
• A-G are sharp chords, so press shift and a to get A#
• The number keys select the type of chord.
  1. is your basic major chord, like C. This consists of the first, third and fifth notes of the major scale: C E G
  2. is a sus2 chord, like Csus2. This has the first, second and fifth notes: C D G.
  3. is a minor chord, like Cm. This uses the first, third and fifth notes of the minor scale: C D# G
  4. is a sus4 chord, like Csus4. This has the first, fourth and fifth notes of the major scale: C F G. These are also the major chords in the key you’re looking at. Notice that if you go from Csus2 to Cm to C to Csus4, the first and fifth notes are static while the middle note increases by one semitone between each.
  5. is a ‘power chord’, like C5. This loses the middle note entirely, being made only of firsts and fifths: C G. Usually played with only three strings.
  6. is a ‘6’ chord, like C6 (which is also Am7). The first, third, fifth and sixth notes of the major scale: C E G A
  7. is a seventh chord, like C7. The first, third, fifth notes of the major scale, plus the seventh note of the minor scale: C E G A#
  8. is a major seventh chord, like C7maj. This uses the first, third, fifth and seventh notes of the major scale, giving a noticeably more dissonant chord than C7: C E G B
  9. is an ‘add 9’ chord, like Cadd9. That’s the first, second, third and fifth notes of the major scale (or, by convention, first, third, fifth and ninth): C D E G
• The space bar switches between different tunings.

I’ll be writing a version of this for Android smart phones, and also adding a few more chord types and integrating the menus into the applet itself – at the moment, because they’re part of the web site rather than the applet, they don’t change when you use the keyboard to change the applet’s settings.

Source code: Fretboard

Built with Processing