98 comments

[ 2.7 ms ] story [ 172 ms ] thread
+1 for using SVG. It looks awesome.

Are you using some SVG library or making it "by hand"?

This looks amazing! Just started studying intervallic improvisation and this will help alot! do you have any plans to add support for alternate tunings or let the user to modify the tuning (like this tool: http://fretviz.com/) ?
very cool! did you consider adding note sounds?

edit: also, what does the 'b' prefix signify? I'm not familiar with it.

I took that to be the flat notes so b6 would be a flat sixth note of the scale.
A minor has no flat notes, but when selected, shows b3, b6, and b7. I must not understand what you mean by 'flat note of a scale'.
I hope this might help (I am not very good at explaining it): https://music.stackexchange.com/questions/17426/naming-scale...
Cool. I understand now after reading the discussions in the link a few times. Sadly, I never delved very deep into music theory, despite having played guitar for nearly 20 years.
Give it a shot, it's worth it. I also played for years before I started looking into theory part, but I wish I started way earlier.
Love this. As someone who has been playing casually for years with a few attempts to use scales and music theory to up my base understanding, this is something I could see myself using a lot.

Having some labels or explainers for the different toggles would be helpful.

+1 for text explanations.

I have a decent internalized understanding of western music theory and it's application on guitar but it seems like it would be a pain to try and decode the meaning of all of the colors, polygons and icons. Even if I did spend significant time on that, I fear I'd still be left wondering if I was missing some of the insights you might be trying to convey.

For the time being, it might be useful to just provide a key/legend where each term links off to some third party site that already has an explanation of the respective term.

Also, it'd be good to explain what the different views are good for. E.g., what's the difference, when viewing A-minor pentatonic, between the scaler view vs the pentanizer view?

FWIW, I'm on a moderately aged Android phone. If there's more to the desktop experience (e.g., hovertext?) it'd be good to add a note saying so.

Thanks for the feedback. I'll add help files and explain scaler/pentanizer differences. Scaler is "traditional" way of learning scales, but I think pentanizer makes more sense...it just needs to be explained bit more. My main focus right now is to introduce print possibilities. I am just bit tight on time right now.
Could you say a little more? I think I understand the "scaler" and it's how I learned the scales and how I practice, but I'm curious what the pentanizer is suggesting to do. Picking a root and an interval and finding it all over the fretboard?
This is great! I've been working on trying to work these out on the fly, and this is a great way to check yourself.

One feature idea: options to display seven and eight string versions of the chart. Extended range guitars are popular, and there aren't many great scale references.

Good stuff! Any plans to add arpeggio patterns?
added to my .plan (stay tuned;-)..no pun intended)
This looks fantastic. Though some labels would be nice. It's difficult to find out what all the colors and the numbers mean. Adding an audio library would be a nice addition.
R is the Root note of the scale while the numbers are notes in the full scale. A pentatonic is a regular major/minor scale with 2 notes removed. The blues scales are the pentatonic with one note added. The colors are simply a way to highlight a geometric pattern - learn to play the patterns (and bounce around within them) and how they chain together to form various scales over the whole neck. Explaining some of these things is more of a theory lesson than something you can just add a few labels, and the colors for the patterns don't have actual names at all AFAIK.

I agree this could be expanded on in some ways.

Edit - wait, the colors are not just patterns, there are common chord forms that fit over them as well.

Very nice! Love the large collection of scales you have (750!) Do you have them all hardcoded or does the site generate them from base principles / interval patterns?

For those that may want a more random experience while practicing, I made asciitabs.com a few months ago. Not as polished or full-featured as machak's site but would likely appeal to the same audience

Damn I'm not seeing anything other than the navigation and a red footer, in Firefox on latest Android.
sorry about that, just downloaded firefox on android and for me it does render the fretboard but it only takes like 1/3 of the screen. Will look into it asap.
No problem at all, excited to check it out all the same when I get back to my laptop.
Very nice. Small suggestion: make guide dots positions like on real guitar. Specifically, on 9th, 12th, and 15th frets instead of just odd frets.
As someone who stopped trying to learn guitar around middle school, I'm totally lost. Must make more sense if you're well practiced, I suppose.
I'd say I was reasonably well practised and this still makes no sense.
Nice work, love SVG use.

Can this be flipped for left handers?

