28:null 29:["$","title",null,{"children":"Jazz Improvisations | NDP | Observable"}] 2e:T49e,function renderStaff (chords, domId, state) { document.getElementById(domId).replaceChildren() if (!chords || !chords.length) return state; state = state || initialState() const renderer = new Vexflow.Renderer(document.getElementById(domId), Vexflow.Renderer.Backends.SVG) renderer.resize(width, 120) const context = renderer.getContext() context.clear() const stave = new Vexflow.Stave(10, 10, width) stave.addClef('treble') //if (state.allNotes.size === 0) // stave.addTimeSignature('4/4') stave.setContext(context).draw() const staveNotes = chords .map(ch => ({chord: ch, ...parseChordSymbol(ch)})) .map(rec => addColors(rec, state)) .flatMap(({ notes, keys, colors, chord }, i) => { let staveNotes if (keys.length === 0) staveNotes = renderRestToStave() else if (keys.length > 6) staveNotes = renderAsScaleToStave({keys, notes, colors}) else staveNotes = renderChordToStave({chord, keys, notes, colors}) return (i === chords.length - 1) ? staveNotes : [...staveNotes, new Vexflow.BarNote()] }) Vexflow.Formatter.FormatAndDraw(context, stave, staveNotes) return state }2f:[] 2c:{"id":"82a179026ae1c5ca","slug":null,"title":"Jazz Improvisations","thumbnail":"be236aee88ba855bdd035ee44e4264c19a74bd8a57f13b61e2282c00fd943ffb","access_level":"public","create_time":"$D2023-04-04T00:32:18.571Z","update_time":"$D2024-06-30T03:31:55.047Z","view_time":null,"first_public_time":"$D2023-04-04T00:32:18.571Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"f58f6aafaf140a3a","login":"ndp","name":"NDP","avatar_url":"https://avatars-next.observableusercontent.com/4c7dc5fd8409bd097671eaebb99af5e6663faf664d04297ecda19cb33f7baabd","tier":"starter_2024"},"version":462,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2eecc93c23905517","login":"ndp","name":"NDP","avatar_url":"https://avatars-next.observableusercontent.com/4c7dc5fd8409bd097671eaebb99af5e6663faf664d04297ecda19cb33f7baabd","tier":null}],"members":[{"type":"individual","id":"2eecc93c23905517","login":"ndp","name":"NDP","avatar_url":"https://avatars-next.observableusercontent.com/4c7dc5fd8409bd097671eaebb99af5e6663faf664d04297ecda19cb33f7baabd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Jazz Improvisations","cells":[{"id":0,"value":"# Jazz Improvisations\n\nWhen I'm soloing I want to know what the \"new\" notes are as \nthe chords change: notes that the listener hasn't heard lately\nor at all (in this song). That's the idea. I may explore other\nideas once I have the basic mechanics working.\n\nI was inspired by [Bob Keller's \"How to Key-Map a Tune\"](https://www.cs.hmc.edu/courses/common/mus84/KeyMaps.pdf), which brings Excel spreadsheets into the jazz (why not?). This approach is a much\nmore conventional jazz theory (and probably better) approach. If\nyou are learning jazz theory, start there.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":276,"value":"In the box below, enter chords (Bb, F, C#min7b5) or modes (D dorian). Separate entries by spaces. \n\nA new line of text will start a new staff (up to 4).\n\nTime is generally ignored, and bar-lines are added between chords.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":81,"value":"viewof chordInput = Inputs.textarea({label: \"Chords\", placeholder: \"F Dm Gm7 C7\", rows: 4, columns: 50 }) // see https://github.com/observablehq/inputs#textarea\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":448,"value":"Some examples: \n\nMahjong:\n```\nFmin11 Eb6/9 \nDbmaj9 Eb6/9 \nD7#9 Ebmin7 Ab7 Dbmaj9 Dbmin7 Gb\nFmin11 Eb6/9\n```\nBeautiful Day\n```\nC#m7 G7#11 B9 C#maj7 G7#11 F#maj7 B9\nEmaj7 Bb+9 Amaj7 D9 Emaj7 Bb+9 Amaj7 D9 \nEmaj7 Bb+9 Amaj7 D9\nEmaj7 Bb+9 Amaj7 D9\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":34,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":443,"value":"There are conceivably different ways to aid the analysis. My original idea was to just show you \"novel\" notes-- notes that haven't appeared yet in the piece. This can be interesting, but maybe you can think of other interesting approaches.\n\nTo tweak the colors, you can edit the colors for \"novel\", or \"never seen before\" notes. You also can individually color notes based on whether they different from the previous chord (or chords before that).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":283,"value":"viewof novelColor = Inputs.color({label: \"Never Seen Note\", value: \"#ff0000\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"viewof prevColor = Inputs.color({label: \"Repeat of Previous Note\", value: \"#333333\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"viewof prevPrevColor = Inputs.color({label: \"Repeat of Note - 2\", value: \"#333333\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"viewof prevPrevPrevColor = Inputs.color({label: \"Repeat of Note - 3\", value: \"#333333\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"viewof defaultColor = Inputs.color({label: \"Default\", value: \"#000\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"line1State = renderStaff(splitLineIntoChords(lines[0]), 'staff1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":348,"value":"line2State = renderStaff(splitLineIntoChords(lines[1]), 'staff2', line1State)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":318,"value":"line3State = renderStaff(splitLineIntoChords(lines[2]), 'staff3', line2State)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"line4State = renderStaff(splitLineIntoChords(lines[3]), 'staff4', line3State)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"function addColors(info, state) {\n const notes = info.notes.map(canonicalNote)\n \n const withColors = {\n ...info,\n colors: \n notes.map((n, i) => {\n let color = novelColor\n if (state.prevNotes.has(n))\n color = prevColor\n else if (state.prevPrevNotes.has(n))\n color = prevPrevColor\n else if (state.prevPrevPrevNotes.has(n))\n color = prevPrevPrevColor\n else if (state.allNotes.has(n))\n color = defaultColor\n return color\n })\n };\n\n // track the colors in the state\n const notesSet = new Set(notes);\n state.prevPrevPrevNotes = state.prevPrevNotes;\n state.prevPrevNotes = state.prevNotes;\n state.prevNotes = notesSet;\n notes.forEach(n => state.allNotes.add(n));\n console.log({all: state.allNotes, notes})\n return withColors\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"function renderChordToStave({chord, name, keys, notes, colors}) {\n let staveNote = new Vexflow.StaveNote({ keys, duration, autoStem: true, auto_stem: true })\n\n const symbol = new Vexflow.ChordSymbol()\n symbol.addText(chord)\n symbol.setHorizontal(2)\n symbol.setStyle({fillStyle: 'black', strokeStyle: 'black'})\n staveNote.addModifier(symbol)\n\n // Add accidentals\n notes.forEach((n, j) => {\n const acc = keys[j].split('/')[0][1]\n if (!acc) return\n const accidental = new Vexflow.Accidental(acc)\n staveNote.addModifier(accidental, j)\n })\n\n // Colorize notes, based on usage\n notes.forEach((n, j) => {\n staveNote.setKeyStyle(j, { fillStyle: colors[j], strokeStyle: colors[j] })\n })\n\n staveNote.setStemDirection(Vexflow.StaveNote.STEM_DOWN)\n\n return [staveNote]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"function renderRestToStave() {\n return [new Vexflow.StaveNote({ keys: ['b/4'], duration: `${duration}r` })]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"function renderAsScaleToStave({keys, notes, colors}) {\n return keys.map((key, i) => {\n const staveNote = new Vexflow.StaveNote({ keys: [key], duration })\n\n // Add accidentals\n const acc = key.split('/')[0][1]\n if (acc) {\n const accidental = new Vexflow.Accidental(acc)\n staveNote.addModifier(accidental, 0)\n }\n\n const color = colors[i]\n staveNote.setKeyStyle(0, { fillStyle: color, strokeStyle: color })\n return staveNote \n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"duration = 'q'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"function splitLineIntoChords(chordInput) {\nreturn (chordInput || '').replaceAll(/([A-G][b#]?)\\s*(ionian|dorian|phrygian|lydian|mixolydian|aeolian|locrian|melodic|harmonic)/gi, '$1+$2').split(/[, \\-|]+/).map(s => s.replaceAll('+', ' ')).filter(Boolean)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"lines = chordInput.split('\\n').map(s => s.trim())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"function notesToKeys (notes) {\n let octave = ['A','Bb', 'B'].includes(notes[0]) ? 3 : 4\n console.log(notes)\n return notes.map((n, j) => {\n if (['C', 'C#', 'Db', 'D', 'D#', 'Eb'].includes(n) && j > 0\n && ['G', 'G#', 'Ab', 'A', 'A#', 'Bb', 'B'].includes(notes[j - 1])) octave += 1\n return `${n.toLowerCase()}/${octave}`\n })\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"parseChord = ChordSymbol.chordParserFactory()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"function parseChordOrMode(s) {\n let notes = parseChord(s).normalized?.notes || []\n if (notes.length) {\n return {\n notes,\n keys: notesToKeys(notes)\n }\n }\n \n const [root, mode] = s.split(' ')\n if (root && mode) {\n const answer = new MusicalScale.default({ root, mode });\n if (answer.noteIds) {\n notes = answer.noteIds.slice(28,36)\n return {\n raw: notes,\n notes: notes.map(n => { \n return n.slice(0, -1)\n }),\n keys: notes.map(n => { \n const m = /(.*)([2345])$/.exec(n); \n //return m;\n return m[1] + '/' + m[2]; \n })\n }\n }\n }\n return { notes: [], keys: []}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"function parseChordSymbol(sym) {\n return parseChordOrMode(sym)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"canonicalNote = (note) => {\n switch (note) {\n case 'A#':\n return 'Bb'\n case 'C#':\n return 'Db'\n case 'D#':\n return 'Eb'\n case 'F#':\n return 'Gb'\n case 'G#':\n return 'Ab'\n default:\n return note\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"function initialState() {\n return {\n prevNotes: new Set(),\n prevPrevNotes: new Set(),\n prevPrevPrevNotes: new Set(),\n allNotes: new Set(),}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"ChordSymbol = import('https://cdn.skypack.dev/chord-symbol')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"MusicalScale = import('musical-scale')\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"Vexflow = import('https://cdn.skypack.dev/vexflow@beta/build/esm/entry/vexflow.js')\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"scale = new MusicalScale.default({root: 'eb', mode: 'ionian'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"