cocotte is a visualization app for the guitar. It shows:
- the full arpeggio of a given chord on the fretboard (white dots for the root, black dots for other notes)
- possible chord fingerings of this arpeggio (grouped by different colors)
For a given D7 chord, each colored fingerings includes the different notes of the chord (D-F-A-C) once and only once. Several fingerings are displayed:
- depending on a given voicing (the order in which the notes are stacked, for instance drop 2 is F-D-A-C)
- on a preferred bass (per string or per note)
With the following rules:
- prefer adjacent string sets and least variance on fret range when several fingerings are possible
- respect a max fret range (7 frets, hard to play but displayed for knowledge -— can still be played as an arpeggio)
- possibly include open string notes if no other option is possible
cocotte also provides a basic tool to create and share grid of chords, intended to try, train and memorize fingerings.
- discover voicings and fingerings
- memorize intervals, find transitions, discover similarities between successive chords
- in play mode: try several fingerings (stay on a region VS navigate)
- fingering "finder"
- chord and grid notation tool
- player
- sharing of tunes/grids
- listing community tunes under GitHub issues
cocotte focuses on:
- a restricted set of 3 and 4-notes chords (but which should be sufficient for learning purposes and includes chords from major and harmonic minor scales plus a few popular ones)
- exhaustivity of voicings and fingerings for these chords
Voicing exhaustivity means they are displayed with no preference regarding esthetics or convenience. You may find some sound better than others (a typical counter example: voicing including large intervals are included in cocotte). Drop 4 and drop 3-4 may be found rarely practical to play nor balanced. They are shown for completion, illustrating for instance the relation between close and drop 4.
5 and 6-notes chords (7-note chords being more difficult to play on the guitar ^^) can't be treated systematically. Many fingerings becomes unusable for a given inversion and voicing, or require to omit a given note. In other words: your experience/taste is needed to decide how to play them (and hopefully what you learned for 3 and 4-note chords will serve as a ground).
Additional reading might help contextualize the material provided by cocotte. Let's just cite a few authors: Brett Wilmott, Mick Goodrick, Ted Greene or Peter O'Mara. If you're a French reader, I recommend books by Éditions Outre Mesure (Guitaristes, a multi-author book in two volumes and Jazz mode d'emploi by Philippe Baudoin) and also Technique pour Guitaristes de Tous Styles by Pierre Cullaz, which impulsed the idea of cocotte.
The following symbols are used:
∆
stands for a major seventh (7M)+
for an augmented fifth°
is the diminished chordø
is the half diminished chord
- close means playing the chord in straight ascending order, D-F-A-C for D7
- dp is used as short for "drop"
- dp 2 means dropping (one octave down) the second note of the chord
- dp 2²3 is a custom shortened notation that means "double drop 2 and drop 3"
cocotte is implemented in a relaxed functional fashion using Ramda, TypeScript and React. It's a front-end-only project.
Musical data structures are described in src/domain/types
, each voicing and fingering is calculated (rather than statically defined).
To start the project locally, clone this repository and run:
yarn start
To update GitHub pages-based website:
yarn deploy
Here's a list of ideas to be implemented:
- more accurate timer than setInterval (see Web Audio API)
- other highlight possibility: focus on a given part of the fretboard (for instance: around fret 8)
- possibility to change tuning or instrument (number of strings)
- move chords around the grid with drag'n'drop
- other time signatures than 4/4 and possibility to split grid cells