30:T62d,# The Musical Test Kitchen Ratios are the building blocks of music. Our ears and voices are designed to match much more precise ratios than you would think! You can think of the ratios between notes as flavors, and today we will make a recipe together. | | | | - | - | |${sparkseesaw([{Blue:1,Pink:2}])} | The easiest and generally most pleasing ratio is **2:1**, also called an *octave*. Think: "Some-_where_ over the rainbow..." | |${sparkseesaw([{Blue:3,Pink:2}])} | The second ratio we can build is **3:2**, also called a _perfect fifth_. | |${sparkseesaw([{Blue:5,Pink:4}])} | The third ratio we can build is **5:4**, also called a _major third_. | |${sparkseesaw([{Blue:8,Pink:7}])} | As ratios get more complicated, they also get harder to perform. The **8:7** ratio in "Take On Me" can be very difficult to sing without training. | The three notes in 1:1, 5:4, and 3:2 make a _major chord_, which are usually the first you learn on guitar. While our ears and voices have a continuous range, most instruments are more limited. Pianos and fretted string instruments need to be set to a fixed system, called an _equal temperament_. Musicians typically use _cents_ to describe ratios between notes in a standardized way. Technical notes:
_This builds on my equal temperament generator to find musically significant ratio approximations for any given equal temperament. Inspired by, and uses formulas from, Kyle Gann's "The Arithmetic of Listening"._31:T484,
## Start! ### Step 1: Build an equal temperament Here, we will construct an imaginary piano. You have decided the piano will have ${edoGeneratorInputs.octavesInput} sets of ${edoGeneratorInputs.edoInput} keys each.
This gives you ${frequencyRatios.length} unique musical ratio-flavors to choose from!
Typical pianos have between 3 and 8 sets of 12 keys, and are tuned to A4 = 440 Hertz. Notice how adding more octaves usually doesn't add flavors, only the number of keys does. Instruments from around the world might have 5, 7, 12, 17, 19, 22, 24, 26, 31, 43, 50, 53, 72, or 96 notes per octave. Multiples of 12 can be played with several pianos together, each tuned differently. **Headphones recommended**. Your lowest note is ${temperament[0].Hertz}Hz.
Your speakers may have difficulty playing frequencies below 200Hz. _Constructing a ${edoGeneratorInputs.edoInput}TET with ${edoGeneratorInputs.edoInput*edoGeneratorInputs.octavesInput} steps around ${edoGeneratorInputs.rootLetterInput}${edoGeneratorInputs.rootOctaveInput}=${edoGeneratorInputs.rootNoteInput} Hz, spaced ${tex`\sqrt[${edoGeneratorInputs.edoInput}]{2}`} apart._32:T6f6,chart = { const margin = ({top: 25, right: 100, bottom: 50, left: 40}); var height = 200; var width = 400; const svg = d3.create("svg") .attr("viewBox", [0, 0, 400, 200]); var x = d3.scaleLog() .domain(d3.extent(temperament, d => d.Hertz)).nice() .range([margin.left, width - margin.right]); var y = d3.scaleLinear() .domain(d3.extent(temperament, d => d.Octave)) .range([height - margin.bottom-10, margin.top]); var xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(edoGeneratorInputs.octavesInput)) svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0,"+height+")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-0.8em") .attr("dy", "0.15em") .attr("transform", "rotate(-65)"); svg.append("g") .call(yAxis); svg.append("g") .selectAll("circle") .data(temperament) .join("circle") //.filter(d => d.Note) .attr("cx", d => x(d.Hertz)) .attr("cy", d => y(d.Octave)) .attr("r", Math.log10(edoGeneratorInputs.edoInput/edoGeneratorInputs.octavesInput*5)); // (octavesInput/edoInput) svg.append("text") .attr("class", "x label") .attr("text-anchor", "end") .attr("x", width-100) .attr("y", height - 6) .text("Frequency in Hertz") .style("font-size","8px"); svg.append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr("y", 10) // 6 .attr("dy", "0.75em") .attr("transform", "rotate(-90)") .attr("x",-25) .text("Octave") .style("font-size","8px"); return svg.node(); }33:T575,
### Step 3: Pick a flavor! By mixing together any two ingredients from Step 2, you can make ${limitRatios.length} unique flavors. Most adults can tell apart distances as small as 5 cents. With a lot of training, you can get down to only 1 cent.
Notice the "shimmering" that gets stronger as closer-together waves collide. | | | | - | - | | 1 cent: | ${pluck2gether(freq, round(freq*centsToRatio(1), 3),3)} | | 5 cent: | ${pluck2gether(freq, round(freq*centsToRatio(5), 3),3)} | | 10 cent: | ${pluck2gether(freq, round(freq*centsToRatio(10), 3),3)} | You can choose any row in the table above, or using the dropdown menus below. The one you chose sounds like this: | | | | - | - | | Separately: | ${pluck2stereo(freq, round(freq*limitRatioSelect.Fraction,1), 3)} | | Together: | ${pluck2by2(freq,round(limitRatioSelect.Fraction,3),freq,round(limitRatioSelect.Fraction, 3),4)} | Try it at several different frequencies, and if you can sing or whistle along with it! _Remember to check your volume! Fiddle with the frequency if it won't sound._ _Looking in ${edoGeneratorInputs.edoInput}TET, for a ${numeratorInput} to ${denominatorInput} ratio from the ${limitInput}-limit system.
This is approximately 1:${round(limitRatioSelect.Fraction,5)}, ${round(ratioToCents(limitRatioSelect.Fraction),3)} cents, and ${round(ratioToSavarts(limitRatioSelect.Fraction),3)} savarts._34:T452,
### Step 4: Try to make the flavor! The piano you built can make ${frequencyRatios.length} different flavors, which can't ever match up _exactly_ with the ${limitRatios.length} you had in mind. Fortunately, you could get pretty close to the one you wanted! You were looking for a difference of around ${numeratorInput} to ${denominatorInput}. That's ${limitRatioSelect.Fraction} to 1, or ${limitRatioSelect.Cents} cents.
By playing the ${result.FromKey}${nth(result.FromKey)} and ${result.ToKey}${nth(result.ToKey)} keys, you got as close as ${result.FoundRatio} to 1, or ${result.FoundCents} cents. ### That's about ${round(result.DiffPct*100,3)}% off! _You could get closer by adding more keys per octave in Step 1._ | The ratio you were looking for, on your piano: | The closest your piano can get: | | ---: | --- | | ${pluck2stereo(result.FromHz, round(result.FromHz*result.WantedRatio,1), 3)} | ${pluck2stereo(result.FromHz, result.ToHz, 3)}
| | Together: | ${pluck2by2(result.FromHz,result.WantedRatio,result.FromHz,result.FoundRatio,4)} | _Can you tell the difference?_ ### Play:35:T458,

