Page 1 of 2
Guitar Fretboard Scale Visualisation Tool - Updated 30/4
Posted: Tue Apr 05, 2011 4:11 pm
by 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
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Tue Apr 05, 2011 4:40 pm
by 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.
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Tue Apr 05, 2011 4:45 pm
by 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.
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Tue Apr 05, 2011 4:49 pm
by 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 . . .
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Tue Apr 05, 2011 4:56 pm
by duckpow
Looks nice and easy to comprehend
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Tue Apr 05, 2011 4:58 pm
by 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!
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Tue Apr 05, 2011 5:00 pm
by 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.
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Tue Apr 05, 2011 5:19 pm
by 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!
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Tue Apr 05, 2011 5:30 pm
by crumhorn
mojofunk wrote: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 .
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Tue Apr 05, 2011 5:35 pm
by crumhorn
dick nixon wrote:
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".
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Wed Apr 06, 2011 3:31 am
by mojofunk
crumhorn wrote: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.
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Wed Apr 06, 2011 5:20 am
by ash
dumb question, but can the fretboard view change to horizontal?
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Wed Apr 06, 2011 2:48 pm
by crumhorn
ash wrote: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....
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Wed Apr 06, 2011 3:08 pm
by crumhorn
Looks like my evil plan succeeded - this is indeed an influential forum
http://www.google.co.uk/search?q=guitar ... ualisation
Re: Guitar Fretboard Scale Visualisation Tool (HTML5).
Posted: Wed Apr 06, 2011 3:33 pm
by 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!