cheap-glitch / fretboarder Goto Github PK
View Code? Open in Web Editor NEW🎸 A web app to visualize scales, chords and arpeggios on all kinds of fretboards.
Home Page: https://fretboarder.app
License: Mozilla Public License 2.0
🎸 A web app to visualize scales, chords and arpeggios on all kinds of fretboards.
Home Page: https://fretboarder.app
License: Mozilla Public License 2.0
better to group the scale into it's mode to make guitarist realize the relation between the scale and it's mode on ./src/components/FretboardSequencesItem.vue
already send #17 before with the scale and it's mode (group it, and separate with carriage return)
this is how to group the scale with it's mode in music theory, as you can see the interval pattern is modified by the sequence (just one interval moving from first into last)
can send the full image of it's if you want or the PR about that
thanks
Fretboarder's "Standard tuning" selection for 5-string banjo is (gCGBD) but the modern standard tuning is actually generally accepted to be Open-G (gDGBD):
https://www.deeringbanjos.com/pages/how-to-tune-a-banjo
https://en.wikipedia.org/wiki/Banjo#Five-string_banjo
nice to have improvisation template to help guitarist play melody with more option they want
it's base on relationship between arpeggio and scale (semitone based relationship)
realize that fretboard.app already have this kind of feature but it's manual (guitarist must need know the music theory about the relationship) n sometime guitarist have no idea to improve melody without this knowledge
similar like 'Add new scale/arpeggio' on fretboard.app but this one 'Add from template' then can choose which template that will load
logically in pydal (web2py or py4web) can use contains e.g.
>>> db.define_table('scale',
... Field('name'),
... Field('semitones', 'list:string'))
<Table scale (id, name, semitones)>
>>> db.scale.semitones.requires = IS_IN_SET(('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'))
>>> db.scale.insert(name='Major Pentatonic', semitones=['0', '2', '4', '7', '9'])
1
>>> major_chords = db(db.scale.semitones.contains('0', '4', '7')).select()
>>> for item in major_chords:
... print item.name, item.semitones
...
Major Pentatonic ['0', '2', '4', '7', '9']
ref
http://web2py.com/books/default/chapter/29/06/the-database-abstraction-layer#list-type-and-contains
with this info will give guitarist an idea how to improvise melody
case
song start in C Major (0, 4, 7), then base on this feature guitarist can load the scales, and remove some that they don't want
green indicate the improvised note (base on the chord or scale play in a song)
can provide another table if you interest, or can learn the logic behind contains in pydal to make computer do the 'grouping' job
thanks
better to have octave info beside the note useful when play in choir
e.g. in standard choir usually use SATB (Sopran Alto Tenor Bass) which every vocal characteristic (male/female) has it's own range (base on octave)
perhaps use button to show octave info for show or hidden the info (recommended because not every guitarist care about octave can hide it, but for the detail guitarist that must play within choir can show the octave)
or
simply put octave info without option to show or hide octave info
which fretboard must be press to play melody with tenor vocal on major third tuning
ref on piano
https://en.wikipedia.org/wiki/Tenor
thanks
intervalsShorthands define is uncommon in ./src/modules/music.js, the flat sign should be written before the note
ref
https://en.wikipedia.org/wiki/List_of_musical_scales_and_modes
export const intervalsShorthands = [
'R',
'♭2',
'2',
'♭3',
'3',
'4',
'♭5',
'5',
'♭6',
'6',
'♭7',
'7',
];
'arp-pow': { intervals: [4], name: 'fifth (powerchord)' },
should be like this because semitone 4 is major 3rd interval
'arp-pow': { intervals: [7], name: 'fifth (powerchord)' },
also some of extended chord like 13th, 11th, you define it with 9th note while the name is not contain 9th
will send the full correction if you interest
thanks
on terminal when execute
npm run serve
This dependency was not found:
* @vue/composition-api in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/VTextSelect.vue?vue&type=script&lang=js&, ./src/hooks/useSelectedOptionLabel.js
git clone https://github.com/cheap-glitch/fretboarder
cd fretboarder
npm install
npm run serve
npm install --save @vue/composition-api
or
add
"@vue/composition-api": "^1.0.0-beta.14",
in ./package.json
thanks
note name in ./src/modules/music.js seems not standard for one note and the others (one note use flat (♭) and the rest use sharp (#) ) e.g.
'Bb': 'B♭',
'C#': 'C♯',
'D#': 'D♯',
'F#': 'F♯',
'G#': 'G♯',
as a result, it also can't define tuning with A# tone in ./src/modules/music.js
better to make it standard, use all flat or all sharp and then have a button to make change for accidental sign
some users's behaviour read conveniently with flat, some conveniently read with sharp
A#
C#
D#
F#
G#
when user click button it will change into
Bb
Db
Eb
Gb
Ab
or vice versa, thanks
Hi,
Nice app. I've been taking a look at it while learning Vue.
I can't build it to run locally though, getting errors with the fortawesome packages doing npm install
eg:
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@fortawesome%2fpro-regular-svg-icons - Not found
Any clues on how to go about building it locally?
Also, is it possible to generate interim Vue code from the pug template?
Not really familiar with pug, and more interested in Vue app construction.
Thanks!
Hello,
I was building the same application in some python flask & svg. But this looks much better.
I know nothing about vue & vuex. Trying to run the modules installer i'm missing these dependancies:
"vuex-plugin-save-state": "^2.0.0",
"@cheap-glitch/scss-mixins": "^1.0.1",
"@cheap-glitch/scss-reset": "^1.0.1",
"@cheap-glitch/stylelint-config-properties-order": "^1.0.0",
"@cheap-glitch/vue-cli-plugin-fontawesome": "^1.0.9",
Any tips where I can find these?
the idea is to show scale or arpeggio in certain ways :
add another parameter 'which string ?' to be input by user, because not every string have a same note (open string note) and add another button to select the method (2nps, 3nps, etc)
thanks
care to have abbreviation of interval name (m3 for Minor third, M3 for Major third, P4 for Perfect fourth, etc) in ./src/modules/music.js
ref
https://en.wikipedia.org/wiki/Interval_(music)#Main_intervals
./src/modules/music.js
export const intervalsNames = [
'Root (R)',
'Minor second (m2)',
'Major second (M2)',
'Minor third (m3)',
'Major third (M3)',
'Perfect fourth (P4)',
'Diminished fifth (d5)',
'Perfect fifth (P5)',
'Minor sixth (m6)',
'Major sixth (M6)',
'Minor seventh (m7)',
'Major seventh (M7)',
];
./src/components/FretboardSequencesItemInterval.vue
p.tooltip__text Highlight {{ name }} notes
remove lowercase() function because m3 (Minor third) is different with M3 (Major third)
thanks
export to jpg and png in ./src/modules/export.js seems unfinished yet
export to jpg and png should provide a file with it's selected format, thanks
npm install
fails with the following error.
ted@ted-MS-7817:~/git/fretboarder$ npm i --legacy-peer-deps
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/vuex-plugin-save-state/-/vuex-plugin-save-state-2.0.0.tgz - Not found
npm ERR! 404
npm ERR! 404 'vuex-plugin-save-state@https://registry.npmjs.org/vuex-plugin-save-state/-/vuex-plugin-save-state-2.0.0.tgz' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm install
Seems to be a small library. Was it renamed? Or just deleted off the face of the earth?
there's a lot of scale and arpeggio in music, better to separate it using html select tag
add another html select tag to choose 'arpeggio or scale', then when it's select scale, it will load all scales defined, vice versa
https://fretboarder.app > export > svg
when using guitar 6 strings with standard tuning :
on screen
E
B
G
D
A
E
in download file
E
A
D
G
B
E
seems like it flip vertically
what user expected is WYSIWYG, downloaded file fretboard position same like on screen display
thanks
nice to have more scale pentatonic variant, hexatonic variant, heptatonic variant, octatonic variant like bebop, etc
ref
https://en.wikipedia.org/wiki/List_of_musical_scales_and_modes
seems blues minor and blues major is incorrected you define it as hexatonic (6th tone) while it should goes to pentatonic (5th tone)
'majb': { intervals: [2, 3, 4, 7, 9], name: 'blues major' , positions: [[-1, 3], [1, 5], [3, 7], [6, 10], [9, 12]] },
'minb': { intervals: [3, 5, 6, 7, 10], name: 'blues minor' , positions: [[ 0, 3], [2, 6], [4, 8], [7, 11], [9, 13]] },
should be
'bmin': { intervals: [3, 5, 8, 10], name: 'blues minor' },
'bmaj': { intervals: [2, 5, 7, 9], name: 'blues major' },
also, the positions, not sure it will be used when user change the tunings, e.g. when using symmetrical tuning like major third on 6th strings guitar where the note will repeated every 4 frets
when using symmetrical tuning like minor third where the note repeated every 3 frets
when using symmetrical tuning like augmented fourth where the note repeated every 6 frets
all the positions define in music.js will not use when user select symmetrical tuning
tested work on my local, to add almost scale on link wiki above, will send the code if you interest
nice to have more tunings (on guitar and bass 5th & 6th strings)
ref
https://en.wikipedia.org/wiki/List_of_guitar_tunings
guitar regular tuning and some various open tuning (major third, minor third, etc) and bass 5th & 6th strings
tested work on my local, will send the code if you interest
ERROR Failed to compile with 1 errors 07:42:27
error in ./src/main.js
Syntax Error: /Users/sugizo/Downloads/learn/fretboarder/node_modules/eslint/lib/cli-engine/cli-engine.js:406
} catch {
^
SyntaxError: Unexpected token {
@ multi (webpack)-dev-server/client?https://localhost:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js (webpack)-inject-plugin/dist/webpack-inject-plugin.loader?id=webpack-inject-module-1 ./src/main.js
git clone https://github.com/cheap-glitch/fretboarder
cd fretboarder
npm install
npm run serve
https://fretboarder.app wonderful piece of arts, helpful to widen guitarist knowledge about scale, arpeggio and it's variation feature
thanks
(Assuming the implemenation of the banjo fifth string per #26 ...)
A capo on a 5-string banjo does not affect the 5th string (at least, when placed at frets 1 through 5). That said, it is not unreasonable that Fretboarder "assumes" that when using a capo on a 5-string banjo that the 5th string will (somehow) be tuned up by the same number of frets. However, a nice feature would be separate "5th string capo" parameter to account for various arrangements of railroad spikes or other mechanism.
The 5-string banjo's fifth string starts at the fifth fret, but Fretboarder doesn't account for that. In Fretboarder, the indicated notes on the fifth string are all incorrectly shifted by five frets.
Implementation idea: Keep a "zero_fret" member for each string, set to 0 for all guitar/banjo/violin/uke strings except the banjo's fifth where its set to 5. Apply the zero_fret offset to all note/interval calculations. Draw the banjo's fifth string only up to the fifth fret.
nice to have flip fretboard vertically because some might learn fretboard position
E
B
G
D
A
E
some learn fretboard, (like learning from guitarist in front of you (mirror) )
E
A
D
G
B
E
perhaps add button to accomodate this feature like 'left hand freting' which is flip fretboard horizontally
thanks
Every note is a root note because root notes are the foundational note for a chord. https://en.wikipedia.org/wiki/Root_(chord)
The first note of a scale is called the tonic (not root). https://en.wikipedia.org/wiki/Tonic_(music)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.