## Thank you for joining me in the kitchen!
#### Appendix

This work by Alessandro G. Magnasco is licensed under CC BY-NC-SA 4.0

#### Imports & Math #### Re-writing basic algebra due to JavaScript limitations36:T67c,// Closest Musical Ratio // Alessandro G. Magnasco 2023 // inputs: from is a temperament array of custom objects made by edoGenerator, want is one similar object closestRatio = (want,from) => { // info on the ratio we want var ratio = want.Fraction; var cents = want.Cents; // find all possible ratios within given temperament var frequencies = from.map(i => i.Hertz); var fractionRatios = quartermaster(frequencies); var fractions = fractionRatios.map(i => i.Fraction); // find ratio in fractions var closestRatio = closest(ratio,fractions) var closestIndex = fractionRatios.findIndex(i=>i.Fraction == closestRatio) var closestCents = fractionRatios[closestIndex].Cents var closestFrac = fractionRatios[closestIndex].Ratio // regex to get the numerator and denominator frequencies var toHz = closestFrac.match(/^[\d.]*/gm)[0] var fromHz = closestFrac.match(/(?<=\/)[\d.]*/gm)[0] // match the frequencies to index, add one for "which number key on piano" var fromKey = from.findIndex(i=>i.Hertz==fromHz)+1 var toKey = from.findIndex(i=>i.Hertz==toHz)+1 // calculate difference var centsDiff = Math.abs(cents-closestCents); var pctDiff = (cents-closestCents)/cents; // present result as object var output = {WantedRatio: ratio, FoundRatio: closestRatio, WantedCents: cents, FoundCents: closestCents, FromHz: fromHz, ToHz: toHz, FromKey: fromKey, ToKey: toKey, DiffCents: round(centsDiff,3), DiffPct: Math.abs(round(pctDiff,3)), }; return output; }37:[] 2e:{"title":"The Musical Test Kitchen","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"viewof edoGeneratorInputs = Inputs.form({\n edoInput: Inputs.range([2, 100], {label: \"Keys per octave\", step: 1, value: 12}),\n octavesInput: Inputs.range([1, 8], {label: \"Octaves\", step: 1, value: 5}),\n rootLetterInput: Inputs.select([\"A\",\"B\",\"C\",\"D\",\"E\",\"F\",\"G\"], {label: \"Root letter\", value: \"A\"}),\n rootNoteInput: Inputs.range([20, 10000], {label: \"Root frequency (Hz)\", step: 1, value: 440}),\n rootOctaveInput: Inputs.range([1, 8], {label: \"Root octave\", step: 1, value: 4})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1221,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"
\n### Step 2: Decide what ingredients we want\n\nBy mixing together different ingredients, we can make a lot of cool flavors.
\nThe ingredients here are, strangely enough, prime numbers. This is because only primes can add new combinations.
\nYou can remember ${primesInput} of them, and picked the first ${limitInput}.
\nBy mixing together any two of them, you can make ${limitRatios.length} unique flavors!\n\n_Finding every interval possible within a ${limitInput}-limit model of ${temperament.length} keys.
\nNon-unique permutations are ${limitInput}! or ${factorial(limitInput)}.
\nUnique permutations at 3 decimal places are ${limitRatios.length}._","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"viewof primesInput = Inputs.range([1, 200], {label: \"Primes to count\", step: 1, value: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"viewof limitInput = Inputs.range([2,30], {label: \"Primes to use\", step: 1, value: 7})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":1288,"value":"viewof search = Inputs.search(limitRatios, {placeholder: \"Choose a number or ratio\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1286,"value":"viewof limitRatioSelect = Inputs.table(search,{\n format: {\n Viz: x => sparkseesaw(x)\n },\n sort: \"Fraction\",\n columns: [\"Ratio\", \"Fraction\", \"Cents\", \"Viz\"],\n layout: \"auto\",\n maxWidth: 450,\n multiple: false,\n required: true,\n value: search[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":788,"value":"Inputs.bind(Inputs.select(limitRatios, {label: \"Select as cents\", format: x=>x.Cents, value: limitRatios.find(t=>t.Ratio === 3/2), sort:true, onKey:\"Cents\"}), viewof limitRatioSelect)","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"Inputs.bind(Inputs.select(limitRatios, {label: \"Or as a ratio\", format: x=>x.Fraction, value: limitRatios.find(t=>t.Ratio === 3/2)}), viewof limitRatioSelect)","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"viewof freq = Inputs.range([220,1000], {label: \"Frequency (Hz):\", value: 440, step:20});","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":1382,"value":"select = \"Equal Temperament\" //Inputs.radio([\"Equal Temperament\",\"Just Intonation\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"// Ratio audiovisualizer by Elliot Winkler 2019\n// https://observablehq.com/@mcmire/just-intonation-ratio-player\n{\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"},{"id":39,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"import {round} from \"@amagnasco/equal-temperament-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"import {factorial} from \"@amagnasco/quartermaster\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"import {divideArray} from \"@amagnasco/anatomy-of-an-octave\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"import {plusOne} from \"@amagnasco/cartesian-limits\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"import {multiplyArray} from \"@amagnasco/cartesian-limits\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"#### Equal temperament generator","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"import {edoConstructor} from \"@amagnasco/equal-temperament-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"#### Prime number limit constructor","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"import {primesGenerator} from \"@amagnasco/anatomy-of-an-octave\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"import {toTheLimit} from \"@amagnasco/cartesian-limits\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"#### Convert limit to an array of usable ratios","pinned":false,"hidden":false,"mode":"md"},{"id":686,"value":"import {quartermaster} from \"@amagnasco/quartermaster\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"// closest match, tweaked from Joe Grund 2016\n// https://stackoverflow.com/questions/8584902/get-the-closest-number-out-of-an-array\nclosest = (val, arr) => {\n var match = arr.reduce(\n (prev, curr) => Math.abs(curr-val) < Math.abs(prev-val) ? curr:prev\n );\n return match;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"import {nth} from \"@amagnasco/harmonic\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"#### Unit conversions","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"ratioToCents = (ratio) => {return Math.log10(ratio)*(1200/Math.log10(2))}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"centsToRatio = (cents) => {return Math.pow(2,cents/1200)}","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"ratioToSavarts = (ratio) => {return Math.log10(ratio)*1000}","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"stepRatio = round((Math.pow(2,1/edoGeneratorInputs.edoInput)),5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"fraction = numeratorInput/denominatorInput","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"numeratorRE = /^[\\d.]*/gm","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"numeratorInput = limitRatioSelect.Ratio.match(numeratorRE)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"denominatorRE = /(?<=\\/)[\\d.]*/gm","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"denominatorInput = limitRatioSelect.Ratio.match(denominatorRE)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"#### Data","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"temperament = Array(1).fill(edoConstructor(edoGeneratorInputs.rootNoteInput,edoGeneratorInputs.rootOctaveInput,edoGeneratorInputs.rootLetterInput,edoGeneratorInputs.octavesInput,edoGeneratorInputs.edoInput)).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"frequencies = temperament.map(i => i.Hertz)","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"frequencyRatios = quartermaster(frequencies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"primesList = [2,...primesGenerator(primesInput)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"limitList = toTheLimit(1,limitInput,temperament.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"limitRatios = quartermaster(limitList)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"jit_edo = jit_converter(frequencyRatios.map(i=>i.Ratio))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"jit_limit = jit_converter(limitRatios.map(i=>i.Ratio))","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"result = closestRatio(limitRatioSelect,temperament)","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"#### Audiovisuals","pinned":false,"hidden":false,"mode":"md"},{"id":872,"value":"import {pluck2stereo} from \"@amagnasco/pluck-wa\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1039,"value":"import {pluck2by2} from \"@amagnasco/pluck-wa\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"import {pluck2gether} from \"@amagnasco/pluck-wa\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"import {sparkseesaw} from \"@hamzaamjad/tiny-charts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"formOutput = {\n var output = [];\n switch(select){\n case \"Equal Temperament\": output = jit_edo; break;\n case \"Just Intonation\": output = jit_limit; break;\n default: output = jit_limit;\n };\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1426,"value":"import {tones} from \"@mcmire/just-intonation-ratio-player\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"// converts an array of text fractions into a custom object\n// for use with https://observablehq.com/@mcmire/just-intonation-ratio-player\n\njit_converter = (arr) => {\n var value = [];\n var enteredRatios = [];\n for (var i=0; i