30:T570,{ const w = width / 3 * 2; const h = w; const svg = d3.create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("path") .datum(notes) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1) .attr("d", line); //octaves svg.append("g") .attr("shape-rendering", "crispEdges") .selectAll(".octaves") .data(notes.filter((_, i) => !(i % 12))) .join("line") .attr("x1", d => x(d.cents)) .attr("x2", d => x(d.cents)) .attr("y1", d => y(0)) .attr("y2", d => y(d.frequency)) .attr("stroke", "gold") // harmonics svg.append("g") .attr("shape-rendering", "crispEdges") .selectAll(".harmonics") .data(getHarmonics(2 ** octaves)) .join("line") .attr("x1", x(d3.min(notes, d => d.cents))) .attr("x2", x(d3.max(notes, d => d.cents))) .attr("y1", d => y(d)) .attr("y2", d => y(d)) .attr("stroke", "lightblue") svg.append("g") .selectAll(".notes") .data(notes) .join("circle") .attr("r", 4) .attr("cx", d => x(d.cents)) .attr("cy", d => y(d.frequency)) .attr("stroke", "steelblue") .attr("fill", (_, i) => !!(i % 12) ? "white" : "lightblue"); return svg.node(); }31:T457,md` You probably have an idea now, why they are called harmonics. The first harmonic equals the base frequency; the second harmonic, whose frequency is twice the fundamental, sounds an [octave](https://en.wikipedia.org/wiki/Octave) higher; the third harmonic sounds a [perfect fifth](https://en.wikipedia.org/wiki/Perfect_fifth) above the second harmonic; and the fourth harmonic vibrates at four times the frequency of the fundamental (two octaves above the base frequency). In fact, to double the harmonic number means to double the frequency. The fifths harmonic adds a new component to the mix, it almost sounds a [major third](https://en.wikipedia.org/wiki/Major_third) above the fourth harmonic; the sixth harmonic adds another perfect fifths above the fourth harmonic; the seventh harmonic sounds a little bit out of tune, the closest note on the chromatic scale is a [minor seventh](https://en.wikipedia.org/wiki/Minor_seventh) above the fourth harmonic; finally, the eighth harmonic vibrates at eight times the frequency of the fundamental (three octaves above the base frequency), you get the idea. `32:T7b9,{ const harmonics = getHarmonics(16); const frequencies = notes.map(n => n.frequency); const findClosest = (needle) => (a, b) => Math.abs(b - needle) < Math.abs(a - needle) ? b : a; const distances = harmonics.map(harmonic => harmonic - frequencies.reduce(findClosest(harmonic))); const maxAbs = d3.max(distances, d => Math.abs(d)); const w = width / 3 * 2; const h = width / 6; const x = d3.scaleBand() .domain(d3.range(16)) .range([margin.left, w - margin.right]); const y = d3.scaleLinear() .domain([-maxAbs, maxAbs]) .range([h - margin.top, margin.top]) .nice(); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickValues(y.ticks(4))) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 5) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("∆Hz")) const xOffset = x.bandwidth() / 2; const svg = d3.create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]); const plot = svg.append("g"); const lines = plot.append("g").attr("shape-rendering", "crispEdges"); const dots = plot.append("g"); lines.append("g").call(yAxis); lines.append("line") .attr("x1", margin.left) .attr("x2", w - margin.right) .attr("y1", y(0)) .attr("y2", y(0)) .attr("stroke", "lightgrey"); lines.selectAll(".distances") .data(distances) .join("line") .attr("x1", (d, i) => x(i) + xOffset) .attr("x2", (d, i) => x(i) + xOffset) .attr("y1", (d, i) => y(0)) .attr("y2", (d, i) => y(d)) .attr("stroke", "lightblue") dots.selectAll(".dots") .data(distances) .join("circle") .attr("cx", (d, i) => x(i) + xOffset) .attr("cy", (d, i) => y(d)) .attr("r", 5) .attr("fill", "lightblue") .attr("stroke", "steelblue"); return svg.node(); }33:[] 2e:{"title":"Harmonic series","cells":[{"id":0,"value":"md`# Harmonic series`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`\nIn music, a [harmonic series](https://en.wikipedia.org/wiki/Harmonic_series_(music)) (or overtone series) is the sequence of frequencies, in which each frequency is an integer multiple of a fundamental, i.e. for a base frequency of ${tex`\\small f = 220\\thinspace\\text{Hz}`} the harmonically related frequencies are\n\n${tex.block`\\small f_{1} = 220\\thinspace\\text{Hz}, f_{2} = 440\\thinspace\\text{Hz}, f_{3} = 660\\thinspace\\text{Hz}, \\mathellipsis`}\n\nWhen we plot the harmonics together with an [equal temperament](https://en.wikipedia.org/wiki/Equal_temperament) [chromatic scale](https://en.wikipedia.org/wiki/Chromatic_scale), starting at the base frequency (or fundamental), we can find some interesting relationships.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"md`\nThe dots in the chart above represent ${octaves} octaves of a chromatic scale starting at a base frequency ${tex`\\small f = 220\\thinspace\\text{Hz}`}; the blue lines show the harmonics of that frequency. Let's have a listen to the first ${2 ** octaves} harmonics.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"playHarmonics = {\n const harmonics = getHarmonics(octaves ** 2);\n \n const play = () => { \n audioCtx.resume().then(() => {\n setType(\"sine\");\n setFrequency(frequency);\n setGain(0.2);\n const id = setInterval(playNote, 500);\n let i = 0;\n function playNote() {\n if (i < harmonics.length) {\n setFrequency(harmonics[i++]);\n } else {\n clearInterval(id);\n setGain(0);\n }\n }\n });\n }\n\n const button = html``;\n button.onclick = play;\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"md`The plot above shows the distance in Hertz between the first 16 harmonics and the closest note on the chromatic scale. As you can see, the deviation increases the more harmonics are added.\n\nNevertheless, if we limit ourselves to the first harmonics and play them together, we get a nice sounding chord. (In the example I've silenced the first and seventh harmonic).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"playChord = {\n const r = new Float32Array([0, 0, 0, 0, 0, 0, 0, 0, 0]);\n const i = new Float32Array([0, 0, 1, 1, 1, 1, 1, 0, 1]);\n \n const play = () => {\n audioCtx.resume().then(() => {\n setFrequency(frequency);\n setWave(r, i);\n setGain(0.8, 0.1);\n setTimeout(() => setGain(0), 2000);\n });\n }\n \n const button = html``;\n button.onclick = play;\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"md`\nThe frequencies you can hear are ${hz`440`}, ${hz`660`}, ${hz`880`}, ${hz`1100`}, ${hz`1320`} and ${hz`1760`}; they correspond to the notes\n\n${tex.block`\\small\\mathrm{A_4, E_5, A_5, C \\sharp _6, E_6, A_6}`}\n\nand together they create an ${tex`\\small A \\space major`} chord.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1583,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1586,"value":"md`\nNow you might think that the sound was created by playing a set of notes at different pitches simultaneously like pictured in the image below. But that's not what is actually happening here.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"{\n const N = 256;\n const harmonics = [0, 1, 1, 1, 1, 1, 0, 1];\n const curves = Array.from({ length: harmonics.length }, (_, i) => sinusoid(1, i + 1)).filter((_, i) => !!harmonics[i]);\n const data = curves.map(curve => Array.from({ length: N }, (_, i) => curve(i * 2 / N) * 0.8));\n return plot(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1263,"value":"md`\nIf you've already digged a little bit into the code of this notebook, you might have noticed that it uses only one oscillator to create sounds. That works, because _each harmonic frequency is an integer multiple of the fundamental frequency_. The plot above shows two cycles of the base frequency. Although all harmonics oscillate at different speeds, they all pass through the same point everytime the fundamental frequency starts a new cycle. \n\nThat allows us to create new waveforms with the same base frequency by simply adding the different values over time together and by scaling the amplitude a little bit. This technique is called [additve synthesis](https://en.wikipedia.org/wiki/Additive_synthesis) - instead of a set of different waves, the shape of the waveform you were hearing looks actually like in the image below. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"chordPlot = {\n const N = 256;\n const s = 0.15;\n const harmonics = [0, 1, 1, 1, 1, 1, 0, 1];\n const curves = Array.from({ length: harmonics.length }, (_, i) => sinusoid(1, i + 1)).filter((_, i) => !!harmonics[i]);\n const data = [Array.from({ length: N }, (_, i) => curves.reduce((sum, fn) => (sum += fn(i * 2 / N), sum), 0) * s)];\n return plot(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1473,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1290,"value":"md`\nThis property of the harmonic series opens up a whole new world of sonic possibilities. What if we don't exclude any of the harmonics, but adjust their amplitudes by the inverse of the harmonic number instead? We get a so called [sawtooth wave](https://en.wikipedia.org/wiki/Sawtooth_wave). Here's how it sounds and looks like.\n\n_The plots below show 16 harmonics each; the sounds are created as defined in the [Web Audio API](https://webaudio.github.io/web-audio-api/#oscillator-coefficients) specifictaion._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"{\n const b = n => (-1) ** (n + 1) * 2 / (n * pi);\n \n const r = Float32Array.from({ length: 64 }).fill(0);\n const i = Float32Array.from({ length: 64 }, (_, n) => n !== 0 ? b(n) : 0);\n \n const play = () => {\n audioCtx.resume().then(() => {\n setFrequency(frequency);\n setWave(r, i);\n setGain(0.8, 0.1);\n setTimeout(() => setGain(0), 2000);\n });\n }\n \n const button = html``;\n button.onclick = play;\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"{\n const N = 256;\n const curves = Array.from({ length: 16 }, (_, i) => sinusoid(1 / (i + 1), i + 1));\n const data = curves.map(fn => Array.from({ length: N }, (_, i) => fn(i * 2 / N)));\n return plot(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"{\n const N = 256;\n const s = 0.5;\n const curves = Array.from({ length: 16 }, (_, i) => sinusoid(1 / (i + 1), i + 1));\n const data = [Array.from({ length: N }, (_, i) => curves.reduce((sum, fn) => (sum += fn(i * 2 / N), sum), 0) * s)];\n return plot(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"md`\nBy adjusting the amplitudes in the same way as we do for the sawtooth wave, but only using the odd harmonics we can approximate a [square wave](https://en.wikipedia.org/wiki/Square_wave) by additive synthesis.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"{\n const b = n => 2 / (n * pi) * (1 - (-1) ** n);\n \n const r = Float32Array.from({ length: 64 }).fill(0);\n const i = Float32Array.from({ length: 64 }, (_, n) => n !== 0 ? b(n) : 0);\n \n const play = () => {\n audioCtx.resume().then(() => {\n setFrequency(frequency);\n setWave(r, i);\n setGain(0.8, 0.1);\n setTimeout(() => setGain(0), 2000);\n });\n }\n \n const button = html``;\n button.onclick = play;\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"{\n const N = 256;\n const f = n => 2 * (n + 1) - 1;\n const curves = Array.from({ length: 16 }, (_, n) => sinusoid(1 / f(n), f(n)));\n const data = curves.map(fn => Array.from({ length: N }, (_, i) => fn(i * 2 / N)));\n return plot(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"{\n const N = 1024;\n const f = n => 2 * (n + 1) - 1;\n const curves = Array.from({ length: 16 }, (_, n) => sinusoid(1 / f(n), f(n)));\n const data = [Array.from({ length: N }, (_, i) => curves.reduce((sum, fn) => (sum += fn(i * 2 / N), sum), 0))];\n return plot(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"md`\nIt's also possible to approximate a [triangle wave](https://en.wikipedia.org/wiki/Triangle_wave) by summing odd harmonics of the fundamental while changing the phase of every other odd harmonic by π and scaling the amplitude of the harmonics by one over the square of their mode number.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"{ \n const b = n => 8 * Math.sin(n * pi / 2) / (pi * n) ** 2;\n \n const r = Float32Array.from({ length: 64 }).fill(0);\n const i = Float32Array.from({ length: 64 }, (_, n) => n !== 0 ? b(n) : 0);\n \n const play = () => {\n audioCtx.resume().then(() => {\n setFrequency(frequency);\n setWave(r, i);\n setGain(0.8, 0.1);\n setTimeout(() => setGain(0), 2000);\n });\n }\n \n const button = html``;\n button.onclick = play;\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"{\n const n = 256;\n const f = i => 2 * (i + 1) - 1;\n const curves = Array.from({ length: 16 }, (_, i) => sinusoid(1 / f(i) ** 2, f(i), i & 1 ? Math.PI : 0));\n const data = curves.map(curve => Array.from({ length: n }, (_, i) => curve(i * 2 / n)));\n return plot(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"{\n const n = 256;\n const s = 0.8;\n const f = i => 2 * (i + 1) - 1;\n const curves = Array.from({ length: 16 }, (_, i) => sinusoid(1 / f(i) ** 2, f(i), i & 1 ? Math.PI : 0));\n const data = [Array.from({ length: n }, (_, i) => curves.reduce((sum, curve) => (sum += curve(i * 2 / n), sum), 0) * s)];\n return plot(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1564,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"md`\nThe _sine wave_, together with the _sawtooth_, _square_ and _triangle waves_ build the foundation of [subtractive sound synthesis](https://en.wikipedia.org/wiki/Subtractive_synthesis). The sound most commonly associated with this technique is that of analog synthesizers of the 1960s and 1970s, that use [envelopes](https://en.wikipedia.org/wiki/Envelope_(music)) and/or [LFOs](https://en.wikipedia.org/wiki/Low-frequency_oscillation) to shape the harmonic richness and amplitude of a sound over time.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1505,"value":"md`---\n#### Appendix\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"octaves = 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"pitch = -3","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"frequency = getFrequency(pitch)","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"getCents = (semitones) => semitones * 100;","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"getHarmonics = (n) => Array.from({ length: n }, (_, i) => frequency * (i + 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"getPitch = (freq) => 9 + 12 * Math.log2(freq / 440);","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"getFrequency = (pitch) => Math.pow(2, (pitch - 9) / 12) * 440;","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"notes = Array.from({ length: octaves * 12 + 1 }, (_, semitones) => ({\n cents: getCents(semitones),\n frequency: getFrequency(pitch + semitones)\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"audioCtx = new AudioContext()","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"analyser = audioCtx.createAnalyser()","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"gain = {\n const gain = audioCtx.createGain();\n gain.gain.value = 0\n gain.connect(audioCtx.destination);\n gain.connect(analyser);\n return gain;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"osc = {\n const osc = audioCtx.createOscillator();\n osc.connect(gain);\n //osc.frequency.value = frequency;\n osc.start();\n return osc;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"setGain = (value = 0, time = 0) => {\n gain.gain.linearRampToValueAtTime(value + 1e-6, audioCtx.currentTime + time);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"setFrequency = (freq) => {\n osc.frequency.setValueAtTime(freq, audioCtx.currentTime)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"setWave = (a, b) => {\n const wave = audioCtx.createPeriodicWave(a, b);\n osc.setPeriodicWave(wave);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"setType = (type) => {\n osc.type = type;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"line = d3.line()\n .defined(d => !isNaN(d.frequency))\n .x(d => x(d.cents))\n .y(d => y(d.frequency))","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"x = d3.scaleLinear()\n .domain(d3.extent(notes, d => d.cents))\n .range([margin.left, w - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(notes, d => d.frequency)])\n .range([h - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${h - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", -10)\n .attr(\"y\", -10)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"cents\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickValues(getHarmonics(16).filter((_,i) => i & 1)))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 5)\n .attr(\"y\", -5)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Hz\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"w = width / 3 * 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"plot = {\n \n const defaults = {\n width: width / 3 * 2,\n height: width / 6,\n domain: [-1, 1],\n };\n \n return (data, options = {}) => {\n\n const { width, height, domain, dots } = Object.assign({}, defaults, options);\n\n const x = d3.scaleLinear().range([0, width]),\n y = d3.scaleLinear().range([height, 0]).domain(domain)\n\n const line = d3.line().x((_, i, arr) => x(i / arr.length)).y(y)\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"max-width\", `${width}px`)\n .style(\"overflow\", \"visible\");\n\n svg.selectAll(\"lines\")\n .data(data)\n .join(\"path\")\n .attr(\"d\", line)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 0.5);\n\n return svg.node();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"hz = (v) => tex`\\small ${v} \\thinspace \\text Hz`","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"sinusoid = (amplitude, frequency, phase = 0) => {\n return t => amplitude * Math.sin(tau * frequency * t + phase);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1405,"value":"pi = Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"tau = pi * 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}