29:null 2a:["$","title",null,{"children":"Just intonation ratio player | Elliot Winkler | Observable"}] 2f:Ta5e,{ const details = html`

${instructionsAreClosed ? "Show instructions" : "Hide instructions"}

Instructions

${md` Contained in the dropdown below is a set of classic and modern just intonation and equal temperament scales. You can select any of them and press "Play scale" to hear them. The graph below is also interactive. You can long press on a white dot to hear the tone at that point in the circle; press on a ring to hear the interval between the two tones that it subtends. If you want to make your own chords or scales, the text field below takes a comma-separated list of intervals in the form of ratios such as \`5/4\`. Each interval is applied to a base frequency of 440 Hz, which you'll typically want to specify in the first line using \`1/1\`. For instance, if you type the following list into the field below, you will hear a major chord: ~~~ 1/1 5/4 3/2 ~~~ You can use math to modify existing intervals. For instance, say you want to produce a diminished chord. This is done by moving up by a major third from the tonic, then moving up a second time, then ending with the octave. The application of an interval multiple times is achieved by using exponentiation: ~~~ 1/1 5/4 5/4 ** 2 ~~~ You can also use multiplication or division as well if you want to move an interval up or down by another interval entirely. For instance, moving up by a major third and a fifth produces a major seventh: ~~~ 1/1 5/4 5/4 * 3/2 ~~~ You can go wild with the math if you so choose. This does the same thing: ~~~ 1/1 (5/4 ** 2) / 3 3/2 ~~~ Note that so far we've just been building chords. You can also use this text box to build scales as well. In this case, you might find it useful to reuse intervals from previous lines. So let's say that you wanted to build an hexatonic scale (that's with 6 tones). You might could do something like this: ~~~ 1/1 9/8 9/8 ** 2 9/8 ** 3 9/8 ** 4 9/8 ** 5 ~~~ But that gets repetitive, so you can also use \`_\` to reuse the results of a previous line: ~~~ 1/1 _ * 9/8 _ * 9/8 _ * 9/8 _ * 9/8 _ * 9/8 ~~~ Finally, if you need to silence a line or part of a line, you can use \`#\`: ~~~ 1/1 #3/2 #4/3, 5/3 #5/4 6/5, 7/5#, 8/5, 9/5, 7/6, 11/6 #8/7, 9/7, 10/7, 11/7, 12/7, 13/7 ~~~ `}