unfortunately, not at the moment. I think with some code "flipping" it would be easy to support. I;ll look into it.
Nice work. I'm really impressed. I think with addition of an audio lib, it'll be perfect.
The last row of buttons don't work on mobile (they don't update the view)
to be honest, I targeted desktop audience, and running linux (and android) myself, I am bit limited in this (testing) area. I might be getting an iOSmac device soon so that might help. What browser/OS are you using?
The scale name buttons don’t have any effect for me on the iPhone. Their rendered state changes but that’s it.
This is fantastic. I am eternally lazy about mapping out scales. This makes my guitar life easier. Great job!
Pretty cool! I made something like this a few years ago, but nowhere near as sophisticated. One suggestion: as of late I've been playing guitar in perfect 4ths tuning, and it would be helpful to be able to change the tuning of individual strings on your tool to enable that (and any other alternate tuning)
What kind of music do you play and how do you like the new tuning so far? Were there any unexpected difficulties or benefits?
Tuning in 4ths is great for scalar playing. I play in various tunings of 4ths and 5ths, it makes it easier to play fast intervalic runs.
I would be hard pressed to come up with a coherent genre for what I play, I guess it's really a hodge-podge of everything I've been exposed to musically.

I like it a lot. I'd say I play 95% in P4 now, after starting about 3 months ago. I keep another guitar tuned standard right next to it, and find myself reaching for it less and less the more I get used to it. If you know standard tuning well, most of the work is just a matter of reprogramming your muscles.

The biggest trade off is that all your open and barre chords are gone (there are open and barre chords in P4, but many of them are hard to play and none of them are straight equivalents to what you have in standard--the other side of that is that some unusual chords are now easier, so it's a good way to experience a different flavor), so if you play music that relies on those you have to make a big adjustment. That can be an opportunity, since now you have to get creative with how you play. A chord over 3 or 4 strings doesn't sound as huge or sparkly as an open chord, for example, but it can be interesting in its own right and of course it also opens up some sonic room if you're into layering many parts together.

The biggest gain is that the scales and chords you learn are now always the same without that b-string bump. A lot of things just have less mental overhead now. The benefits sound less tangible than the drawbacks, I know, but I think it's worth a try. It's pretty easy, just tune your two highest strings up a semitone. And easy to go back if you hate it, of course.

I would also love to be able to explore alternate tunings. I often use DADGAD and CGCFCE for example, among myriad other open tunings.

This also opens up the possibility of using this for other string instruments with other tunings, like ukelele (gCEA) and banjo (gDGBD) et al.

I'll introduce alternate tuning, although it might take few months as I am busy with some other improvements (printing being one of them)
if you're looking for scales in alternate tunings, an old website called "all guitar chords"[1] has got you covered, even if it's not as pretty an interface as OP's site. I found it very useful years ago when re-working some hindustani music for guitar in open C tuning. it's one of those sites I'm always a little surprised hasn't just vanished from the internet.

also, just because it's a saturday, I suggest anyone into open tunings on guitar check out this list of tunings used by james blackshaw.[2] his music is a lot of fun to play.

1. http://www.all-guitar-chords.com/guitar_scales.php

2. http://archive.fo/uqH3d

Very nice!

To anyone wanting to break out of that "locked-in" and boxy style of playing both scales and chords, I suggest listening to how Allan Holdsworth approaches arrangement.

His books/instructionals are amazing. Completely changes your perspective on how to build chords and how to play scales over them.

Very useful! If you could also add note sounds, that would be amazing!
(comment deleted)
Thank you for the wonderful work.
The blues scale should somehow indicate that the flat 3rd needs to be bent up to get that blue note from West African music that sits between our flat and natural thirds in western tonality. It’s absolutely necessary to get a real blues sound.
Very nice! It might be nice to have (at least as an option) the fretboard narrow the distance between frets as you go up the neck, like a real fretboard.
This is quite cool, nice work! I'm a self-taught player and only in the last five years or so have I managed to punch through the fog and begin to understand what I'm doing. This is a great tool for visualizing scale positions and finding roots. I use smartchord on my phone, but this is a much more accessible reference when playing. +1 for including the Martin serial number lookup, although I already knew my D18 was built in 1974 :).
I'm a self-taught moderate guitar player and I feel like this is really cool, but I don't understand any of it. Can someone explain how to read this, and what to do?
Take this backing track[0] and try using the A pentatonic minor scale or A blues scale from this website and practice soloing using the marked notes. Try staying "in the box" which are the highlighted areas where you don't have to move your hand a lot to play all the notes of the scale.

Here's an example of someone mostly staying "in the box[1]." Is that even the right term?

