9 ms·

Show HN: Interactive guitar scales diagrams

277 points by machak 8y ago

slig 8y ago
+1 for using SVG. It looks awesome. Are you using some SVG library or making it "by hand"?
- machak 8y ago
  I am using http://svgjs.com/ http://svgjs.com/ It's very lightweight but doesn't have much features though.
blueside 8y ago
Nice work, love SVG use. Can this be flipped for left handers?
- machak 8y ago
  unfortunately, not at the moment. I think with some code "flipping" it would be easy to support. I;ll look into it.
ad1ttya 8y ago
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/ http://fretviz.com/) ?
justherefortart 8y ago
http://www.all-guitar-chords.com/guitar_scales.php http://www.all-guitar-chords.com/guitar_scales.php I prefer this one, they have a ton of other scales, chords, theory, and other great information too.
chestervonwinch 8y ago
very cool! did you consider adding note sounds? edit: also, what does the 'b' prefix signify? I'm not familiar with it.
- neilprosser 8y ago
  I took that to be the flat notes so b6 would be a flat sixth note of the scale.
  - chestervonwinch 8y ago
    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'.
    - machak 8y ago
      I hope this might help (I am not very good at explaining it): https://music.stackexchange.com/questions/17426/naming-scale-degrees https://music.stackexchange.com/questions/17426/naming-scale...
      - chestervonwinch 8y ago
        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.
        machak 8y ago
        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.
mmartinson 8y ago
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.
- steamer25 8y ago
  +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.
  - machak 8y ago
    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.
    - lukas 8y ago
      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?
      - 8y ago
ff7f00 8y ago
Good stuff! Any plans to add arpeggio patterns?
- te_chris 8y ago
  Great idea! Please do this.
- machak 8y ago
  added to my .plan (stay tuned;-)..no pun intended)
sonar_un 8y ago
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.
- phkahler 8y ago
  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.
rocheio 8y ago
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
fold_left 8y ago
Damn I'm not seeing anything other than the navigation and a red footer, in Firefox on latest Android.
- machak 8y ago
  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.
  - fold_left 8y ago
    No problem at all, excited to check it out all the same when I get back to my laptop.
SmallSuggester 8y ago
Very nice. Small suggestion: make guide dots positions like on real guitar. Specifically, on 9th, 12th, and 15th frets instead of just odd frets.
tvanantwerp 8y ago
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.
- mbo 8y ago
  I'd say I was reasonably well practised and this still makes no sense.
Exuma 8y ago
The last row of buttons don't work on mobile (they don't update the view)
- machak 8y ago
  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?
  - ChristianGeek 8y ago
    The scale name buttons don’t have any effect for me on the iPhone. Their rendered state changes but that’s it.
  - Exuma 8y ago
    iOS/safari
djangoEm 8y ago
Nice work. I'm really impressed. I think with addition of an audio lib, it'll be perfect.
king_magic 8y ago
This is fantastic. I am eternally lazy about mapping out scales. This makes my guitar life easier. Great job!
cnasc 8y ago
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)
- posamari 8y ago
  What kind of music do you play and how do you like the new tuning so far? Were there any unexpected difficulties or benefits?
  - 3131s 8y ago
    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.
  - cnasc 8y ago
    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.
Dynocator 8y ago
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.
feconroses 8y ago
Very useful! If you could also add note sounds, that would be amazing!
deleted 8y ago
[deleted]
0xFFFE 8y ago
Thank you for the wonderful work.
pklausler 8y ago
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.
slyrus 8y ago
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.
markbnj 8y ago
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 :).
teabee89 8y ago
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?
- elsherbini 8y ago
  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 https://www.youtube.com/watch?v=22mWUkAi0PI [1] https://www.youtube.com/watch?v=w_7JYRhLUgA https://www.youtube.com/watch?v=w_7JYRhLUgA
- tephra 8y ago
  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.
  - mikesabat 8y ago
    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.
haddr 8y ago
I think I'm missing the Phrygian scale could we add it? Great stuff btw.
- machak 8y ago
  I'll add more scales in the future, for time being you could check https://grunfy.com/modenizer.html https://grunfy.com/modenizer.html It has different coloring, but you can use 1-5 shapes to "dissect" it
RomanPushkin 8y ago
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.
bajsreddit 8y ago
I would love a left handed one. It's very difficult for me to use otherwise.
sbilstein 8y 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.
andrepd 8y ago
What am I looking at?
markvdb 8y ago
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...
- machak 8y ago
  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.
  - pdpi 8y ago
    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##.
    - machak 8y ago
      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...
    - deleted 8y ago
      [deleted]
code_duck 8y ago
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.
- machak 8y ago
  could you be any more constructive, I mean, which parts are confusing / none intuitive?
  - code_duck 8y ago
    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.
  - code_duck 8y ago
    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
    - machak 8y ago
      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.
      - code_duck 8y ago
        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.
anigbrowl 8y ago
This would be a lot more accessible if you could 'strum' the strings with the mouse cursor while you had different chords selected.
gmcnaught 8y ago
Love this. One thing I’ve been doing lately is overlaying chords over the scale to do something similar to the CAGED method.
cyberferret 8y ago
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!
- matt_the_bass 8y ago
  Great idea about freeboard scaling!
