Fretboard

in C



Short cut for setting the center and a scale of either major or (natural) minor.

with a URL query generated from this form's values.

Here we're experimenting with a fretboard for instruments like guitar. The opaque discs represent the tonal center (root note) of the key. The next brightest are notes of the pentatonic scale (in the same key). The dimmest are the rest of the notes in the diatonic scale.

Erik van der Neut has another take on this. It's interesting and has some nice features that mine doesn't. It also has more scales.

The circle of fifths on the right highlights the chords that, along with the scale, fit in with a particular key. Note that this is designed for the twelve major and twelve minor keys. I'm kind of winging it for the other modes and scales.

Someday Baby

  1. A blues fretboard with pentatonic minor plus blue notes plus other notes in the pentatonic major. The notes should be colored to indicate from which scale they came. Only blues scale for minor keys (no additional notes from major pentatonic).
  2. "Paint mode" to let users make diagrams.
  3. User definable tunings.
  4. Emit an ASCII (or unicode?) fretboard chart suitable for Reddit comments or other Markdown documents.
  5. Overlaying scales? Combine colors or just paint over and rely on transparency (alpha channel)?
  6. Abbreviated scales e.g. major triad, just 1, 3, 5
  7. Use the new setColors method from the HTML to let a user select a color scheme. (What about the switch between major and minor? Two color schemes?)
  8. Tune individual strings.
  9. Get some settings from CSS (background and foreground colors, fonts, etc.).
  10. Images to optionally replace drawn elements like board, frets, nut, strings, finger prints, etc.
  11. "Play" ASCI Tab input.
  12. Click and drag to transpose.
  13. Nashville Number System (key: 1)
  14. Roman Numberals (key: I)
  15. Choice buttons for "key", "NNS" (or "1 5"? or "1"), or "I V" (or "I").

Talk to Us



- - Your Name

Done 2016-09-27

  1. Get foreground and background colors and background image from CSS. This paves the way for different style sheets. Maybe should use background color for painting between frets and foreground color for the frets and strings. Could even try to put a shine of frets with a lighter shade on top.

Done 2016-09-14

  1. Set tuning from a URL parameter. e.g. "Open G".
  2. Set scale degree and note names from URL parameter.
  3. Straightened out the setting of the key.
  4. Use proper terms like "tonal center" instead of "root".

Done 2015-11-28

  1. Option to label (diatonic) scale degrees. Mostly, I just want to know where 4 and 5 are.
  2. Option to show note names.
  3. Optionally more frets (up to 24?)

Done 2015-01-25

  1. Allow setting of tonal center and scale from the URL. e.g. "?center=A&scale=Lydian" Note that this should be mutually exclusive of "?key=".

Done 2015-01-05

  1. (sort of) Fixed "relative" button. Switches between major and minor fine. Switches between other modes in a similar way. Still dodgy (makes no sense) with other scales like arpeggios or pentatonics.
  2. Get the initial key from the URL. e.g. "?key=A#m" or "?key=a#".
  3. Or set a tonal center and scale like center=A&scale=dorian etc.

Done 2013-10-18

  1. Set tonal center or "root"
  2. Set arbitrary scales (modes etc.)

Done 2013-03-23

  1. Pay attention to geometry when drawing instead of scaling the canvas. Make the horizontal one look like the vertical one.

Done 2013-03-19

  1. Just a touch of transparency to the pentatonic notes (like the diatonic notes, but less).
  2. Array of fret locations. These are computed upon creation and not on the draw.

Done 2013-03-18

  1. Allow a horizontal orientation.
  2. Switch between relative minor and major.

    Note that this just for switching between major and minor keys to highlight the idea that the notes stay the same and only the center changes. This button might do wierd things with other modes.

  3. Paint in this order: wood, frets, markings, nut, strings, fingerprints.