Fretful.io (scales/chords fretboard web visualizer)

I’m glad it has been useful to you!

3 Likes

I just did a small update.

Added the notes/degrees and right/left hand features

And the main domain is now: fretful.io

5 Likes

Brilliant! Thank you.

4 Likes

I’ve been using Fretful in lefty mode. Just one (very minor) thing: the light gray color fretting ‘inlay’ dots seems to be off by one fret (only in lefty mode). For example, below is C Major, and of course we should fret at the double dots (12th), EADG. But, in lefty mode, the double dots are shown at thirteenth fret. I’ve tried to show this, below.

No biggie, though. I’m still finding this super useful! :slightly_smiling_face:

5 Likes

You’re right! The inlays are not reversing. I’ll fix it with the next update! Thank you @sfadams!

4 Likes

Just fixed it @sfadams!

Also added an experimental feature. You can now listen to the scales (ascending and descending)

It mirrors the notes playing on the fretboard and keyboard. So you can follow what’s happening and study the shapes.

6 Likes

Excellent! Many thanks once again.

4 Likes

Fixed! Thank you!

It’s styled differently than the regular notes to distinguish as the string note

3 Likes

My pleasure! If you remember anything else feel free to share

4 Likes

One thing I noticed, it’s only showing sharp notes. I’ll implement a toggle button (like the notes/degrees) to choose the prefered alteration and will also implement the rule one-note-per-scale when possible (the minor should be showing flats instead of sharps for instance)

5 Likes

Ok that’s fixed. Now you can choose between: auto, flat and sharp. Auto will determine which accidental should be shown based on the scale’s degrees. Flat and sharp force them to be either. The degrees showing above the notes on the visualizer were fixed also.

Beyond the fixes, I added direction control on the scale playback and now it loops until you decide to stop. Play around with it, randoms can get fun.

3 Likes

This is freaking awesome - absolutely the best thing i have seen for Bass ever - thanks for sharing!

2 Likes

Thank you for your kind words! Keep in mind it’s still an early release, it’s possible it’s not yet 100% trustworthy!

2 Likes

Just did an update. It now supports mobile!

This is now implemented!

Changelog:

[alpha-1.2.0] - 2020-08-05

Added

  • Added mobile support
  • Added Visualizer bpm control
  • Added Misc section to settings sidebar
  • Added highlightRoot and groupByColor support to keyboard and visualizer
  • Added settings persistance

Changed

  • Moved left-hand orientation to settings sidebar

3 Likes

Would love to have some feedback from teachers (@JoshFossgreen and @Gio - if there are more teachers, better!) . Do you think this adds value to the teaching world? Or do you think this is more of a gimmick?

2 Likes

Cool idea! I think this has a very specific value - as a crutch/temporary reference as people are learning to internalize all this information. I don’t recommend anyone get stuck on a tool like this for more than some months, because the goal should be to look at a bass neck and make it all appear using only native apps inside your brain. :slight_smile:

So yes, it has value, but maybe not the range of value people sometimes assign tools like this. That’s my unfiltered take!

Some stuff to fix, using B minor as an example:
Screen Shot 2020-08-05 at 3.07.49 PM

B minor is a sharp key, not a flat key, so you need to build in some restrictions so you don’t end up with keys having the wrong kind of accidentals. It’s not “allowed” for a key to skip letters or have duplicate letters (i.e. Ab and A).

Screen Shot 2020-08-05 at 3.07.55 PM
Similar issue here - this scale doesn’t have a #2 or a #6, it’s a b3 and a b7. No scale is allowed to skip numbers, if you’re using 7 note scales.

If this tool is only intended for scale references (versus intervals, for example), there really shouldn’t even be a flat/sharp/auto function, because there’s only one correct option for a given key.

Another source of possible issues - once you select a scale, there should be a limitation on root note spelling choices - for example, you can’t have a G# major scale, it’s Ab major 100% of the time (because 8 sharps = yuck). So maybe put the scale choice first, and then have it grey out roots that are illogical (or highly illogical, Captain).

Cool layout and stuff though, lots of potential!

8 Likes

Thank you so much @JoshFossgreen! As usual, you make it easy to understand. I was aware some of the enharmonics were off. I’ll dive into the code and fix things up and then I’ll answer you properly.

“music is simpler than you think”
said no one ever that had to devise data structures for music

6 Likes

Oh no. Now I’m going to be tempted to dig into my hobby for interview questions :slight_smile:

3 Likes

Thanks for the heads up and solicitation of input!

I think any teaching tool that helps someone learn a thing is helpful.
If this helps people, great.

I agree with Josh that this should be a temporary tool, or a reference tool, and not a substitute for actual fretboard memorization.

Having said that, I’ve never had success with these charts. Not as a player or a teacher. I’d love to know who gleans benefits from these and what they are specifically.

It often seems to me more of an abstact visualization / theory exercise than a practical approach to learning a thing on a fretted instrument.

Something that is position oriented (like @JoshFossgreen’s beast major scale exercises) take this type of fretboard theory and apply it in ways that stretch the brain, hand, and fretboard skills.
So, again, I come back to the idea that this is a resource that informs other more practical aspects of practice.

That is a highly personalized and individual take on it, and I would welcome the feedback of folks who really jive with fretboard diagrams and layouts as learning tools.

5 Likes

That’s what I use it for. Basically if I’m lazy and don’t want to count up from the frets I already remembered I look it up there. But then again the more I use it the less I need it.
I also looked up the shapes of modes.
Overall I agree that it’s more of a reference tool. But a useful one for students like me who like to have reliable resources instead of having to google it every time.

An Idea I had when reading T_dub explaining a training and fingering exercise is that it could be useful for communicating/exchanging finger exercises as it also has an option to add finger numbers.

4 Likes