dluan 8y ago
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 :)
matt_the_bass 8y ago
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
digsmahler 8y ago
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!
- machak 8y ago
  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 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&t=126 https://www.youtube.com/watch?v=H3DCpJlGQFA&feature=youtu.be... 3. I use some own JS on top of http://svgjs.com/ http://svgjs.com/ library...I'll need to cleanup things and make it somewhat "stable" before opensourcing it.
osteele 8y ago
Here’s a thing like this I made for violin/viola/cello scales, when I was learning music theory a few years ago. http://osteele.github.io/fingerboard/ http://osteele.github.io/fingerboard/
uglycoyote 8y ago
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 http://sonicpines.com/fretboard 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.
lkhz 8y ago
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 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.

277 points by machak 8y ago

slig 8y ago

+1 for using SVG. It looks awesome. Are you using some SVG library or making it "by hand"?

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

blueside 8y ago

Nice work, love SVG use. Can this be flipped for left handers?

machak 8y ago
unfortunately, not at the moment. I think with some code "flipping" it would be easy to support. I;ll look into it.

ad1ttya 8y ago

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/ http://fretviz.com/) ?

justherefortart 8y ago

http://www.all-guitar-chords.com/guitar_scales.php http://www.all-guitar-chords.com/guitar_scales.php I prefer this one, they have a ton of other scales, chords, theory, and other great information too.

chestervonwinch 8y ago

very cool! did you consider adding note sounds? edit: also, what does the 'b' prefix signify? I'm not familiar with it.

neilprosser 8y ago
I took that to be the flat notes so b6 would be a flat sixth note of the scale.
- chestervonwinch 8y ago
  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'.
  - machak 8y ago
    I hope this might help (I am not very good at explaining it): https://music.stackexchange.com/questions/17426/naming-scale-degrees https://music.stackexchange.com/questions/17426/naming-scale...
    - chestervonwinch 8y ago
      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.
      - machak 8y ago
        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.

mmartinson 8y ago

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.

steamer25 8y ago
+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.
- machak 8y ago
  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.
  - lukas 8y ago
    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?
    - 8y ago

ff7f00 8y ago

Good stuff! Any plans to add arpeggio patterns?

te_chris 8y ago
Great idea! Please do this.
machak 8y ago
added to my .plan (stay tuned;-)..no pun intended)

sonar_un 8y ago

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.

phkahler 8y ago
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.

rocheio 8y ago

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

fold_left 8y ago

Damn I'm not seeing anything other than the navigation and a red footer, in Firefox on latest Android.

machak 8y ago
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.
- fold_left 8y ago
  No problem at all, excited to check it out all the same when I get back to my laptop.

SmallSuggester 8y ago

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

tvanantwerp 8y ago

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.

mbo 8y ago
I'd say I was reasonably well practised and this still makes no sense.

Exuma 8y ago

The last row of buttons don't work on mobile (they don't update the view)

machak 8y ago
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?
- ChristianGeek 8y ago
  The scale name buttons don’t have any effect for me on the iPhone. Their rendered state changes but that’s it.
- Exuma 8y ago
  iOS/safari

djangoEm 8y ago

Nice work. I'm really impressed. I think with addition of an audio lib, it'll be perfect.

king_magic 8y ago

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

cnasc 8y ago

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)

posamari 8y ago
What kind of music do you play and how do you like the new tuning so far? Were there any unexpected difficulties or benefits?
- 3131s 8y ago
  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.
- cnasc 8y ago
  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.

Dynocator 8y ago

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.

feconroses 8y ago

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

deleted 8y ago

[deleted]

0xFFFE 8y ago

Thank you for the wonderful work.

pklausler 8y ago

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.

slyrus 8y ago

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.

markbnj 8y ago

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

teabee89 8y ago

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?

elsherbini 8y ago
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 https://www.youtube.com/watch?v=22mWUkAi0PI [1] https://www.youtube.com/watch?v=w_7JYRhLUgA https://www.youtube.com/watch?v=w_7JYRhLUgA
tephra 8y ago
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.
- mikesabat 8y ago
  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.

haddr 8y ago

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

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

RomanPushkin 8y ago

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.

bajsreddit 8y ago

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

sbilstein 8y 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.

andrepd 8y ago

What am I looking at?

markvdb 8y ago

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

machak 8y ago
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.
- pdpi 8y ago
  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##.
  - machak 8y ago
    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...
  - deleted 8y ago
    [deleted]

code_duck 8y ago

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.

machak 8y ago
could you be any more constructive, I mean, which parts are confusing / none intuitive?
- code_duck 8y ago
  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.
- code_duck 8y ago
  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
  - machak 8y ago
    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.
    - code_duck 8y ago
      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.

anigbrowl 8y ago

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

gmcnaught 8y ago

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

cyberferret 8y ago

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!

matt_the_bass 8y ago
Great idea about freeboard scaling!

dluan 8y ago

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

matt_the_bass 8y ago

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

digsmahler 8y ago

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!

machak 8y ago
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 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&t=126 https://www.youtube.com/watch?v=H3DCpJlGQFA&feature=youtu.be... 3. I use some own JS on top of http://svgjs.com/ http://svgjs.com/ library...I'll need to cleanup things and make it somewhat "stable" before opensourcing it.

osteele 8y ago

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

uglycoyote 8y ago

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 http://sonicpines.com/fretboard 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.

lkhz 8y ago

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