Fretful.io (scales/chords fretboard web visualizer)

Yes, if at all possible! I think that would be better!

Don’t worry… this is a monstrous task and it is a good idea to re-cap what you have done and how you have done it. If nothing else, this is probably a great exercise just for your own benefit :smile:

2 Likes

I will use pseudo code to ease the grasp of a non-programming audience. Other programmers will know an array doesn’t start on 1 :stuck_out_tongue:

First and foremost I have a set which includes all notes.

Notes = {
   1: [‘gx’, ‘a’, ‘bbb’],
   2: [‘a#’, ‘bb’, ‘cbb’],
   3: [‘ax’, ‘b’, ‘cb’],
   4: [‘b#’, ‘c’, ‘dbb’],
   5: [‘bx’, ‘c#’, ‘db’],
   6: [‘cx’, ‘d’, ‘ebb’],
   7: [‘d#’, ‘eb’, ‘fbb’],
   8: [‘dx’, ‘e’, ‘fb’],
   9: [‘e#’, ‘f’, ‘gbb’],
   10: [‘ex’, ‘f#’, ‘gb’],
   11: [‘fx’, ‘g’, ‘abb’],
   12: [‘g#’, ‘ab’]
}

As you can see it has 12 entries, with 3 notes in each entry (except the last one). This represents all the notes and their enharmonics.

The degrees also have an equivalent set, with 12 entries and all possible types of degrees within an octave. Compound intervals are calculated to match these.

Degrees = {
   1: [‘1’,‘2bb’],
   2: [‘1#’,‘2b’],
   3: [‘2’,‘3bb’],
   4: [‘2#’,‘3b’],
   5: [‘3’,‘4b’],
   6: [‘3#’,‘4’],
   7: [‘4#’,‘5b’],
   8: [‘5’],
   9: [‘5#’,‘6b’],
   10: [‘6’,‘7bb’],
   11: [‘6#’,‘7b’],
   12: [‘7’]
}

note: it only contains the degrees the application is using at the moment.

Now, let’s take the minor scale as an example. Here’s the blueprint.

aeolian = {
   name: ‘Aeolian’,
   names: ‘Minor, Natural Minor, Pure Minor’,
   degrees: ‘1 2 3b 4 5 6b 7b 8’,
   intervals: ‘P1 M2 m3 P4 P5 m6 m7 P8’
}

Let’s take C as the tonic. So what do I do now?

  1. Reorganize the Notes set to start on the tonic

Notes = {
   1: [‘b#’, ‘c’, ‘dbb’],
   2: [‘bx’, ‘c#’, ‘db’],
   3: [‘cx’, ‘d’, ‘ebb’],
   4: [‘d#’, ‘eb’, ‘fbb’],
   5: [‘dx’, ‘e’, ‘fb’],
   6: [‘e#’, ‘f’, ‘gbb’],
   7: [‘ex’, ‘f#’, ‘gb’],
   8: [‘fx’, ‘g’, ‘abb’],
   9: [‘g#’, ‘ab’],
   10: [‘gx’, ‘a’, ‘bbb’],
   11: [‘a#’, ‘bb’, ‘cbb’],
   12: [‘ax’, ‘b’, ‘cb’]
}

  1. Grab the scale’s degrees (1 2 3b 4 5 6b 7b 8), run through the degrees array to get the entries indexes

Degrees = {
   * 1: [‘1’,‘2bb’], (twice, the 8 - being the octave - is calculated back to 1)
   2: [‘1#’,‘2b’],
   * 3: [‘2’,‘3bb’],
   * 4: [‘2#’,‘3b’],
   5: [‘3’,‘4b’],
   * 6: [‘3#’,‘4’],
   7: [‘4#’,‘5b’],
   * 8: [‘5’],
   * 9: [‘5#’,‘6b’],
   10: [‘6’,‘7bb’],
   * 11: [‘6#’,‘7b’],
   12: [‘7’]
}

Now, I have a collection of indexes derived from the Degrees.

1, 3, 4, 6, 8, 9, 11, 1

  1. Using those indexes I’ll grab the corresponding note sets.

Scale Notes = {
   1: [‘b#’, ‘c’, ‘dbb’],
   2: [‘cx’, ‘d’, ‘ebb’],
   3: [‘d#’, ‘eb’, ‘fbb’],
   4: [‘e#’, ‘f’, ‘gbb’],
   5: [‘fx’, ‘g’, ‘abb’],
   6: [‘g#’, ‘ab’],
   7: [‘a#’, ‘bb’, ‘cbb’],
   8: [‘b#’, ‘c’, ‘dbb’],
}

  1. I then use the Natural scale + the Degrees array to infer which single notes to show. This ensures the diatonic rule of not repeating letters while also covering non-diatonic scales

Scale Degrees = {
   1: 1,
   2: 2,
   3: 3b,
   4: 4,
   5: 5,
   6: 6b,
   7: 7b,
   8: 8,
}

C Natural Scale = {
   1: c,
   2: d,
   3: e,
   4: f,
   5: g,
   6: a,
   7: b,
   8: c,
}

Coming from the Scale Degrees I know the note with the corresponding index should start with that given note. Example: 3.3b on the scale degrees corresponds to the 3.e on the Natural scale.
From the example, I know the 3rd degree should start with an e. On the scale notes, 3rd degree, I have [‘d#’, ‘eb’, ‘fbb’]. The only one that starts with ‘e’ is ‘eb’.

So at the end of these calculations I get to “c d eb f g ab bb c

To create Chords I follow the exact same pattern.


Ok, now to onto Scale derivations on the Chords page.

  1. Take the C minor

minor: {
   scale: ‘aeolian’,
   name: ‘Minor’,
   symbol: ‘−’,
   names: ‘’,
   degrees: ‘1 3b 5’,
   intervals: ‘P1 m3 P5’
}

  1. Using the algorithm explained on the Scales segment, I come to “c eb g” (and the corresponding Note indexes: 1, 4, 8)
  2. Using the note indexes (previously I was using just the notes, but with note indexes I cover all the enharmonics), I run through all the scales I have configured on the app and check which ones contain those note indexes

Now onto Chord derivations on the Scales page.

Every scale has N notes. So I do a loop through all the notes/degrees on the scale

  1. For the first mode, I use the scale degrees. (1 2 3b 4 5 6b 7b 8). I run it through the note-index algorithm and run through all the chords defined on the app to find matches.
  2. For the second mode, I start the scale from the second degree and calculate the degrees from there, which now has the following degrees: (1 2b 3b 4 5b 6b 7b 8), I run it through the algorithm to get the note indexes and run through all the chords defined on the app to find matches.
  3. etc until I reach the last mode.

Addendum: I’m not checking for enharmonics yet on the chord derivations!

I hope this clears a bit of what’s going on under the hood. I also can see how this can be unhelpful and create more confusion :joy:

3 Likes

It totally is! Will look into that

EDIT: fixed

3 Likes

Just want to second this notion @gcancella - the app is looking really cool, but I think given that you’re still learning all the theory stuff, you should get someone with that expertise to consult with you more thoroughly. I don’t have the bandwidth, but maybe @Gio would be up for talking about that? I’m sure there are a lot of theory professors looking for work right now too!

4 Likes

I wouldn’t even have said anything :innocent:

I do not have anything valuable for the theory discussion but again: great work with the tool. Really comes along great. Hopefully someone can help figuring out the enharmonics and check the tool overall. It’s just not me :slight_smile:

1 Like

If you have any questions @gcancella - send a message. I’ll check it out. If I’m slammed and can’t get to it, I’ll let you know!

3 Likes

Thank you for your words, @JoshFossgreen. I’m sure there are, and would be the optimal path for the tool of course. Unfortunately this is a non-profit and non-funded tool, it’s just something I’m doing on my free time and I simply don’t have the means to pay for professional consultancy, at least on a ongoing basis. Maybe when it reaches the maturity, in terms of features I’m aiming for, I can raise funds for a one-shot kind of thing.

Ahaha, actually I was thinking of you when I wrote that :sunglasses:

Thank you @Gio for your availability! I’ll gather my questions and send you a message. If you can help, great, if not I won’t hold it against you :stuck_out_tongue:.

5 Likes

Did the last update of the year!


The tones now have “weight” to aid in the visual study of the scale/chord

2 Likes

@gcancella
It looks to me like this guy may need an app developer.

Scale Colour System

4 Likes

This is a lovely concept. One of those that I’m sorry I didn’t think about. Actually I have some stuff color related, but it’s note oriented and not interval oriented.

My birthday is on the 9th, I think I will order myself a little gift.

3 Likes

It looks like he only has books. His website could say “powered by @gcancella”!

5 Likes

Needed a refresher on notes and chord locations on the fretboard. This app was great before, but even better now - nice quick visual that I needed for it to all come back! Thanks :smiley:

4 Likes

I’m glad it was useful for you! If you have any suggestions don’t be shy!

3 Likes

Just did a small update

[alpha-1.6.0] - 2020-03-25
Added
  • Intervals view to the fretboard
Changed
  • Settings button moved to the fretboard
Fixed
  • Missing Granularity view on the Intervals page

3 Likes

App seems a bit sluggish to me…are you using Vue.js / Bootstrap on FE?

3 Likes

Yep and yep! Yeah it has a lot of performance issues I haven’t found the will to tackle yet.

It’s very javascript intensive too, which doesn’t help. I might have to prerrender some of the stuff before deploy. The scales/chords and their derivations etc are all calculated on the fly, and that could be pre-calculated quite easily.

Having the entire bootstrap loaded also doesn’t help and is unnecessary, I plan to discard bootstrap entirely once I leave the alpha version and have my own (mini) design system implementend.

This all began as a prototype/proof of concept for the fretboard component only, it grew out of hand quite quickly as I got excited with it and started implementing more and more features.

4 Likes

Hi, I think I found a small bug:

When I select Octave 0 (so “all”), the 7th is missing.

Edit: I had “Octave” selected instead of “Notes”. Works now :slight_smile:

2 Likes

Very cool tool though!

2 Likes

Thanks!

In your defense, it’s not your fault. It’s not obvious what those buttons do. I have to rethink those or add some tooltips.

1 Like

I haven’t done any work with Vue.js but if it’s anything like React / Angular it seems like you have a lot of unnecessary re-rendering going on. Try to decouple your components using some sort of Flex (Redux) architecture and use memoization (Reselect) to prevent unnecessary renders.

1 Like