Show HN: Guitar Dashboard – Open source music theory explorer for guitarists
guitardashboard.com
guitardashboard.com
> If you choose the frequency 440hz, jump down one 7-semitone step and up 5, you have an A major scale
Also I have one more question about - when making chords using the 3rd and 5th step, for a note on the right boundary of this n <-> 2n interval, I would jump into 2n <-> 4n interval, right? But I'd I were not using chords then is "all" (simplified) music made in only only one x <-> 2x range and it's not crossed?
Another question- why do pianos have different black and white keys? Do you plan on doing a blog post that explains how "your " explanation of music theory fits various instruments? I've always wanted to understand music from a mathematical perspective and your post was eye opening!
I am going to try out your tool once I get hold of a computer.
Another way of dividing up the space between a frequency and it's doubling uses eight of the twelve semi-tone divisions . The eight notes form an 'OCTive'. The octive has a 1-based index for the starting frequency. You can see seven out of twelve highlighted notes in the dashboard circles . The eighth note has the same name as the first one as you complete the circle but it would either be double or half the frequency. Going up seven semi-tones using the twelve division 'chromatic' scale is the same as going up five steps in the more selective eight note octive scale.
Yes, the circle continues from 2n<->4n and 4n<->8n and n/2<->n and n/4<->n/8 etc. The boundaries are those of human hearing from about 20hz to 20khz.
The white keys on a piano are the key of C Major. The black keys are the 'accidental' notes--the five notes of the twelve division chromatic scale that are discarded when selecting the notes for the eight (7 + the 1st/8th note that is counted twice to complete the circle) note octive.
You are saying there are 8 notes in an octave, but we only selected 7 notes after selecting 7th semi tone 7 times. I think you said the 8 note is 2x the original. Is that correct understanding?
So I got the point about 2^(1/12), what I didn't get is the staring point for A major and the jump structure. I thought all jumps are selecting 7th semi tone. So what is meant by "jump down one 7-semitone step and up 5"?
You partially answered my second question I think- saying that for chords it's okay to go from n <-> 2n scale to 2n <-> 4n scale. My question is for non chord music is this a common occurrence?
Thank you again!
C to the same C is "unison" (You may need to instruments to play two identical C notes at the same time.)
C to C#/Db (this note has two names) is "small second"
C to D is "large second". And so on.
C to the next higher C is "perfect octave".
So if we take the C major scale, it has 7 different notes. But if we also include the next higher up C, you can pair the base C with 8 different notes, when we include pairing with itself, and pairing with the higher C. When you have two instruments playing, these are the pairings you can make when you play two notes at the same time.
> C to C#/Db (this note has two names) is "small second"
While C# and Db are the same note (in equal temperament [1]), the intervals C/C# and C/Db have different names: C# is called 'augmented unison' [2]. For the name, you start from the basic interval (e.g. C/C) and apply the accidentals (# or b) [3].
[1] https://en.m.wikipedia.org/wiki/Equal_temperament [2] https://en.m.wikipedia.org/wiki/Augmented_unison [3] https://en.m.wikipedia.org/wiki/Accidental_(music)
A fifth is seven semi-tones above the root. It has a 3:2 frequency ratio to the initial note. It so happens that if you jump up by seven semi-tones five times, you've got most of the major scale, albeit strewn over 3 doublings of the initial frequency. Usually, the major scale is thought of as occurring within a single doubling so in the key of C you'd have to divide the frequencies D and A by 2; E and B by 4 to get back into the original n<->2n range. Any time you double or halve the frequency you get a note with the same mood/purpose/name but one octave higher or lower. The frequency ratios end up something like this:
C = 1
G = 3/2
D = (3/2)(3/2) (/2 to get back to the initial range)
A = (3/2)(3/2)(3/2) /2
E = (3/2)(3/2)(3/2)(3/2) /2/2
B = (3/2)^5 /2/2
There's one note missing, though--the one with a 4:3 frequency ratio: F. To get that one, we invert the 3/2 relationship and take the frequency that's 2/3 of our initial frequency. That's in the halved range, n/2<->n, though so we've gotta double to get back into our starting range. This is the one time we go down seven semi-tones instead of the five times that we go up.
I'm not sure how useful it is to think in these terms but it does show that you can derive the major scale by using simple ratios which, psycho-acoustically speaking, are generally considered more pleasant than complex ratios when played at the same time. The relationship between B and C, (3/2)^5 == 243/32 is already pretty tense. E.g., you could alternate between two notes with that ratio to make it sound like Jaws is lurking somewhere nearby:
Sticking with the simpler 3/2 makes it sound like Superman is here to save you so you can relax:
Even nonmusical people can almost always tell that, for example, 110 Hz, 220 Hz, 440 Hz, 880 Hz etc. sound like the same note.
So if you take an A major chord:
A (220.00 Hz), C# (277.18 Hz), E (329.63 Hz)
C# (277.18 Hz), E (329.63 Hz), A (440.00 Hz)
E (329.63 Hz), A (440.00 Hz), C# (554.37 Hz)
A (110.00 Hz), A (220.00 Hx), E (329.63 Hz), A (440.00 Hz), C# (554.37 Hz)
There are some nuances in color, especially about which note is the lowest. And other concerns, like at which frequency ranges the other instruments (or your other hand on a piano) are playing at the same time, and if you want to spread out to avoid the others, or make the frequencies more crowded to put more emphasis. And also purely mechanistic concerns, how you are able to reach the notes with your fingers, for example, on guitar fretboard or piano keyboard.
The 7 white keys match the C major (same as A minor) scale: C D E F G A B (and C).
I don't know why the ancient musicians thought to make C major as kind of the default scale, but that's how we now tend to see it. You can start a scale from any of the 12 semitones, but piano, and some other instruments, and the traditional musical writing notation are build so that C major is the default, and the remaining 5 semitones (the piano black keys) are written as how they deviate from the default scale.
It's just tradition, I assume.
A (440 Hz), down to D. A, up to E, up to B, up to F#, up to C#, up to G#.
Sort: A B C# D E F# G#. This is the A major scale.
I can see the construction from D onwards - jumps of 7, but how did you get to D? The instruction was 7)semi tones down, which from A is D "in previous scale"), but what about the 5 semi tones up?
One new question that popped in my mind- is this series of instructions (7down, 5up) a reverse engineering of the A major sequence to fit the 7- jump rule or is there some theory about it? I have no clue what different scales even mean or what major and minor means. Feel free to ignore the new questions (or the old one!)
{jumps down: 1, jumps up: 5}
First, you start from A, and execute the down-jumps. In this case, there is only one. Then you start again from A (returning to A is not counted as a jump), and execute the up-jumps.
> Up two 7-semitone steps and down four gives you A minor.
Up-jump sequence: A, up to E, up to B.
Down-jump sequence: A, down to D, down to G, down to C, down to F.
Sort: A B C D E F G
I don't know what's behind this idea, or how useful it is. It seems to work, though. But I think there are simpler ways to construct the scales. Or just memorize them.
A suggestion: show pitch constellations[1]. Piano/violin music theorists have written me that these were helpful in [2]. (I'd offer you code, but it's so ancient that it's probably not helpful :-( )
[1] https://en.wikipedia.org/wiki/Chromatic_circle#Pitch_constel...
For example, if I load the page and immediately click on an Eb on the piano, the fingerboard layout is correct, and the correct scale degrees are highlighted, but Eb are labeled as Db in the fretboard diagram. Similarly Bb are labelled as Abm etc. It seems like you just switched the sharp/flat symbol without also switching the note letter.
Otherwise awesome tool, this will be very useful for me!
It would be cool if you supported a kapo and turning it flat. That way I could tune it to e flat without having to do the mental math, and I could put the kapo on whatever fret so I could visually see quickly.
Super awesome work!
I wonder: on the "scales" dropdown, why didn't you include pentatonic? It's so prevalent across so many styles of music; it seems like a must.
So, to answer your question, I'm not going to add pentatonic scales, but I do plan to record a video showing how GD can give you some really cool insight into how they work harmonically.
https://youtu.be/mNmEq-cP9Oo https://youtu.be/9lSifKZ80H4 https://youtu.be/fjWFqz1Sjps
Lloyd is a bit eccentric in person and in his methods—he's very opinionated, but IMO that's one of the things that makes him a great guitar teacher.
I spent a lot of years learning guitar technique while not progressing much on the music theory side until I started reading Mark Levine's Jazz theory book. It's probably the best material on music theory I've read, though it's slightly based on jazz, or at least references it a lot. But I think you could use it as a general theory guide.
Another favorite of mine is Yusef Lateef's Chord and Melodic Patterns book, though it's more advanced/exploratory.
I played classical for years as a kid, then played any songs I could get my hands on - folk songs, pop, Beatles etc. So I learnt basic chords and how they work by playing that stuff a lot. Then when I got into jazz, you learn by listening and transcribing. Transcribing tunes, solos, chord voicings, anything. All different instruments. I've transcribed piano, trumpet, sax, guitar, bass, drums.. and Indian classical, funk, reggae etc. Anything you hear and like but don't know what it is, transcribe it, and learn to play it yourself. (If it's simple enough, you don't need to write it out) You learn a lot of things by doing that. There are books of transcribed solos, I think they're absolutely worthless. Do it yourself. Besides that, books of songs, solos etc always have mistakes, sometimes a few, sometimes thousands. I've written out orchestral scores to play on piano, studied those. I studied/played/sang Debussy's opera for over a year, that felt like a complete musical education, a lot of it is simple combinations of notes. In my 20s I learnt a lot about what pianos can do by playing a lot of piano pieces by Debussy, Ravel, Rachmaninov etc. Also playing other instruments is good - I've spent a fair bit of time playing drums, bass, guitar, trumpet, trombone, clarinet, etc. Also learning who the great musicians are is invaluable, so you can find who appeals to you most. Check out a lot of different stuff. Study, analyze, learn from the music you listen to and love. All that is so much easier since the internet! (I started in the 80s) It should all be a great joy. I enjoyed every minute of it.
The authors do a nice job of introducing basic (and then advanced) music theory concepts with text and audio/video examples using recognizable pop songs. They also have some tools for exploring themes further on their website.
I've read the books a couple times and it has given me the ability to reason about existing songs as well as better compose and improvise with songs myself.
Definitely agree about the guitar practice being better than PT part. :)
https://www.musictheory.net/lessons will pretty much teach you what you'd learn in two years at university. Honestly, I find it the best resource to get up to speed on common practice period music theory.
Moving on: divide that pattern into interlocking "boxes", and memorize the fingering pattern for each box, and how it dovetails with the adjacent boxes.
Some boxes have a transition where there are two notes per string; this is good for staying in a tight position, without much finger stretch. Three-note-per-string boxes are good for shredding.
If you have this overall pattern memorized and well rehearsed under your fingers, you can easily improvise to most music (at least that with Western roots around diatonic scales). Listen to the track and play a few notes by ear. Within a bar or two, it's obvious which pattern you are in and from there you know the rest of the picture instantly, and can "break out" all over the fretboard.
The fretboard in its current incarnation works well for western music, at the cost of being quite poor at playing for middle-eastern and eastern music.
There have been attempts to address this with microtonal fretboards (which are complicated), but most often they use fretless necks (which are available for guitars and basses).
So, as with all things, the fretboard evolved in a route that favored local optimizations.
I see a lot of folks asking about resources to learn the ideas in this tool, so I’ll recommend the Guitar Grimoire series. Granted they are more reference-type books, but each one has a good introductory chapter that I found taught the theory in an accessible way to me. I picked up the Scales volume first and have gathered more over the years, like the practice exercise edition, but don’t use them much these days (it’s been like 15 years now :)
I keep being surprised at people having the same idea e.g., see also Grunfy's post from a few months ago. https://news.ycombinator.com/item?id=17272516 He has some very nice stuff there.
My work-in-progress is also derived from "first principles", although I haven't bothered to try adding alternate tunings yet.
Mostly my focus has been on using it to aid learning improvisation, so one feature i added to my little app was the ability to set up a particular chord pattern on the fretboard and "save" it, so that you can have several different diagrams on the screen at once, e.g., one for each of the three chords in a 3-chord song.
Like you, I also have been using Typescript and SVG, but not D3 (just drawing SVG elements directly using React seems to work well enough for my purposes)
I've bookmarked you in my, just created, music "Toby" folder. Speaking of which, here's one last app recommendation that's totally unrelated: if you don't already have an extension for bookmark management on your computer, consider "Toby." It's a decent one for chrome, I use it as I have way too many normal bookmarks and finding stuff via scrolling becomes painful. I'd be interested if anyone else is using a different bookmark extension for Chrome as well.
Great job again!
I still need to dig into their extension code to see how chatty it is, their FAQ doesn’t mention how data is synced to their servers.
https://en.wikipedia.org/wiki/Neo-Riemannian_theory is a bit lacking of a simple explanation, but the basic idea is that chord groups (e.g. Minor chords) are represented as a algebra (e.g. x, x+5, x+7)
and then the chords can all be mapped on a big torus (donut) to represent transposition, and each chord connects with 2 others that just so happen to correspond with 'complimentary' chords from traditional music theory. And there are also different ways to connect to other chord groups.
Beethoven's 9th Symphony famously traces 19 of the 24 possible chords of the torus, and remember that he was partially deaf so relied on vibrations.
More interesting that all this however is a new instrument called the 'Fluid Piano' which doesn't restrict itself to Western tuning (multiples of 440Hz etc.) Check it out https://www.youtube.com/watch?v=t7Cq3pbcMkI
Music from the country Georgia can't be represented using on traditional musical staves. I'd be fascinated to understand how so different musical cultures developed, particularly in relationship to how our brains might have evolved over the year to regard certain frequencies and melodies as delightful, eerie, etc.
How about introducing another shading for the 3rd and 5th notes, so that the relationship between the scales and the chord shapes becomes more apparent?
If I might add a suggestion, it takes a while to fine the number of the chord. For example, if I'm trying to figure out what 1-4-5-1 would be, I have to hunt until I find the 4 and 5. Would be cool if there was another view that was the Nashville number system in sequence to make it quicker to find.
For example:
1 2 3 4 5 6 7
C D E F G A B
I've been playing guitar for a while now and am now beginning to understand the importance of theory, but I'm kind of at a loss on how to go about learning and applying it. Does anyone have a book/mooc that they'd recommend with lots of exercises and accompanying songs?
I've gone through a few sources but most of them relate everything to a piano. I understand the underlying theory is mostly the same but I feel like I would internalize it better seeing it on a fretboard.
Guitar, on the other hand, usually has multiple valid fingerings (on different strings) for the same chord inversion. Part of the process of learning new chord voicings on the guitar is learning the same chord everywhere it can be played.
I think each instrument's UI has something to teach. The stradella bass on an accordion with its circle-of-fifths layout is pretty interesting.
Ionian - I
Dorian - ii
Phrygian - iii
Lydian - IV
Mixolydian - V
Aeolian - vi
Locrian - vii
Otherwise its a really useful tool, great job.
What do you mean order of change from Major scale, wouldn't it start from Ionian (I)?
I wish I had this tool back then!
Hope you can continue hosting it - I might use this to practice my scale visualization.
You can select notes on the innermost ring in the circles.
For example, select G as the base in the middle ring. Then select 1, M3 and 5 on the innermost ring. The fretboard will show you all the possible ways to finger the G major chord.
One request would be to allow custom tunings. All of the tunings I use are not listed, and transposing as I go makes it a little harder to use.
It would also be nice to see other scales, such as major and minor pentatonic and blues scales.
I've used jguitar.com in the past for this sort of thing, but I really like visual aspect and unity of guitardashboard. Nice work!
jguitar.com is also very comprehensive in terms of chord fingering, scales, etc.
One major difference between jquitar.com and guitardashboard.com is that the facets (tuning, chords, scales, etc.) are separated from one other on jguitar.com, whereas guitardashboard.com tries to place them all onto a single screen. My initial reaction to guitardashboard.com is that this approach does succeed. However, jguitar.com has more to offer in total.
My thanks to both authors for helping us explorers of alternate tunings. Any help we can get is appreciated.
5 string bass: BEADG Baritone guitar: BEADF#B (2.5 steps down) Baritone drop A: AEADF#B (like drop D, tuned 2.5 steps down)
Would be neat if you could just select a standard tuning and then have a spinbox to say how many steps up or down to modify it. Makes lots of combinations available.
Thanks for the tool!
Consider adding chords, too!
But it's nice to have a visual way of seeing substitutions that work with your progression as you write music.
Having an enumeration of all of the possible voicings is really nice.
When I looked at this (as a bass player), I didn't even really notice the fret board. This application is applicable to all instruments.