Show HN: Interactive guitar scales diagrams
grunfy.com
grunfy.com
I had to look for a few minutes myself before this started making some sense. I'm sorry to say that I can't feed to this to my students as it is.
On one hand, it's extremely information dense. All the colors! On the other hand, it seems to lack crucial information that might make it worthwile.
Sorry if that sounds very negative. I do appreciate the effort a lot! And I di see potential to use a further evolution of this in my teaching practice.
P.S. One hint for a small/easy update: include French style note names as an option. They're in use in quite a few more places than you'd think...
I am not sure if you had a look at the "pentanizer" parts, but that one is even worse at first sight, but once you isolate certain parts I think (very subjective) it becomes helpful if you study interval parts.
The diagram made perfect sense to me. In fact, I sketched a diagram like that when I was practicing playing every scale in every position. First I noticed that each pentatonic scale shape has 2 minor third intervals and 3 major second intervals on five strings (sixth string is always the same as first) and they kind of "loop around". And if you put the five possible shapes side to side in a certain order, they also form a loop. And then I extended that looping pattern to septatonic (major/minor) scale. I don't know if I'm making any sense right now, but it made me instantly memorize all the scales in a way that wasn't explained in any of the guitar tutorials on the Internet I've seen. Until now, I guess.
OO-O
OO-O
O-O
O-OO
O-OO
The semitone steps seem to "gravitate" towards the 2-note string. So just loop this pattern around and you get all possible septatonic scale shapes (modulo the offset caused by shorter distance between G and B strings). Also the second note of the two-note string is always a minor scale root.
If you keep the layout, keep all the buttons in place (maybe invisibe or grayed out), and strip down the interface to just one idea, what idea would you use to communicate how to use this tool?
Some suggestions:
* Can we have an option to show the note names (A, Bb, B etc.) instead of the relative scale positions? Crucial for learning the actual fingerboard notes IMO. You may already have it there, but I may have missed it. (Ability to toggle between the two would be fantastic).
* Fingerboard markers are not as obvious as I would like. I was looking for fret numbers actually, and then eventually noticed you had fingerboard markers - but the light grey make them hard to see. (And what to the black/gold dot markers denote?). I am used to seeing bright, consistent fingerboard markers on my guitars.
* Having stared at guitar fretboard for > 40 years from all angles, I always have a hard time when I see fretboard diagrams with constant spacing between the frets. Makes it harder for me to visualise exactly where it is on the neck that I need to start. May I suggest an option to show a scaled neck (doesn't have to be exact, just an approximation of wider spacing at the nut and narrower towards the bridge) just so it becomes easier to relate the position to an actual guitar neck? (Also make the 12 fret really REALLY obvious so you know where the repetitions start).
But aside from these, I think this is brilliant and I have bookmarked it for future reference.
EDIT: Scratch my first suggestion above :D - I see you already have a note/position toggle along the bottom!
Here's an example of someone mostly staying "in the box[1]." Is that even the right term?
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.
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.
(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.)
What I don't understand is what can I do with it. What's the typical way of using it?
The Sky is Crying is a standout example.
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.
Having some labels or explainers for the different toggles would be helpful.
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.
There is a youtube link video link included which explains the concept.
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.
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.
This also opens up the possibility of using this for other string instruments with other tunings, like ukelele (gCEA) and banjo (gDGBD) et al.
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.
I also wasn't sure what effect some of the controls were having, but I think it might be because I am on my phone.
- the hover effect makes the lighter color buttons seem to disappear, especially once pressed
- I have no idea what the R button does or why
- pentatonic major is an uncommon scale and odd choice for default - pentatonic minor might be better, or just major
One thing I want to mention is that tool tips or other onscreen help would be useful.
I've got questions...
1. What is the relationship between the bottom colored dots and the colored notes? I'm looking in the "scalar" tool, key of C. It looks like the bottom dots are for coloring a cross-fretboard position. I would have expected the red bottom dot to mark the position from C on the 8th fret for all the scales, as it does for pentatonic minor to dorian. However pentatonic and blues major are on the 5th fret position, and major is in open position.
2. The pentanizer, what is it? I also don't understand the relationship between the colored and numbered dots and the fretboard coloring. The UI has a strange way of switching the numbers if I switch the scales. E.g. select pentatonic major, red dot, and 1 dot. Then switch to pentatonic minor, and it auto-switches to 5 dot. Overall, it's pretty disorienting the relationship between these design elements and the scales. Or I've fundamentally misunderstood the tool.
3. What tools did you use to make this? Will you open source?
Thank you, you're really killing it!
However, I would argue that you should be very careful while using it. And here's why.
I've been playing guitar for 10 years, and I had two teachers, one of which was a blues/rock/jazz improvisation teacher.
I used to draw scale diagrams, and use some pre-drawn diagrams as well. But for some reason I could easily improvise cool melodies in pentatnoics, but I had hard time with all other scales.
I stopped trying to learn improvisation despite my teacher's desperate attempts to make it work for me.
And then I found https://www.youtube.com/watch?v=OkaqfgSqtHg
It's a short video by Guthrie Govan, easily one of the best guitarists in the world.
And what he says that conventional method of learning scales is bad.
Essentially, what he offers is to learn to add notes modes to pentatnic scales.
And now I use that approach, and my playing is much more melodic and musical. It's a pity that I found the video way too late.
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.
Are you using some SVG library or making it "by hand"?
One thing about the UX of it - because you haven't gotten enough feedbsck on that already; a demo of how the scales work would be cool. E.g., perhaps on first load, the scales could play for one section automatically starting from the bottom string and then going up. Then I think people could realize what the dots represent, the colors, and how it all ties together.
Well done! I'm curious to know how all this works from a math/theory perspective, but not curious enough to get in over my head :)
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
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.
One thing I’ve been doing lately is overlaying chords over the scale to do something similar to the CAGED method.
Can this be flipped for left handers?
edit: also, what does the 'b' prefix signify? I'm not familiar with it.
You can check it out here
http://sonicpines.com/fretboard
(still somewhat of a rough, half baked demo, so expect bugs)
For the most part I have been building it for myself, to help my understanding as I was taking some guitar lessons. But I thought I might eventually release it as an app.
It seems we took a very similar approach, I'm also using an SVG visualization (though, I have to say, your version is a bit more visually appealing, kudos for that), and you can choose your key and scale in a similar way (though my demo is limited to a pretty small number of scales right now). I have WebAudio playing some recorded guitar sounds on mine, though I think sometimes this is more annoying than useful.
I have been surprised by the comments of a few friends that I have showed it to who are learning guitar as well, who could not make heads or tails of it. I suppose it requires a certain bit of music theory background before you can really get in to an app like this. I was quite surprised by the guitar teacher saying he didn't get it and didn't think it would be useful in teaching. My guitar teacher keeps drawing all of these kind of diagrams by hand which are all parts of what can be seen on my app (or yours) and it seems odd to me that this kind of an app would not instantly make sense to anyone who is trying to learn the fretboard.
I guess on your app one thing that wasn't totally obvious to me was what the colouring in between the notes represented. In one version of the app it seemed to just represent the space between one note and the next, but in another it seems that you are colouring areas of the fretboard to represent the different "boxes"?
Myself, I already know a lot of music theory from Piano (hence the use of little mini-piano keyboards as key/note selectors on my app), so for me it's all about learning how the stuff I know from piano maps on to the guitar. I could see how for someone without any music experience learning guitar for the first time, all of the different terminology and reasoning behind it all might not be self explanatory. That's not a failing of your app necessarily, just that music theory in itself is a bit weird. Perhaps that makes an app like this a bit of a niche thing, the fact that you need to know some music theory to use it. Maybe some people who are learning would find it beneficial if it packaged more in a tutorial form where there are different "lessons" which introduce the concepts a bit at a time and keep coming back to the same fretboard interface as a visualization.