moonwave99/fretboard.js

Feature Request : Full scale with boxes pre taged on notes via class name

Aduffy opened this issue · 8 comments

Would you consider adding a built in function to create all notes of the scale (frets 0 to 24) with pre defined class names to identify the various box shapes they belong to?

Basically expanding on the idea you had here
Originally posted by @moonwave99 in #12 (comment)

but instead of just having the box 1,2,3,4.... it would also let me high light box 1-5 of full major scale, box 1-5 of penatonic, or position 1-7 of 3NPS shapes. All just by toggling the classes required.

I could abstract the merging code of that example in a mergeBoxes / flattenBoxes tool, that from N boxes returns a list of positions, each with a reference to the each box it belongs to, e.g.:

const box1 = [{ string: 6, fret: 0 }, { string: 6: fret: 3}];
const box1 = [{ string: 6: fret: 3},  { string: 6, fret: 5 }];

const boxes = flattenBoxes([
  box1,
  box2
]);

// boxes would contain:
[
  { string: 6, fret: 0, boxes: [1] },
  { string: 6, fret: 3, boxes: [1, 2] }
  { string: 6, fret: 5, boxes: [2] }
]

Every dot would have .dot-boxes-$n classes accordingly (multiple if needed).

There are 2 areas where i was thinking this could be streamlined.

First using your original example the user (coder) has to first know and manually define all of the potential boxes that would appear in the scale

so for each Scale : for example A Minor

const boxes = [
  { box: 3, root: 'A2', mode: 'minor' },  
  { box: 4, root: 'A2', mode: 'minor' },
  { box: 5, root: 'A2', mode: 'minor' },
  { box: 1, root: 'A2', mode: 'minor' },
  { box: 2, root: 'A3', mode: 'minor' }
];

Plus i would want to see the shapes right up to the 24th fret..
And then i want boxes for 3 differerent shapes.. CAGED, CAGED Penetonic, and 3NPS
So building those all manually would be a bit of work.

Second because I am hoping to be able to have class names on the dotes for all 3 shapes styles just using the box number does not work

the class names would need to be something like

[
  { string: 6, fret: 0, boxes: ['caged1', 'caged2', 'penatonic1', 'tnps2']  },
 ...
]

idealy you one could call something like

const cmaj = getsScale("C", "Major");

and that would result in your flattened boxes with notes taged with all possible "box shapes" they can be played in .

I see your point ^^ I have to say that my whole fretboard navigation idea changed in the latest months, and I am not a big fan of the box-first approach anymore.

Unfortunately the music related part of the code is completely box-first based (while the rendering part is music agnostic, at least).

One could rewrite the logical fretboard as a [n of strings] x [n of frets] matrix, all filled chromatically based on the tuning (which would be an improvement since now the tuning is fixed to standard), then extract / highlight the needed positions.

Selection could be done with both fretboard and pitch coordinates, e.g. getScale('C', 'major').highlight({ from: 'C3', to: 'C4' }).

The box notion itself could be aliased to the box bounds, e.g. A first minor pentatonic box -> Am pentatonic on 5th position.

If I'll get inspired, I'll draft something later this week and work on it in a separate branch.

Great, im happy to help test or provide feedback! (or donate a beer / coffee or 2 as needed!) ... Any chance the naming convention of minor penitonic box shapes could be included in this ?? :-P

Thanks again for the great work!

its a little hacky, but here is my proof of concept full scale

http://music.duffield.me/major.php

Note: my coding skills are just enough to get me the result I want, but the path their is probably fairly ugly ! LOL

Looks very nice, great to see the library in action!

By the way, you may want to check #18 , it helps you directly with this task.

To run the examples, check out the branch locally.

ok so as of Version .2 the CAGED, TNPString, pentatonic functions are no available at all, and replace by the new Fretboard system?

Yes exactly, please refer to the updated docs and examples for usage.

In case you need to use the legacy code in any project, install any 0.1.x version.