Guitar Fretboard Scale Visualisation Tool - Updated 30/4

[crumhorn]

Recently I've rediscovered my guitar and started to brush up my playing which I never took that seriously before (mainly a keyboardist). I'm now totally hooked and can hardly put the thing down.

I've played casually for years, on and off, but never really learned my way around the fret board above the 5th fret.

On a quite different tack I have been learning HTML5 and wanted a useful project to get me into it.

So, to cut a long story short, I made this:



http://www.fretlearner.com/

It's still at an early stage and I have dozens of improvements and new features in mind for it, but I've found it very useful and felt like sharing.

This version does all the Diatonic Modes and allows for alternative guitar tunings.

next on plan = non diatonic scales, chords and a save feature for custom tunings and scale and chord definitions (using HTML5 local storage feature)

All suggestions extremely welcome.

UPDATE now has multiple scale types and some chords and arpeggios

[AceLuby]

This is a great start, but I think it's missing the links between the modes. If you could organize it in such a way to easily show that

C Ionian = D Dorian = E Phyrgian = F Lydian = G Mixolydian = A Aeolian = B Locrian

I think this would go a long way into realizing all those scales really break down into 5 distinct guitar patterns, something many people don't realize.

Not sure exactly how you'd do it, but that's what I would try for.

[mojofunk]

Thats way nifty! I would be super psyched to see you implement custom scales, so it can help with arpeggios and note group subsets. I plan on using it to help me while I attempt to learn lap steel guitar in C6 tuning - it works great! I teach guitar occasionally, and I'll send people to your site for sure.

[mojofunk]

Yea, the 5 shapes idea is one of those aha moment things, somewhat hard to convey to learners, but I often start people out with that idea - it seems to be encouraging to present it as "just 5 scale shapes to learn", makes the process somewhat less intimidating. I've seen a lot of teaching methods that make it all seem harder than it needs to be . . .

[duckpow]

Looks nice and easy to comprehend

[Observer-A]

Very cool man! You are off to a great start and it I like that you are using html5 instead of scripts/Flash.
Keep up the good work!

[crumhorn]

Thanks for the feedback.

I agree about tying the modes to the keys to show that they are all basically the same pattern. I was thinking about having an area for related scales and chords where I could probably show this. By clicking on the related scale it would change the key sig and the mode at the same time. So the notes would stay in the same places but the colouring would change.

It will make more sense once I add the other scale types which will be derived from the diatonic modes.

eg. harmonic minor = aeolian with sharpened 7,
blues scale = degrees 1, 3, 4, 4#, 5 and 7 from aeolian,
etc.

I think it has to be done like this to get the note names right.

I'll bump the thread when I update it.

[dick nixon]

Looks great.

You already have non-diatonic scales on your list - that was the only thing I could think of off the top of my head.

Most beginner types would probably want the major and minor pentatonic.

You could add arpeggios too - that would be handy.

But not complaining - it looks very good!

[crumhorn]

Yea, the 5 shapes idea is one of those aha moment things, somewhat hard to convey to learners, but I often start people out with that idea - it seems to be encouraging to present it as "just 5 scale shapes to learn", makes the process somewhat less intimidating. I've seen a lot of teaching methods that make it all seem harder than it needs to be . . .

I've found that I'm learning it better since I started thinking in terns of patterns along rather than across the neck. It's kind of difficult to explain but it depends on learning where the semitones fall (the ". o o ." positions in the map below.

Code: Select all

o . o o . o . o o . o . o . o o . o . o o . o .
o o . o . o . o o . o . o o . o . o . o o . o .
o . o . o o . o . o . o o . o . o o . o . o . o
o . o . o o . o . o o . o . o . o o . o . o o .
o . o o . o . o . o o . o . o o . o . o . o o .
o . o o . o . o o . o . o . o o . o . o o . o .

[crumhorn]

You already have non-diatonic scales on your list - that was the only thing I could think of off the top of my head.

There seem to be a lot of ambiguity over the use of the word diatonic. The definition I'm going with is "the Major scale and all the modes of the major scale".

[mojofunk]

I've found that I'm learning it better since I started thinking in terns of patterns along rather than across the neck. It's kind of difficult to explain but it depends on learning where the semitones fall (the ". o o ." positions in the map below.

Code: Select all

o . o o . o . o o . o . o . o o . o . o o . o o
o o . o . o . o o . o . o o . o . o . o o . o o
o . o . o o . o . o . o o . o . o o . o . o . o
o . o . o o . o . o o . o . o . o o . o . o o o
o . o o . o . o . o o . o . o o . o . o . o o o
o . o o . o . o o . o . o . o o . o . o o . o o

Thats how I am faking C6 lap steel! Your gizmo may help me to learn the shapes across the neck.

[ash]

dumb question, but can the fretboard view change to horizontal?

[crumhorn]

dumb question, but can the fretboard view change to horizontal?

It's definitely a required feature, I'll move it up my (imaginary) wish list.

Want to get arpeggios and non modal scales working first though. Nearly ready....

[crumhorn]

Looks like my evil plan succeeded - this is indeed an influential forum

http://www.google.co.uk/search?q=guitar ... ualisation

[Observer-A]

Man, staring at this with a YouRock guitar plugged in to Ableton is too much fun!
Such a refreshing break from the keys.
Thanks man!