[0] https://www.youtube.com/watch?v=22mWUkAi0PI

[1] https://www.youtube.com/watch?v=w_7JYRhLUgA

Let's give it a shot.

So first I have marked "Pentatonic Minor" and "A" as our key since this is probably a scale that you know. What you are seeing are all the notes in the scale laid out on the fret board.

If you look at fret 5 (second dot) and starting from the E string you'll see a red dot with a R in it. This is the "Root" of the scale, namely A. The next note is on the 8th fret and has a "b3" in it. You read this as "flat third". If you don't know music theory this might be confusing so please let me know if I've explained it in a non-understandable way.

To understand why we say "flat third" is that it is the third note in the _Major_ scale lowered half a step (or one fret on the guitar). So the A Major scale is A B C# D E G# G#, the Pentatonic Minor scale takes 5 notes from this scale, namely A(R) C#(3) D(4) E(5) G#(7) (original indexes in parens). We then lower the C# third note, and the G# (seventh note) so we get the scale A C D E G and those notes are what you see over the fret board.

This is a good explanation. One thing to add though. With the interface of the site, you can select a colored circle and that will highlight the position where you can play the scale (or mode).

So if you highlight the red circle at the bottom, it will show you a version and position of the scale starting with the root note - A as noted above.

If you highlight the yellow circle at the bottom, it will highlight the scale/position starting with the second note and ending with the 9th. This is called a Mode.

A Mode is when you play a scale, but start or emphasize a note other than the root note. Different modes have a different sound/feel the same way that a major, minor or 7th chords has different feels.

So that is another layer to the page.

Unfortunately, I learned all of this theory, but quit playing.

The A Major scale is A B C# D E Gb G#
That would be F#, not Gb. Enarmonic but not quite the same.
This video[0] is very very long because it's a kind of reinforcement class for students who didn't get it at first. But I watched like the first half of it and now I finally understand how to build scales.

(Gb needs to be F# there. One reason is that theory can't assume instruments to be equally tempered to begin with; some brasses won't for example.)

[0] https://www.youtube.com/watch?v=jK-jr2AkMQ4&t=5407s

I do not know if the explanation is on the website but I didn't find it. I had difficulties to understand the website even though I have basic understanding of music theory. Maybe an help icon (?) with an explanation would help?
I had understood what the diagram means, actually I have most of this information internalized... not a great guitar player, but I know the theory.

What I don't understand is what can I do with it. What's the typical way of using it?

Listen to some Albert King or Stevie Ray Vaughan, both masters of this scale and the related blues scale.

The Sky is Crying is a standout example.

> What's the typical way of using it

I mentioned elsewhere in this thread, I have been building a similar app so I can speak to my use case. In my case I'm building it because i have been trying to learn how to play in a more improvised way. I have been playing guitar for a long time, but have always been a chord-strummer, usually just kind of sing-and-play, more recently has gotten in to more advanced finger-picking "fingerstyle" patterns, but have mostly never strayed far from the bottom 4 or 5 frets because I'm just playing open chords or the odd barre when I need to. My goal now is learning more of the fretboard, learning to play "lead" a bit more, or just experiment with recording multiple tracks, jamming over a song or a looped track, or play with a friend.

Typically what my approach would be is to come up with a chord progression in a particular key, say A Minor. Then if I want to solo over top of it I need to stick mostly to the notes of the A minor scale. So the notes in the A Minor scale are just the natural notes, A B C D E F G, that's easy, but visualizing where they are all across the fretboard is not obvious, so hence the app to help with this. In taking lessons I have learned about the various fretboard "boxes" and having a visualization like this app can help you see how the different box patterns all fit together.

Another aspect that this has helped me with is visualizing chords at various places on the fretboard: if you have a song in A minor with a typical chord progression, say A-minor, D-minor, E, then your goal when you are soloing or improvising on top of it is to try to hit notes that are within the current chord, not necessarily all of the time, but to emphasize those notes and usually land on these "target notes" at the end of a phrase. These "target notes" are a subset of the A minor scale, and that subset changes depending on where you are in the song.

So being able to visualize the shapes of those chords and how they fit in to the different box patterns is important. Knowing all of the chords not only in their "open" positions but the myriad of other positions that they appear on the neck is a bit of a challenge, and I find that having a visualization tool like this can be a nice reference.

Now I understand. I use other tricks to do the same thing, so I didn't see it before, thanks.
I think I'm missing the Phrygian scale could we add it? Great stuff btw.