` details.addEventListener("click", (event) => { event.preventDefault(); details.open = !details.open; localStorage.setItem("instructionsAreClosed", String(!details.open)); mutable instructionsAreClosed = !details.open; }); details.open = !instructionsAreClosed; return details; }30:Tcb3,form = { let form; let fractionsField; let scaleDropdown; let sortInReverseCheckbox; const defaultData = { customScale: "" }; let data = _.clone(defaultData); const update = (args) => { if ("sortInReverse" in args) { sortInReverseCheckbox.checked = args.sortInReverse; } if ("presetScaleId" in args) { const scale = scales[args.presetScaleId]; if (scale == null) { update(defaultData); return; } else { fractionsField.value = scale.ratios.join("\n"); scaleDropdown.value = args.presetScaleId; sortInReverseCheckbox.checked = scale.sortInReverse; if ("drawEqualDivisions" in scale) { args = { ...args, drawEqualDivisions: scale.drawEqualDivisions }; } args = _.omit(args, "customScale"); } } else { if ("customScale" in args) { fractionsField.value = args.customScale; } scaleDropdown.value = "_nothing"; args = _.omit(args, "presetScaleId"); } try { form.value = { enteredRatios: determineRatios(fractionsField), sortInReverse: sortInReverseCheckbox.checked, drawEqualDivisions: args.drawEqualDivisions }; Object.assign(data, args); localStorage.setItem("input", JSON.stringify(data)); fractionsField.classList.remove("has-error"); } catch (e) { if (e.name === "SyntaxError") { fractionsField.classList.add("has-error"); console.error( `${e.name}: ${e.message} ` + `(${e.location.start.line}:${e.location.start.column}:${e.location.start.offset})` ); } else { throw e; } } }; fractionsField = html` `; fractionsField.addEventListener("input", () => { update({ customScale: fractionsField.value }); }); scaleDropdown = html` `; _.each(scales, (scale, id) => { const option = html``; scaleDropdown.appendChild(option); }); scaleDropdown.addEventListener("input", () => { const presetScaleId = scaleDropdown.value; if (presetScaleId !== "_nothing") { update({ presetScaleId }); } }); sortInReverseCheckbox = html``; sortInReverseCheckbox.addEventListener("input", () => { update({ sortInReverse: sortInReverseCheckbox.checked }); }); const sortInReverse = html` ${sortInReverseCheckbox} Tones are listed in reverse order `; form = html` `; form.addEventListener("submit", (event) => event.preventDefault()); form.fractionsField = fractionsField; const previousInput = localStorage.getItem("input"); if (previousInput == null) { update({ presetScaleId: "pythagorean" }); } else { update(JSON.parse(previousInput)); } return form; }31:T737,{ const playScaleButton = html` `; playScaleButton.addEventListener("click", (event) => { event.preventDefault(); if (audioIsPlaying) { _.each(audioByFrequency, (audio, frequency) => { audio.synth.triggerRelease(); }); mutable audioIsPlaying = false; } else { const duration = 0.5; tones.forEach((tone, index) => { audioByFrequency[tone.frequency.valueOf()].synth.triggerAttackRelease( tone.frequency.valueOf(), duration, `+${index * duration}` ); }); mutable audioIsPlaying = true; // There's probably a better way to do this, but ehhh setTimeout(() => { mutable audioIsPlaying = false; }, ((formOutput.enteredRatios.length + 2) * duration) * 1000); } mutable audioIsPlaying = !audioIsPlaying; }); const playChordButton = html` `; playChordButton.addEventListener("click", (event) => { event.preventDefault(); if (audioIsPlaying) { _.each(audioByFrequency, (audio, frequency) => { audio.synth.triggerRelease(); }); mutable audioIsPlaying = false; } else { const duration = 1.5; _.each(audioByFrequency, (audio, frequency) => { audio.synth.triggerAttackRelease(frequency, duration); }); mutable audioIsPlaying = true; // There's probably a better way to do this, but ehhh setTimeout(() => { mutable audioIsPlaying = false; }, duration * 1000); } }); return html` ${playScaleButton} ${playChordButton} `; }32:T5d3,scales = ({ pythagorean: { name: "Original Pythagorean diatonic scale", ratios: [ "2", "_ / 256/243", "_ / 9/8", "_ / 9/8", "_ / 9/8", "_ / 256/243", "_ / 9/8", "1" ], sortInReverse: true }, archyteanEnharmonic: { name: "Archytean enharmonic", ratios: [ "2", "_ / 5/4", "_ / 36/35", "_ / 28/27" ], sortInReverse: true }, archyteanChromatic: { name: "Archytean chromatic", ratios: [ "2", "_ / 32/27", "_ / 243/224", "_ / 28/27" ], sortInReverse: true }, archyteanDiatonic: { name: "Archytean diatonic", ratios: [ "2", "_ / 9/8", "_ / 8/7", "_ / 28/27" ], sortInReverse: true }, "12tet": { name: "Major scale (12-TET)", ratios: [ "1", "_ * edo(12, 2)", "_ * edo(12, 2)", "_ * edo(12, 1)", "_ * edo(12, 2)", "_ * edo(12, 2)", "_ * edo(12, 2)", "2" ] }, "5tet": { name: "Pentatonic scale (5-TET)", ratios: [ "1", "_ * edo(5, 1)", "_ * edo(5, 1)", "_ * edo(5, 1)", "_ * edo(5, 1)", "2" ], drawEqualDivisions: 5 }, "7tet": { name: "Heptatonic scale (7-TET)", ratios: [ "1", "_ * edo(7, 1)", "_ * edo(7, 1)", "_ * edo(7, 1)", "_ * edo(7, 1)", "_ * edo(7, 1)", "_ * edo(7, 1)", "2" ], drawEqualDivisions: 7 } })33:T68a,parseInput = (text) => { const evaluate = (value, { lastRatio = null } = {}) => { if (value == null) { throw "Couldn't evaluate expression, as it is null for some reason"; } else if (typeof value === "number") { return Fraction(value, 1).simplify(); } else if (value.type === "ExpressionList") { return value.list.reduce((ratios, expression) => { const ratio = evaluate(expression, { lastRatio: ratios[ratios.length - 1] }); if (ratio == null || (ratios.length > 0 && ratios.some(r => r.equals(ratio)))) { return ratios; } else { return ratios.concat([ratio]); } }, []); } else if (value.type === "IgnoredLine") { return null; } else if (value.type === "Placeholder") { return lastRatio; } else if (value.type === "Fraction") { return Fraction(value.numerator, value.denominator).simplify(); } else if (value.type === "EdoCalculation") { return Math.pow(2, (value.steps / value.numDivisions)); } else if (value.type === "Expression") { const ratio = evaluate(value.subject, { lastRatio }); return value.modifiers.reduce((finalRatio, modifier) => { if (modifier.operator === "*") { return finalRatio.mul(evaluate(modifier.operand)); } else if (modifier.operator === "/") { return finalRatio.div(evaluate(modifier.operand)); } else if (modifier.operator === "**") { return finalRatio.pow(modifier.operand); } }, ratio); } else { throw new Error(`Unrecognized value ${value}`); } }; return evaluate(expressionParser.parse(text.trim())); }34:T604,audioByFrequency = { if (this == null) { return _.reduce(tones, (object, tone) => { const synth = buildSynth(); if (audioIsPlaying) { synth.triggerAttack(tone.frequency); } return { ...object, [tone.frequency]: { tone, synth } }; }, {}); } else { const newAudioByFrequency = _.clone(this); const previousFrequencies = Object.keys(newAudioByFrequency); const currentFrequencies = Object.keys(tonesByFrequency); const addedFrequencies = _.difference(currentFrequencies, previousFrequencies); const removedFrequencies = _.difference(previousFrequencies, currentFrequencies); const sameFrequencies = _.intersection(previousFrequencies, currentFrequencies); removedFrequencies.forEach(frequency => { const removedSynth = this[frequency].synth; removedSynth.triggerRelease(); setTimeout(() => { removedSynth.disconnect(Tone.Master); removedSynth.dispose(); }, removedSynth.envelope.release * 1000); delete newAudioByFrequency[frequency]; }); addedFrequencies.forEach(frequency => { const tone = tonesByFrequency[frequency]; const synth = buildSynth(); if (audioIsPlaying) { synth.triggerAttack(frequency); } newAudioByFrequency[frequency] = { tone, synth }; }); sameFrequencies.forEach(frequency => { newAudioByFrequency[frequency].tone = tonesByFrequency[frequency]; }); return newAudioByFrequency; } }35:T728,expressionGrammar = ` ExpressionList = list:ExpressionPair+ { return { type: "ExpressionList", list: list } } ExpressionPair = IgnoredLine / Newline+ line:IgnoredLine { return line; } / ExpressionSeparator expr:Expression { return expr; } / expr:Expression { return expr; } ExpressionSeparator = Space* "," Space* / Newline+ Expression = UnboundedExpression / BoundedExpression IgnoredLine = "#" NoNewline+ { return { type: "IgnoredLine" }; } UnboundedExpression = subject:Subject modifiers:Modifier* { return { type: "Expression", subject: subject, modifiers: modifiers }; } BoundedExpression = "(" expr:UnboundedExpression ")" { return expr; } Subject = Placeholder / BoundedExpression / EdoCalculation / Number Placeholder = "_" { return { type: "Placeholder" } } EdoCalculation = "edo(" Space* numDivisions:Integer "," Space* steps:Integer Space* ")" { return { type: "EdoCalculation", numDivisions: numDivisions, steps: steps }; } Number = Fraction / Integer Integer = numbers:[0-9]+ { return parseInt(numbers.join(""), 10); } Fraction = n:Integer "/" d:Integer { return { type: "Fraction", numerator: n, denominator: d }; } Modifier = ExponentiationModifier / MultiplicationModifier / DivisionModifier ExponentiationModifier = Space* operator:"**" Space* operand:Integer { return { type: "Modifier", operator: operator, operand: operand }; } MultiplicationModifier = Space* operator:"*" Space* operand:Expression { return { type: "Modifier", operator: operator, operand: operand }; } DivisionModifier = Space* operator:"/" Space* operand:Expression { return { type: "Modifier", operator: operator, operand: operand }; } Space = " " Newline = "\\n" NoNewline = [^\\n] `36:[] 2d:{"id":"61b0bbfdceed1668","slug":"just-intonation-ratio-player","title":"Just intonation ratio player","thumbnail":"6bde27f4fca60892f8088751a1d21c22b310ae79f12470e55e6f4cf922b6b574","access_level":"public","create_time":"$D2019-05-05T21:43:33.114Z","update_time":"$D2019-07-14T09:50:30.224Z","view_time":null,"first_public_time":"$D2019-05-06T04:18:56.778Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"48ba5f2b7419c764","login":"mcmire","name":"Elliot Winkler","avatar_url":"https://avatars-next.observableusercontent.com/e6cdeebbaceab05aa3ab82f8d651fade56434a1921dd0cebea3dc3af51a78522","tier":"starter_2024"},"version":1028,"publish_version":1028,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbea7593e7183e43","login":"mcmire","name":"Elliot Winkler","avatar_url":"https://avatars-next.observableusercontent.com/e6cdeebbaceab05aa3ab82f8d651fade56434a1921dd0cebea3dc3af51a78522","tier":null}],"members":[{"type":"individual","id":"dbea7593e7183e43","login":"mcmire","name":"Elliot Winkler","avatar_url":"https://avatars-next.observableusercontent.com/e6cdeebbaceab05aa3ab82f8d651fade56434a1921dd0cebea3dc3af51a78522","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"Just intonation ratio player","cells":[{"id":0,"value":"md`# Just intonation ratio player`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"md`\nThis is an interactive tool for generating chords and scales using just intonation or equal temperament.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"{\n let tonesWithoutEnd;\n \n if (\n tones.length > 0 &&\n (formOutput.sortInReverse && tones[tones.length - 1].ratio.equals(tones[0].ratio.div(2))) ||\n (!formOutput.sortInReverse && tones[tones.length - 1].ratio.equals(tones[0].ratio.mul(2)))\n ) {\n tonesWithoutEnd = tones.slice(0, -1);\n } else {\n tonesWithoutEnd = tones;\n }\n\n return renderToneWheel(tonesWithoutEnd, {\n includeInversions: true,\n hideDuplicates: true,\n drawEqualDivisions: formOutput.drawEqualDivisions == null ? 12 : formOutput.drawEqualDivisions,\n sortInReverse: formOutput.sortInReverse\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"md`---\n\n## Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"determineRatios = (fractionsField) => {\n if (isEmpty(fractionsField.value)) {\n return [];\n } else {\n return parseInput(fractionsField.value);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"tonesByFrequency = tones.reduce((object, tone) => {\n return { ...object, [tone.frequency.valueOf()]: tone };\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"tones = {\n const minRatio = _.minBy(formOutput.enteredRatios, ratio => ratio.valueOf());\n const maxRatio = _.maxBy(formOutput.enteredRatios, ratio => ratio.valueOf());\n return formOutput.enteredRatios.map((ratio, index) => {\n return new GraphableTone({\n origin: origin,\n ratio: ratio,\n index: index,\n alwaysShowLabel: formOutput.sortInReverse ? ratio.equals(maxRatio) : ratio.equals(minRatio)\n })\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"expressionParser = PEG.generate(expressionGrammar)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"buildSynth = () => {\n return new Tone.Synth({\n oscillator: {\n type: \"sine\",\n volume: -20\n },\n envelope: {\n attack: 0.05,\n decay: 0,\n sustain: 1,\n release: 1.2\n }\n }).connect(Tone.Master);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"isEmpty = (value) => value == null || value === \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"inPairs = (array, fn) => {\n for (let i = 0; i < array.length - 1; i++) {\n fn([array[i], array[i + 1]]);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"origin = Fraction(originFrequency);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"md`## State`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof formOutput = form","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"new Expanding(form.fractionsField);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"mutable audioIsPlaying = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"mutable instructionsAreClosed = localStorage.getItem(\"instructionsAreClosed\") === \"true\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"Expanding = require(\"expanding-textareas@1.0.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"import { convertFractionToCents } from \"@mcmire/tone-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"import { renderToneWheel } from \"@mcmire/tone-wheel\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import {\n renderGraph,\n augmentGraphToPlayTones,\n reduceFraction,\n colorsFor,\n originFrequency,\n transitionDuration,\n pointRadius,\n Fraction,\n Tone,\n GraphableTone,\n _,\n d3\n}\nfrom \"@mcmire/tone-map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"PEG = require(\"https://bundle.run/pegjs@0.10.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"