Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Interactive guitar scales diagrams (grunfy.com)
277 points by machak 10 months ago | hide | past | web | favorite | 95 comments

Professional guitar teacher here.

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...

Self-taught (shitty) guitar player here.

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.

For septatonic scales I use the following mnemonic: there are 14 notes in 2 octaves and they are distributed among 5 strings. 14=4*3+2 so there's one string with 2 notes and 4 strings with 3 notes. And it always goes like






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.

"I had to look for a few minutes myself before this started making some sense...On one hand, it's extremely information dense. All the colors!"

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?

It can be quite intimidating at first I guess. It makes (starts to make) sense once you turn off some shapes and start connecting them together one by one.

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.

I have one bit of constructive criticism for you. Every single Major/Minor scale should have exactly one each of ABCDEFG, so that written music makes sense — each line/space corresponds to a "letter", and the key signature tells you how sharp/flat that "letter" is. The tool gets this wrong for example in C# major, where you should have the 3rd step be E# instead of F, and the 7th step to be B# instead of C. A particularly pathological case is D# major, where almost all notes are misnamed — You should have D# E#, F##, G# A# B# C##.

Hi, yes, that's a known issue. I added flat/sharp button as an option, but, I think that makes things even worse. I am working on a fix for this...

Do I have better resources?

Nice work. I like it.

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!

Great idea about freeboard scaling!

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?

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.

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?

> 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.

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.

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.

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?

The A Major scale is A B C# D E Gb G#

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

That would be F#, not Gb. Enarmonic but not quite the same.

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

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.

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.

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 may help: https://www.reddit.com/r/Guitar_Theory/comments/8c1s9i/penta...

There is a youtube link video link included which explains the concept.

That’s pretty awesome - I hadn’t seen it before. Thanks for the link!

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)

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

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)

What kind of music do you play and how do you like the new tuning so far? Were there any unexpected difficulties or benefits?

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.

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 like your work, it looks and feels awesome.

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.

I'm quite familiar with the music theory behind all of the scales, having played instruments for over 30 years, but I'm not finding the information display or interface to be very intuitive.

could you be any more constructive, I mean, which parts are confusing / none intuitive?

I'm having a hard time looking at the scale and making sense of it without having to orient myself and think about it a lot. I think this could be fixed with a different visual display, such as less or different colors and more contrast.

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.

A couple issues/questions on desktop:

- 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

R marks "relative" major/minor, for example: A minor pentatonic is relative to C major pentatonic (contains same notes/shapes, just root note is different). I can/could change defaults, but, all your presets should be saved between the sessions (your next visit). I am in the middle of making some interface changes, hopefully buttons will behave better after it. Thanks for feedback.

You're welcome, i may have some more feedback.

One thing I want to mention is that tool tips or other onscreen help would be useful.

I was thinking about tooltips but those are tricky to implement for mobile devices (although I haven't spend much time making it usable for small screens/devices)

True, i didn't notice the lack of hover tips until I used the desktop. But if it's oriented towards desktop, might as well put them in?

First, it must be said that this is super cool, and I love it so much!

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!

1. Bottom colored dots are connected to shape colors, nothing else. Those shapes are often (in guitar literature) referenced by number, 1 to 5 (e.g. pentatonic shape 1), I decided to use colors 2. Pentanizer is adding interval colors. It splits "scaler" shapes into 5 micro interval shapes. It is explained in https://grunfy.com/updates.html section and this video might help to understand the concept: https://www.youtube.com/watch?v=H3DCpJlGQFA&feature=youtu.be... 3. I use some own JS on top of http://svgjs.com/ library...I'll need to cleanup things and make it somewhat "stable" before opensourcing it.

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 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.

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.

This is amazing! Looking at this I learned and realized a lot of patterns that I never really considered before.

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 :)

+1 for using SVG. It looks awesome.

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

I am using http://svgjs.com/ It's very lightweight but doesn't have much features though.

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 :).

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.

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

Here’s a thing like this I made for violin/viola/cello scales, when I was learning music theory a few years ago.


It's beautiful but as a fairly experienced musician, I think it's a bit information dense with all the symbols and letters. The aesthetics are great but I'd love maybe some slimmed down information.

I think I'm missing the Phrygian scale could we add it? Great stuff btw.

I'll add more scales in the future, for time being you could check https://grunfy.com/modenizer.html It has different coloring, but you can use 1-5 shapes to "dissect" it

Very useful! If you could also add note sounds, that would be amazing!

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.

It would be great if you could use the same “engine” to make similar tools for other stringed instruments: bass, ukulele, banjo, cello, violin, etc

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.

Very nice. Small suggestion: make guide dots positions like on real guitar. Specifically, on 9th, 12th, and 15th frets instead of just odd frets.

This would be a lot more accessible if you could 'strum' the strings with the mouse cursor while you had different chords selected.

Good stuff! Any plans to add arpeggio patterns?

added to my .plan (stay tuned;-)..no pun intended)

Great idea! Please do this.

Very cool. It would be nice if I could pick a list of my chords and switch between them with single mouse or keyboard click.

This is fantastic. I am eternally lazy about mapping out scales. This makes my guitar life easier. Great job!

Love this.

One thing I’ve been doing lately is overlaying chords over the scale to do something similar to the CAGED method.

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.

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.


I would love a left handed one. It's very difficult for me to use otherwise.

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.

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.

Thank you for the wonderful work.

Hello! This is cool, I was really interested in this because I have been building something very similar, a little side project that I started working on some time ago.

You can check it out here


(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.

What am I looking at?

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact