Skip to content

Instantly share code, notes, and snippets.

@KiaraGrouwstra

KiaraGrouwstra/chords.html

Last active May 8, 2021 15:04
Show Gist options
  • Save KiaraGrouwstra/110a5027504d6c5d3ddd10d4bf7ffc3d to your computer and use it in GitHub Desktop.
Save KiaraGrouwstra/110a5027504d6c5d3ddd10d4bf7ffc3d to your computer and use it in GitHub Desktop.
Download ZIP
colors for guitar notes
Raw
chords.html
<html><body><table style="text-align: center; font-weight: bold;"><tbody><tr><td></td><td><h1>maj</h1></td><td><h1>min</h1></td><td><h1>7</h1></td><td><h1>5</h1></td></tr><tr><td><h1>C♯</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/Cs_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Cs_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Cs_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Cs_5.png"></td></tr><tr><td><h1>D</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/D_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/D_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/D_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/D_5.png"></td></tr><tr><td><h1>E♭</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/Eb_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Eb_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Eb_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Eb_5.png"></td></tr><tr><td><h1>E</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/E_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/E_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/E_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/E_5.png"></td></tr><tr><td><h1>F</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/F_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/F_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/F_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/F_5.png"></td></tr><tr><td><h1>F♯</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/Fs_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Fs_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Fs_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Fs_5.png"></td></tr><tr><td><h1>G</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/G_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/G_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/G_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/G_5.png"></td></tr><tr><td><h1>A♭</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/Ab_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Ab_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Ab_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Ab_5.png"></td></tr><tr><td><h1>A</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/A_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/A_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/A_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/A_5.png"></td></tr><tr><td><h1>B♭</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/Bb_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Bb_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Bb_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/Bb_5.png"></td></tr><tr><td><h1>B</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/B_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/B_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/B_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/B_5.png"></td></tr><tr><td><h1>C</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/C_maj.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/C_min.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/C_7.png"></td><td><img src="https://chordify.net/img/diagrams/guitar/C_5.png"></td></tr></tbody></table></body></html>
Raw
guitar_note_colors.js
// run in JS console at https://ramdajs.com/docs/
var frets = R.range(0, 21+1);
var string_offsets = [0,5,10,15,19,24];
var guitar_octaves = R.range(2,6+1);
// var note_names = ['C','C♯/D♭','D','D♯/E♭','E','F','F♯/G♭','G','G♯/A♭','A','A♯/B♭','B'];
// var note_names = ['C ','C♯','D ','D♯','E ','F ','F♯','G ','G♯','A ','A♯','B '];
var note_names = ['C','C♯','D','D♯','E','F','F♯','G','G♯','A','A♯','B'];
var start_octave = 2;
var start_note = 4;
var light_classes = 8;
var notes = 12;
var note_nums = R.range(0, notes);
var degrees = 360;
var percent = 100;
var printColor = ({note, hsl, octave}) => console.log(`%c${note}${octave}`, `background: ${hsl}; color: #fff`);
var td = ({note, hsl, octave}) => `<td style="background: ${hsl}; color: #fff; padding: 10px;">${note}${octave}</td>`;
var calc_hsl = (octave, note) => ({note: note_names[note], hsl:`hsl(${note * degrees/notes}, 100%, ${(octave+1)/light_classes*percent}%)`, octave});
var pretty_octave = 4;
var tones = R.map(note => calc_hsl(pretty_octave, note))(note_nums);
var tone_tds = R.pipe(R.map(x=>[x['note'],x]), Object.fromEntries, R.map(R.pipe(R.assoc('octave',''), td)))(tones);
console.log('notes+colors for any tone in a guitar octave');
R.pipe(
R.map(octave => R.map(note => calc_hsl(octave, note))(note_nums)),
R.chain(R.identity),
R.forEach(printColor),
// R.forEach(octave_data => console.log(...R.chain(({note, hsl, octave}) => [`%c${note}${octave}`, `background: ${hsl}; color: #fff`]))),
// R.forEach(octave_data => console.log(...R.chain(({note, hsl, octave}) => [`%c${note}${octave}`, `background: ${hsl}; color: #fff`])(octave_data))),
// R.map(R.chain(({note, hsl, octave}) => [`%c${note}${octave}`, `background: ${hsl}; color: #fff`])),
)(guitar_octaves)
console.log('notes+colors for the actual guitar positions by fret/string');
var tbl = R.pipe(
R.map(fret => R.map(R.pipe(
offset => offset + fret + notes * start_octave + start_note,
i => ({ octave: Math.floor(i / notes), note: i % 12 }),
({octave, note}) => calc_hsl(octave, note),
))(string_offsets)),
// R.forEach(R.pipe(
// R.forEach(printColor),
// () => console.log(''),
// )),
R.map(R.pipe(
R.map(td),
R.join(''),
(tds) => `<tr>${tds}</tr>`,
)),
R.join(''),
(trs) => `<table style="text-align: center; font-weight: bold;">${trs}</table>`,
)(frets)
document.querySelector('body').innerHTML = `<table><tr><td>${tbl}</td><td>${tbl}</td><td>${tbl}</td><td>${tbl}</td><td>${tbl}</td></tr></table>`;
// var chord_notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B', 'C♯', 'E♭', 'F♯', 'A♭', 'B♭'];
var chord_notes = ['C♯', 'D', 'E♭', 'E', 'F', 'F♯', 'G', 'A♭', 'A', 'B♭', 'B', 'C'];
var major_chords = [
['C♯', []],
['D', ['D','F♯','A']],
['E♭', []],
['E', ['E','G♯','B']],
['F', ['F','A','C']],
['F♯', []],
['G', ['G','B','D']],
['A♭', []],
['A', ['A','C♯','E']],
['B', ['B','D♯','F♯']],
['B♭', []],
['C', ['C','E','G']],
];
var minor_chords = [
['C♯', []],
['D', ['D','F','A']],
['E♭', []],
['E', ['E','G','B']],
['F', ['F','G♯','C']], //A♭
['F♯', []],
['G', ['G','A♯','D']], //B♭
['A♭', []],
['A', ['A','C','E']],
['B♭', []],
['B', ['B','D','F♯']],
['C', ['C','D♯','G']], //E♭
];
var seven_chords = [
['C♯', []],
['D', ['D','F♯','A','C']],
['E♭', []],
['E', ['E','G♯','B','D']],
['F', ['F','A','C','D♯']], //E♭
['F♯', []],
['G', ['G','B','D','F']],
['A♭', []],
['A', ['A','C♯','E','G']],
['B♭', []],
['B', ['B','D♯','F♯','A']],
['C', ['C','E','G','A♯']], //B♭
];
var five_chords = [
['C♯', []],
['D', []],
['E♭', []],
['E', []],
['F', []],
['F♯', []],
['G', []],
['A♭', []],
['A', []],
['B♭', []],
['B', []],
['C', []],
];
// var chords = Object.assign({}, major_chords, minor_chords, seven_chords, five_chords);
var chord_types = ['maj', 'min', '7', '5'];
var chordify_tabs = [['maj', major_chords], ['min', minor_chords], ['7', seven_chords], ['5', five_chords]];
// Object.entries(chordify_tabs)
// .forEach(([chord_type, type_chords]) => {
// console.log(chord_type);
// type_chords.forEach(([k, notes]) => {
// console.log(k);
// notes.forEach((note) => {
// printColor(tones[note]);
// });
// });
// });
var chord_trs = chordify_tabs
.map(([chord_type, type_chords]) => type_chords
.map(([k, notes]) => `<tr><td style="padding: 10px;"><a href="https://chordify.net/img/diagrams/guitar/${k[0]}${k[1] == '♭' ? 'b' : k[1] == '♯' ? 's' : ''}_${chord_type}.png">${k} ${chord_type}</a></td>` + notes.map((note) => tone_tds[note]).join('') + '</tr>').join(''));
document.querySelector('body').innerHTML = `<table>${chord_trs}</table>`;
var flipped = R.transpose(chord_types
.map(chord_type => chord_notes
.map(k => `<td><img src="https://chordify.net/img/diagrams/guitar/${k[0]}${k[1] == '♭' ? 'b' : k[1] == '♯' ? 's' : ''}_${chord_type}.png" /></td>`)));
var tab_trs = R.zip(chord_notes, flipped).map(([note, tds]) => `<tr><td><h1>${note}</h1></td>${tds.join('')}</tr>`).join('');
document.querySelector('body').innerHTML = `<table style="text-align: center; font-weight: bold;"><tbody><tr><td></td>${chord_types.map(k => `<td><h1>${k}</h1></td>`).join('')}</tr>${tab_trs}</tbody></table>`;
var major_progs = {
'C': ['C','F','G'],
'D': ['D','G','A'],
'E': ['E','A','B'],
// 'F': ['F','A♯','C'],
'G': ['G','C','D'],
'A': ['A','D','E'],
// 'B': ['B','E','F♯'],
};
var minor_progs = {
'Cm': ['Cm','Fm','G7'],
'Dm': ['Dm','Gm','A7'],
'Em': ['Em','Am','B7'],
// 'Fm': ['Fm','Bm','C7'],
'Gm': ['Gm','Cm','D7'],
'Am': ['Am','Dm','E7'],
// 'Bm': ['Bm','Em','F7'],
};
var seven_progs = {
'C7': ['C','F','G7'],
'D7': ['D','G','A7'],
'E7': ['E','A','B7'],
// 'F7': ['F','B','C7'],
'G7': ['G','C','D7'],
'A7': ['A','D','E7'],
// 'B7': ['B','E','F7'],
};
var progs = Object.assign({}, major_progs, minor_progs, seven_progs);
Raw
major.html
<html><body><table style="text-align: center; font-weight: bold;"><tbody>
<tr>
<td><h1>C</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/C_maj.png"></td>
<td><h1>D</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/D_maj.png"></td>
<td><h1>E</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/E_maj.png"></td>
</tr><tr>
<td><h1>F</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/F_maj.png"></td>
<td><h1>G</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/G_maj.png"></td>
<td><h1>A</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/A_maj.png"></td>
</tr><tr>
<td><h1>B</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/B_maj.png"></td>
<td><h1>C♯</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/Cs_maj.png"></td>
<td><h1>E♭</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/Eb_maj.png"></td>
</tr><tr>
<td><h1>F♯</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/Fs_maj.png"></td>
<td><h1>A♭</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/Ab_maj.png"></td>
<td><h1>B♭</h1></td><td><img src="https://chordify.net/img/diagrams/guitar/Bb_maj.png"></td>
</tr>
</tbody></table></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment