2b:null 2c:["$","title",null,{"children":"Music Theory for Programmers - Part 1 | Chad Nauseam | Observable"}] 31:T557,{ const totalHeight = 2 * scale + margin * 2; const waveHeights = heights( wave({ frequency: frequency1, amplitude: 1, speed: .2 / frequency1, phase: 0, waveType: sin }).waveFunc, repetitions, t ); const cycleLength = waveHeights.length / repetitions / frequency1; const center = waveHeights.length / 2; const createWave = (heights, stretch) => { const l = heights.length; return heights.map((height, index) => ({ time: (index / l) * stretch, pressure_delta: height })); }; const svg = d3 .create("svg") .attr("id", "wavelength-explainer") .attr("viewBox", [0, 0, width, totalHeight]); const mainGroup = svg.append("g"); const cycleGroup = svg.append("g"); const mainWave = createWave(waveHeights, stretch); mainGroup .append("path") .attr("d", line(totalHeight)(mainWave)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "3"); const singleCycle = mainWave.slice( Math.ceil(center - cycleLength / 2), Math.ceil(center + cycleLength / 2) ); if (show_wavelength) { cycleGroup .append("path") .attr("d", line(totalHeight)(singleCycle)) .attr("fill", "none") .attr("stroke", d3.color(highlightColor).brighter(.5)) .attr("stroke-width", "4"); } return svg.node(); }32:Tb2e,/* standing_wave_1 = { const svg = showWave([wave1, wave1_reversed], t, repetitions, nomag); const numNodes = repetitions * 2 + 1; if (show_nodal_points) { const cycleLength = svg.waveHeights.length / repetitions / wave1.frequency; const center = svg.waveHeights.length / 2; const originalWave = svg.createWave(svg.waveHeights, stretch); const singleCycle = svg .createWave( svg.waveHeights.slice( Math.ceil(center - cycleLength / 2), Math.ceil(center + cycleLength / 2) ), stretch / repetitions / wave1.frequency ) .map(({ time, pressure_delta }) => ({ time: time + ((center - cycleLength / 2) / svg.waveHeights.length) * stretch + .023, pressure_delta })); svg .append("path") .attr("d", line(svg.totalHeight)(singleCycle)) .attr("fill", "none") .attr("stroke", d3.color(highlightColor).brighter(.5)) .attr("stroke-width", "5"); svg .selectAll('circle') .data(_.range(0, numNodes)) .join('circle') .attr("cx", i => (i / (numNodes - 1)) * scale * stretch) .attr("cy", svg.totalHeight / 2) .attr("r", 4) .style('fill', highlightColor); } return svg.node(); }*/ { const svg = showWave( [ wave({ waveType: sin, frequency: 1, speed: .2, phase: 0, amplitude: 1 }), wave({ waveType: sin, frequency: 1, speed: -.2, phase: 0, amplitude: 1 }) ], t, repetitions, nomag ); const numNodes = repetitions * 2 + 1; if (show_nodal_points) { const cycleLength = svg.waveHeights.length / repetitions / wave1.frequency; const center = svg.waveHeights.length / 2; const originalWave = svg.createWave(svg.waveHeights, stretch); const singleCycle = svg .createWave( svg.waveHeights.slice( Math.ceil(center - cycleLength / 2), Math.ceil(center + cycleLength / 2) ), stretch / repetitions / wave1.frequency ) .map(({ time, pressure_delta }) => ({ time: time + ((center - cycleLength / 2) / svg.waveHeights.length) * stretch + .023, pressure_delta })); svg .append("path") .attr("d", line(svg.totalHeight)(singleCycle)) .attr("fill", "none") .attr("stroke", d3.color(highlightColor).brighter(.5)) .attr("stroke-width", "5"); svg .selectAll('circle') .data(_.range(0, numNodes)) .join('circle') .attr("cx", i => (i / (numNodes - 1)) * scale * stretch) // points end up slightly misaligned but I'm not sure why .attr("cy", svg.totalHeight / 2) .attr("r", 5) .style('fill', highlightColor); } return svg.node(); }33:T8b0,/*{ const svg = showWave( [ wave({ waveType: triangle, frequency: 1, speed: .2, phase: 0, amplitude: 1 }), wave({ waveType: triangle, frequency: 1, speed: -.2, phase: 0, amplitude: 1 }) ], t, repetitions, nomag ); const numNodes = repetitions * 2 + 1; if (true) svg .selectAll('circle') .data(_.range(0, numNodes)) .join('circle') .attr("cx", i => (i / (numNodes - 1)) * scale * stretch) .attr("cy", svg.totalHeight / 2) .attr("r", 5) .style('fill', highlightColor); return svg.node(); return svg.node(); } */ { const svg = showWave( [ wave({ waveType: triangle, frequency: 1, speed: .2, phase: 0, amplitude: 1 }), wave({ waveType: triangle, frequency: 1, speed: -.2, phase: 0, amplitude: 1 }) ], t, repetitions, nomag ); const numNodes = repetitions * 2 + 1; if (show_nodal_points_2) { const cycleLength = svg.waveHeights.length / repetitions / wave1.frequency; const center = svg.waveHeights.length / 2; const originalWave = svg.createWave(svg.waveHeights, stretch); const singleCycle = svg .createWave( svg.waveHeights.slice( Math.ceil(center - cycleLength / 2), Math.ceil(center + cycleLength / 2) ), stretch / repetitions / wave1.frequency ) .map(({ time, pressure_delta }) => ({ time: time + ((center - cycleLength / 2) / svg.waveHeights.length) * stretch + .023, pressure_delta })); svg .append("path") .attr("d", line(svg.totalHeight)(singleCycle)) .attr("fill", "none") .attr("stroke", d3.color(highlightColor).brighter(.5)) .attr("stroke-width", "5"); svg .selectAll('circle') .data(_.range(0, numNodes)) .join('circle') .attr("cx", i => (i / (numNodes - 1)) * scale * stretch) .attr("cy", svg.totalHeight / 2) .attr("r", 5) .style('fill', highlightColor); } return svg.node(); }34:T660,wavePlayer = (waves, repetitions, mag, description, options) => { { const { show_frequencies } = Object.assign( { show_frequencies: false }, options ); const frequency_display = htl.html.fragment`${waves.map( ({ frequency }) => htl.html`${frequency.toFixed( 0 )} Hz` )}`; const w = showWave(waves.map(wave), t, repetitions, mag, description); const b = () => { const params = { id: description + "-play-button" }; const elem = html`${playButton(params)}${ show_frequencies ? frequency_display : "" }`; const onclick = async () => { let s = synth; if (synth.unset) { const synthToUse = new Tone.PolySynth(Tone.Synth).toDestination(); s = synthToUse; mutable synth = Object.assign(synthToUse, { unset: false }); } const sounds = _.uniqBy(waves, "frequency").filter( ({ frequency }) => frequency > 20 && frequency < 20000 ); const toSample = 200; const volume = _.sum( _.range(0, toSample).map(() => Math.abs(w.waveFunc(Math.random())(Math.random())) ) ) / toSample; sounds.forEach(({ frequency }) => { s.triggerAttackRelease(frequency, 0.4, Tone.now(), volume); }); }; elem.onclick = onclick; return elem; }; const bo = b(); const output = html`${bo}${w.node()}`; return (that) => reconcile(that, output); } }35:T603,showWave = ( waves, t, repetitions, { magFactor, magFactorRepetition }, description ) => { const waveFunc = t => x => _.sum(waves.map(({ waveFunc }) => waveFunc(t)(x))); const waveHeights = heights( waveFunc, repetitions / magFactorRepetition, t / magFactor ); const totalHeight = _.sum(waves.map(({ amplitude }) => amplitude)) * 2 * scale + margin * 2; const fundamental_frequency = gcd(waves.map(({ frequency }) => frequency)); const createWave = (heights, stretch) => { const l = heights.length; const unsimple = heights.map((height, index) => ({ x: (index / l) * stretch, y: height })); const simple = simplify(unsimple, .01, true); return simple.map(({ x, y }) => ({ time: x, pressure_delta: y })); }; const wavePoints = createWave(waveHeights, stretch); const svg = d3.create("svg").attr("viewBox", [0, 0, width, totalHeight]); svg .attr("id", description + "-path") .append("path") .attr("d", line(totalHeight)(wavePoints)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "3"); if (false) { svg.append("path").attr("d"); } return Object.assign(svg, { waveFunc, totalHeight, wavePoints, waveHeights, createWave }); /*return Object.assign(svg.node(), { update(domain) { const t = svg.transition().duration(750); zx.domain(domain); gx.transition(t).call(xAxis, zx); path.transition(t).attr("d", line(data)); } });*/ }36:T95a,pianoSVG = notes => { const keyWidth = 30; const keyHeight = keyWidth * 2; const keyHeightExpand = keyHeight * 1.05; const keyPad = 2; const computeColor = index => d3.interpolateLab( d3.lab(83.813, -10.891, -11.484), d3.lab(86.385, 17.854, 7.357) )((index - smallest_index) / notes.length); const svg = d3 .create('svg') .attr('width', (keyWidth + keyPad) * notes.length + margin * 2) .attr('height', keyHeightExpand + margin * 2); const smallest_index = _.min(notes.map(({ index }) => index)); svg .selectAll('rect') .data(notes) .join('rect') .attr("width", keyWidth) .attr("height", keyHeight) .attr( "x", ({ frequency, index }) => (index - smallest_index) * (keyWidth + keyPad) + margin ) .attr("y", ({ frequency, index }) => margin) .style("fill", ({ frequency, index }) => computeColor(index)) .style("rx", 2) .on('mouseover', async function(event) { // The 'this' variable refers to the underlying SVG element. // We can select it directly, then use D3 attribute setters. // (Note that 'this' is set when using "function() {}" definitions, // but *not* when using arrow function "() => {}" definitions.) d3.select(this) .transition() .attr('height', keyHeightExpand) .attr('stroke', '#333') .attr('stroke-width', 2); }) .on('mouseout', async function(event, { frequency, index }) { //Setting the stroke color to null removes it entirely. d3.select(this) .transition() .attr('height', keyHeight) .attr('stroke', null) .style("fill", computeColor(index)); }) .on('mousedown', async function(event, { frequency, index }) { press(index); }); const press = (index, length) => { let selection = svg .selectAll('rect') .filter((d, i) => i == index - smallest_index); const oldColor = computeColor(index); const newColor = d3.color(oldColor).darker(1); selection.style("fill", newColor).attr('height', keyHeightExpand); selection .transition() .style("fill", oldColor) .attr('height', keyHeight); synth.triggerAttackRelease(notes[index - smallest_index].frequency, length); }; return Object.assign(svg, { press, notes: notes, length: notes.length }); return svg; }37:[{"id":"83948590d9fac067f049e43b6e384ce55910a896dbf7bd8204aa7eb3fecc5bcf7a46ac19bd6f6a791f049a084f3203794c08e435cd221dd602b9d814e671dcda","href":"https://static.observableusercontent.com/files/83948590d9fac067f049e43b6e384ce55910a896dbf7bd8204aa7eb3fecc5bcf7a46ac19bd6f6a791f049a084f3203794c08e435cd221dd602b9d814e671dcda","name":"image@2.png","type":"image/png","lastModified":1613426902486.484,"size":269067},{"id":"71586c77707a45af815195e9a9af924155cd4da5729187f1d53d1747b8bea365a060f1ecbb9084bf83ae9483e317f3de31a87a8d694a4295ed953f05c595bd79","href":"https://static.observableusercontent.com/files/71586c77707a45af815195e9a9af924155cd4da5729187f1d53d1747b8bea365a060f1ecbb9084bf83ae9483e317f3de31a87a8d694a4295ed953f05c595bd79","name":"Lwave-v8.gif","type":"image/gif","lastModified":1613426902486.484,"size":1220845},{"id":"63aa5e41bf83746dc16674ff4af071a7fd2e61c92e259b374f90ee56a05fc3c3eb0c3602fcda755c8a75f3a9e29665432cad8ebea6cbca90882862367da6eaa9","href":"https://static.observableusercontent.com/files/63aa5e41bf83746dc16674ff4af071a7fd2e61c92e259b374f90ee56a05fc3c3eb0c3602fcda755c8a75f3a9e29665432cad8ebea6cbca90882862367da6eaa9","name":"Semigarrapatea.svg","type":"image/svg+xml","lastModified":1613426902486.484,"size":4902}] 2f:{"id":"a4998192c14c618f","slug":null,"title":"Music Theory for Programmers - Part 1","thumbnail":"2ecfa9711d69454802833fbb219d97d6d96e952cacdae009e14d2d5b1162027f","access_level":"public","create_time":"$D2021-02-15T22:08:22.486Z","update_time":"$D2025-02-19T03:38:12.098Z","view_time":null,"first_public_time":"$D2021-02-18T02:50:33.315Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"bcbc8b7a391cae0f","login":"anchpop","name":"Chad Nauseam","avatar_url":"https://avatars-next.observableusercontent.com/631db6913bbef8cd58406196aad9cc7c6a74a4c04e20bf62197f02aa24e1aada","tier":"starter_2024"},"version":4086,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"061d7bea4b9535b9","login":"anchpop","name":"Chad Nauseam","avatar_url":"https://avatars-next.observableusercontent.com/631db6913bbef8cd58406196aad9cc7c6a74a4c04e20bf62197f02aa24e1aada","tier":null}],"members":[{"type":"individual","id":"061d7bea4b9535b9","login":"anchpop","name":"Chad Nauseam","avatar_url":"https://avatars-next.observableusercontent.com/631db6913bbef8cd58406196aad9cc7c6a74a4c04e20bf62197f02aa24e1aada","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Music Theory for Programmers - Part 1","cells":[{"id":0,"value":"md`# Music Theory for ${_.startCase(who_for)} - Part 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"sn`Music is *old*. It might be older than language. And I've always found it interesting that unlike any other medium, music has a *theory*. If you've ever looked into it, ${tip(\n `music theory`\n)`The study of why some sounds sound musical and others don't.`} probably felt complex and arbitrary. That's because there's a persistent teaching error in almost all music theory materials.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2814,"value":"md`The practical rules of music theory were basically discovered by rote trial and error, and when discovered this way they seemed ad-hoc and random. But recently, unifying underlying principles between them were discovered. Unfortunately, materials on music theory still typically focus on the ad-hoc rules instead of the underlying principles. This makes music theory seem much more complicated and arbitrary than it has to be. But once you understand those underlying principles, advanced \"college-level\" music theory will seem simple and obvious to you. That's my promise for this collection of essays (of which this is the first).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2815,"value":"md`> “All music is folk music. I ain’t never heard a horse sing a song.”\n\n> > ― Louis Armstrong`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"md`## The Rules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"sn`There are basically 5 fundamental principles of music theory. They're fundamental because there aren't any simpler rules they can be derived from. They're expressed in pretty much every human culture that's discovered multiple people can sing at the same time. They are:\n\n1. Acoustic consonance\n2. Scales\n3. Conjunct melodic motion ${\n /*(\"“There are two golden rules for an orchestra: start together and finish together. The public doesn’t give a damn what goes on in between.”)*/ \"\"\n} \n4. Harmonic consistency ${\n /*(“Do it again on the next verse, and people think you meant it.”)*/ \"\"\n} \n5. Centricity\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"md`If you're not familiar with these terms, blame the education system. (They're not necessarily at fault, but they sure are fun to blame.) This post will focus on acoustic consonance.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3689,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"md`## Part 1: Acoustic Consonance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2825,"value":"md`Talking about music is like dancing about architecture, so let's cut to the chase. Listen to how shocking this tone sounds:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2117,"value":"simpleNotePlayer(\n [390 * 1.5, 430 * 1.5, 500 * 1.5],\n soundmag,\n \"dissonant-example\"\n)(this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1866,"value":"md`It sounds \"harsh\" or \"tense\". It makes this one sound cheerful by comparison:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2197,"value":"simpleNotePlayer([440 * 1, 440 * 1.5, 440 * 2], soundmag, \"consonant-example\")(\n this\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1713,"value":"md`The first sounds tense because it's extremely *dissonant*. The second sounds happier because it's *consonant*. Consonance is the most important of the 5 rules. To explain it from first principles, I have to explain to you the basics of waves and teach you how the ear works.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"md`### Basic Acoustics Crash Course (${htl.html.fragment` {\n document.getElementById(\"standing-waves\").scrollIntoView();\n }\n}}>Skip`} If You Know How Sound Waves Work)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"md`Sound is a wave of pressure traveling through the air. Here's what that looks like:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"sn`![Pressure wave](${await FileAttachment(\"Lwave-v8.gif\").url()})\n[source](https://www.acs.psu.edu/drussell/Demos/waves/wavemotion.html)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"md`Try following one of the particles (some are colored red to make it easier). They don't go far! The wave itself is what's traveling, not individual particles.${note`> A composer is a guy who goes around forcing his will on unsuspecting air molecules, often with the assistance of unsuspecting musicians. \n\n> > — Frank Zappa`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"md`Some parts of the wave have greater concentration of particles - higher pressure. If we graph how much higher or lower the pressure is than normal, we get a graph like this one:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1118,"value":"md`That graph is another representation of the wave above. We use graphs like these because they're easier to work with.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"html`${md`Notice how the wave is repeating itself? The technical term is \"cycling\". The distance between cycles is called the *wavelength*.`} `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2421,"value":"sn`The wave has a *period* of 1 second - that means it cycles every second. Try changing the period with the slider below${note`Waves that repeat are called *periodic*. If you're thinking \"wow, these names mostly make sense,\" that's because they were chosen by physicists and not music theorists.`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"viewof frequency1 = {\n const properties = {\n style: { fontFamily: \"monospace\", whiteSpace: \"pre-wrap\" }\n };\n const transform = { transform: x => 1 / x, invert: x => 1 / x };\n const form = html``;\n form.period.value = transform.invert((form.value = form.freq.value = 1));\n form.period.oninput = () =>\n (form.freq.value = form.value = transform.transform(\n form.period.valueAsNumber\n ));\n form.freq.oninput = () =>\n (form.period.value = transform.invert(\n (form.value = form.freq.valueAsNumber)\n ));\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1418,"value":"md`The opposite of the period is called the *frequency*. The period is seconds/cycle, so the frequency is cycles/second. Another way of saying \"cycles/second\" is \"Hertz\" or \"Hz\". When the ${period()} goes up, the ${frequency()} goes down.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"sn`**Important mathematical fact**: The wavelength and the frequency are connected via the speed of sound. Specifically: ${tex`wavelength * frequency = speed`}. The speed of sound doesn't change${note`The speed of sound is not the same in different mediums, though.`}. That means if the wavelength goes up, the frequency must go down.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3062,"value":"md`In college, there is a similar relationship between the amount of time one spends socializing and one's GPA. If I tell you my GPA freshman year was 0.8 (out of 4 lol), you know I had a *really* active social life. In the same way, if I tell you the frequency of a wave, you can easily compute the wavelength (and vice versa).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2901,"value":"md`When writing this, I wanted to try to show a real sound wave in \"actual size\". I chose at random the lowest note on the piano, which has a frequency of \n${tex`${calc_frequency(1).toFixed(2)} \\,\\frac{cycle}{s}`}. \nTo figure out its wavelength I also had to google the speed of sound, which seems to be \n${tex`${speed_of_sound.toFixed(0)}\\,\\frac{m}{s}`}. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1990,"value":"md`Plugging that into the equation above, I found:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2915,"value":"{\n const note = calc_frequency(1);\n const freq = `${note.toFixed(2)} \\\\, \\\\frac{cycle}{s}`;\n const wavelengthT = `wavelength`;\n const speed = `${speed_of_sound.toFixed(0)} \\\\, \\\\frac{m}{s}`;\n const wavelength = `${(speed_of_sound / note).toFixed(\n 2\n )} \\\\, \\\\frac{m}{cycle}`;\n return tex`\n\\begin{aligned}\n ${wavelengthT} \\times frequency &= speed \\\\\n ${wavelengthT} \\times ${freq} &= ${speed} \\\\\n ${wavelengthT} &= \\frac{${speed}}{${freq}} \\\\\n ${wavelengthT} &= ${wavelength} \\\\\n\\end{aligned}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2055,"value":"md`Well, I guess you'll have to imagine it. In the meantime, check out what happens when you pass sound waves through a non-Newtonian fluid. I believe it is scientifically known as \"summoning the souls of the dammed.\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3048,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1548,"value":"md`### Wave Interference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"md`When two waves meet each other, they *interfere*. Let's start by seeing what happens when the waves are the same:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2514,"value":"wavePlayer(\n [{ frequency: 440, amplitude: 1, speed: 0, phase: 0, waveType: sin }],\n repetitions,\n soundmag_out,\n \"test2\",\n { show_frequencies: true }\n)(this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2516,"value":"wavePlayer(\n [\n {\n frequency: 440 * freq2,\n amplitude: 1,\n speed: 0,\n phase: phase1,\n waveType: sin\n }\n ],\n repetitions,\n soundmag_out,\n \"test2\",\n { show_frequencies: true }\n)(this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2531,"value":"md`When we combine those two waves, which we do by just adding up their heights at every x-coordinate, we get:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2523,"value":"wavePlayer(\n [\n { frequency: 440, amplitude: 1, speed: 0, phase: 0, waveType: sin },\n {\n frequency: 440 * freq2,\n amplitude: 1,\n speed: 0,\n phase: phase1,\n waveType: sin\n }\n ],\n repetitions,\n soundmag_out,\n \"test2\",\n { show_frequencies: true }\n)(this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2536,"value":"sn`We get a new wave that's twice as powerful. That's boring${note`Unless you like to leave your airpods volume turned up, in which case it might have been very surprising 🎧😬`}. Let's see what happens when we shift one of the waves:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1637,"value":"viewof phase1 = slider({\n min: -.5,\n max: .5,\n value: 0,\n step: 0.01,\n format: v => `${(v * 360).toFixed(2)} degrees`,\n description: \"Phase offset\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2613,"value":"md`How \"shifted\" the wave is is called the *phase*. This is how noise-cancelling headphones work. They use microphones to pick up ambient noise, then play it back at a tiny delay. That delay causes the new sound to completely silence the old one${note`It's actually much more complicated than this, sorry.`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2625,"value":"md`Okay, finally getting to the good part: changing the frequency. Try it! And don't forget you can hit \"Play\" to hear how it sounds.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2662,"value":"viewof freq2 = slider({\n min: .5,\n max: 2,\n value: 1,\n step: 0.01,\n format: v => `Frequency multiplied by ${v.toFixed(2)}`,\n description: \"Frequency change\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2681,"value":"md`**Fun audio fact**: In most cases, human ears aren't sensitive to changes in ${tip(\n \"phase\"\n)`*Phase*: How much a wave is shifted left or right.`} (except when they result in a change in volume, like this example).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2666,"value":"md`### Standing waves`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2657,"value":"md`When a wave hits a wall, it bounces back. That means you sort of have two waves: the original wave hitting the wall, and the reflected wave traveling in the opposite direction. These two waves interfere with each other in an interesting way:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"showWave([wave1], t, repetitions, nomag).node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1681,"value":"showWave([wave1_reversed], t, repetitions, nomag).node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1690,"value":"sn`It results in this trippy-looking wave that doesn't go anywhere${note`Standing waves still have a wavelength and a frequency, just like regular waves.`}. Since it's not traveling in either direction, it's called a *standing wave*. It's *standing* still, get it? Instead of moving left-and-right, the wave appears to move up-and-down.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2721,"value":"{\n return reconcile(\n this,\n html`${md`Also interesting: some of the points on the ${standing_wave()} don't move at all. If a point doesn't move, we call it a *node*. Notice that each cycle has two ${node()}s to call its own; this will be very important later!`}`\n );\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1692,"value":"md`Unless you're reading this at the beach, standing waves are all around you. When sound waves bounce off a wall, they reflect back in the opposite direction and often make a standing wave. Normal *traveling waves* have short life expectancies - they either bounce off a wall or get absorbed. Standing waves aren't going anywhere, so they can last a long time by comparison. When you hear [reverb](https://youtu.be/tDuGBRkM-9o?t=172), that's a standing wave. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3034,"value":"md`I think sound waves are underrated. Everyone talks about how cool magnets are, but with a few speakers you can use sound waves to levitate small objects. That's a way cooler party trick than anything you can do with magnets at home.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1873,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3155,"value":"md`Well, *I* think it's cool, anyway`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3106,"value":"md`## Inside the ear with Ms. Frizzle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3112,"value":"md`The ear is used for hearing.^{[citation needed]} Inside the ear there are a bunch of different parts that do different things. I had to learn all of them in my class on audio perception, but I'm going to give you the short version: the actual hearing happens in the blue seashell-shaped part on the right (which happens to be called the *cochlea*).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3107,"value":"md`![Diagram of different parts of the ear](${await FileAttachment(\n \"image@2.png\"\n).url()})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3127,"value":"md`The cochlea is basically a tube of fluid. It has a membrane running down it, seperating it in half (hotdog style). Sound waves enter your ear, <mumble mumble>, at which point the waves enter the cochlea and vibrate the fluid on one side of the membrane.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3140,"value":"md`Different parts of the membrane are under different amounts of tension. That means different parts will vibrate in response to different frequencies (for reasons I'll explain later). Then, little hairs on the other side of the membrane detect the vibration and send a signal to your brain saying \"I'm vibrating, experience me as sound!\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3145,"value":"md`**Important ear fact**: Since different parts of the membrane respond to different frequencies, your brain knows what frequencies make up the sounds it hears.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3151,"value":"md`I'm not just making you learn a bunch of ear anatomy for no reason, by the way. I promise this is actually relevant to music.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3159,"value":"md`## String Theory`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3163,"value":"sn`Do you have any guesses about what happens when a guitar string is plucked? You're saying you think it makes a ${standing_wave()} like what we saw earlier? Well... kinda? It actually does this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3164,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3166,"value":"sn`${note`Guitar strings don't do this in real life either, by the way. Since you pluck a guitar string from near the end, just it makes a traveling wave that travels down the string and then bounces back when it hits the other end.`}I asked my physics friends about this, and they said this is exactly what they expected based on D'Alembert solution this and 1D wave equation that. It's entirely possible that I just wasn't paying attention but I do *not* remember learning this in wave school.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3191,"value":"sn`Anyway, this is apparently called a [triangle wave](https://en.wikipedia.org/wiki/Triangle_wave), one of many \"non-sinusoidal\" waves. They're basically like any other wave except they look like triangles. Here's the standing wave thing again.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3218,"value":"showWave(\n [\n wave({\n waveType: triangle,\n frequency: 1,\n speed: .2,\n phase: 0,\n amplitude: 1\n })\n ],\n t,\n repetitions,\n nomag\n).node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3232,"value":"showWave(\n [\n wave({\n waveType: triangle,\n frequency: 1,\n speed: -.2,\n phase: 0,\n amplitude: 1\n })\n ],\n t,\n repetitions,\n nomag\n).node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3235,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3242,"value":"sn`Triangle standing waves have ${node()}s too, by the way! ${html``}${note`For correctness's sake I'm going to be showing triangle waves while I'm talking about strings, but know that they're basically the same as regular (aka sine) waves.`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3258,"value":"md`Check out the wave in that video again - It looks basically like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3263,"value":"{\n const repetitions = .5;\n const svg = showWave(\n [\n wave({\n waveType: triangle,\n frequency: 1,\n speed: .2,\n phase: 0,\n amplitude: 1\n }),\n wave({\n waveType: triangle,\n frequency: 1,\n speed: -.2,\n phase: 0,\n amplitude: 1\n })\n ],\n t,\n repetitions,\n nomag\n );\n\n const numNodes = repetitions * 2 + 1;\n if (true)\n svg\n .selectAll('circle')\n .data(_.range(0, numNodes))\n .join('circle')\n .attr(\"cx\", i => (i / (numNodes - 1)) * scale * stretch)\n .attr(\"cy\", svg.totalHeight / 2)\n .attr(\"r\", 5)\n .style('fill', highlightColor);\n return svg.node();\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3287,"value":"sn`Now, if you remember, when I was talking about standing waves, I said (ahem): \"Notice that each cycle has two ${node()}s to call its own; this will be very important later!\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3303,"value":"md`Nodes are points on a standing wave that don't move. Strings, for our purposes, are fixed at either end. So if there's a standing wave on the string, there must be nodes on either end of the string.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3299,"value":"md`Moment of truth: you have the basic building blocks, so can you tell me the wavelength of the wave in the video?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3309,"value":"md`The answer is that the wavelength is twice the length of the string${note`More precisely, twice the length between the fixed points of the string.`}. What we're seeing is half the wave. \"But Chad, you said there were two nodes per cycle!\" No, I said each cycle had two nodes *to call its own*. The node on the left is half cut off - it actually belongs to the wave before it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3318,"value":"md`I'm going to call the length of the string ${tex`l`}. The wavelength is twice the length of the string, aka ${tex`2l`}. This is the wavelength the string *wants* to vibrate at. It's going to resist vibrating at most other wavelengths. Remember how ${tex`wavelength \\times frequency = speed`}? **When you tighten a guitar string, the speed of sound within the string goes up, which means the frequency must go up too.** That means we can control the frequency by tightening the string. Congratulations, you just discovered how to tune a guitar.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3335,"value":"sn`I'm serious, the string *wants* to vibrate at this (and pretty much only this) frequency, because the nodes have to line up. Get close to a guitar and hum a note at 440 Hz - the A string (tuned to that frequency) will vibrate and the others will remain calm${note`This is called a *sympathetic vibration* or *sympathetic resonance*.`}. This is true even if there's a ton of ambient background noise - the string will vibrate as long as the correct frequency is in the air.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3344,"value":"md`Actually, you could imagine building a microphone based on this principle. Set up a bunch of strings at varying tensions, and by seeing which ones vibrate you can see what frequencies are being played. Does this, uh, remind you of anything? Maybe something blue and seashell-shaped?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3331,"value":"md`The string wants to vibrate at its preferred wavelength (${tex`2l`}) because the nodes have to line up with the fixed ends of the string. But I made strings out to be more picky than they actually are: there are an infinite number of inferior wavelengths they will accept. The only requirement is that the nodes line up with the ends.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3363,"value":"viewof harmonic_to_view = slider({\n min: 1,\n max: 20,\n value: 1,\n step: 1,\n format: v =>\n `Wavelength: ${v == 2 ? `2l/${v} (aka l)` : `2l/${v}`}, Frequency: ${440 *\n v} Hz`,\n description: \"Wavelength\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3359,"value":"{\n const repetitions = harmonic_to_view / 2;\n const svg = showWave(\n [\n wave({\n waveType: triangle,\n frequency: 1,\n speed: .2,\n phase: 0,\n amplitude: 1\n }),\n wave({\n waveType: triangle,\n frequency: 1,\n speed: -.2,\n phase: 0,\n amplitude: 1\n })\n ],\n t,\n repetitions,\n nomag\n );\n\n const numNodes = .5 * 2 + 1;\n if (true)\n svg\n .selectAll('circle')\n .data(_.range(0, numNodes))\n .join('circle')\n .attr(\"cx\", i => (i / (numNodes - 1)) * scale * stretch)\n .attr(\"cy\", svg.totalHeight / 2)\n .attr(\"r\", 5)\n .style('fill', highlightColor);\n return svg.node();\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3722,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3387,"value":"sn`So in our hypothetical string-based microphone, our string might be designed to respond to a frequency of 440 Hz (like a guitar's A string), \nbut it will also respond to 880 Hz (${tex`440 \\times 2`}) (which has half the wavelength), \n${440 *\n 3} Hz (${tex`440 \\times 3`}) (which has one third the wavelength), etc.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3398,"value":"md`This means that all of our strings tuned to detect 440 Hz would also react to 880 Hz, ${440 *\n 3} Hz, and so on! There would be no way to tell the difference between 880 Hz being played on its own and 880 Hz being played in conjunction with 440 Hz.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3403,"value":"md`Time for the big reveal: this is exactly how your ear works. Check out how similar these two tones sound: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3442,"value":"simpleNotePlayer([880], soundmag, \"880-example\", { show_frequencies: true })(\n this\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3729,"value":"simpleNotePlayer([440, 880], soundmag, \"440-880-example\", {\n show_frequencies: true\n})(this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3736,"value":"md`They sound pretty similar! This connection actually makes your brain get confused into thinking 440 Hz and 880 Hz are similar notes. Here's 440 Hz so you can see for yourself. You can tell it's different from 880 Hz, but it somehow sounds a little bit similar. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3740,"value":"simpleNotePlayer([440], soundmag, \"880-example\", { show_frequencies: true })(\n this\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3432,"value":"md`Some people think this is learned, but I don't think so. To prove my point, watch this adorable video of a bird trying to convince its owner not to leave:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3404,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3411,"value":"sn`Now I haven't checked, but I bet if you measured the pitch of the bird's imitation, it would be Pretty Close™ to a whole-number multiple of the pitch of the original ringtone. My feeling is that the bird would do this by instinct because it doesn't have the vocal range to accurately reproduce the sound. (Most people do this too, birdbrain, the question is if it's learned or innate.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3422,"value":"md`## Finally, Consonance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3425,"value":"md`So, I told you the brain can't tell the difference between 880 Hz and 880 Hz + 440 Hz. You might have noticed when you played them that you could tell the difference pretty easily. It's true that 880 Hz will vibrate the 880 Hz and 440 Hz portion of your cochlea equally, and it's true that the 440 Hz tone will only vibrate the 440 Hz portion of your cochlea. The part I glossed over is that if you were playing an 880 Hz tone and introduce 440 Hz into the mix, the 440 Hz portion of your cochlea is now being activated by two seperate sounds and so it starts vibrating twice as hard.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3455,"value":"sn`It turns out that all instruments actually produce multiple frequencies at a time. Importantly, *all the frequencies they produce are whole-number multiples of a base frequency*. When a guitar string tuned to 440 Hz is plucked, it does produce a 440 Hz sound, but it also produces an 880 Hz sound (${tex`440 \\times 2`}), and also a 1320 Hz sound (${tex`440 \\times 3`}), etc. These are called the \"harmonics\".${note`**Bonus instrument fact**: The varying loudness of these harmonics one of the ways our ears distinguish different instruments. A flute has pretty quiet harmonics, a guitar has more odd-numbered harmonics, etc. `}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3486,"value":"md`Let's see what that sounds like: Here I'm playing ${base_frequency} Hz as the base frequency, along with its first three ${harmonic()}s (${base_frequency} Hz's first three harmonics are ${base_frequency *\n 2} Hz, ${base_frequency * 3} Hz, and ${base_frequency *\n 4} Hz). Notice that this is different from saying \"the first three octaves,\" which would be ${base_frequency *\n 2} Hz, ${base_frequency * 4} Hz, and ${base_frequency * 8} Hz.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3521,"value":"simpleNotePlayer(\n [base_frequency, base_frequency * 2, base_frequency * 3, base_frequency * 4],\n soundmag,\n \"220-440-660-880-example\",\n {\n show_frequencies: true,\n speed: soundmag.magFactorRepetition / base_frequency\n }\n)(this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3972,"value":"viewof base_frequency = slider({\n min: 110,\n max: 330,\n value: 220,\n step: 1,\n format: v => `${v} Hz`,\n description: \"Base frequency\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3531,"value":"md`The reason this sounds \"musical\" is because it's made up of one base frequency and its ${harmonic()}s.${note`Typically, the lower-numbered harmonics sound better. Nobody wants to listen to a note and its 500th harmonic.`} Interestingly, we can actually leave out the base frequency (just playing the harmonics) and it still sounds pretty good:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3548,"value":"simpleNotePlayer(\n [base_frequency * 2, base_frequency * 3, base_frequency * 4],\n soundmag,\n \"440-660-880-example\",\n {\n show_frequencies: true,\n speed: soundmag.magFactorRepetition / base_frequency\n }\n)(this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3554,"value":"md`Try comparing that to a bunch of random notes I picked with no rhyme or reason. The random notes will sound much worse and not \"musical\" at all:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3558,"value":"simpleNotePlayer(\n [390 * 1.5, 430 * 1.5, 500 * 1.5],\n soundmag,\n \"dissonant-example-2\",\n {\n show_frequencies: true\n }\n)(this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3609,"value":"md`When you play a note and its ${harmonic()}s at the same time, the combination sounds *consonant*. If you have three notes, and the ratios between their frequencies are 1:2:3 (220 Hz + 440 Hz + 660 Hz), it'll sound pretty good. As we've seen, you can even get away with not even playing the original note - in our case, that would just be playing the 2:3 ratio notes (440 Hz + 660 Hz).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3701,"value":"md`Notes will sound consonant if the ratio between them is composed of small numbers. 1:2 is very consonant, 2:3 is pretty consonant, 3:4 is nice too. Adjacent white piano keys (with a black key between them) have a ratio of 8:9, which is why they don't sound very good when played together. The numbers in their ratio are too high, so they sound *dissonant*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4050,"value":"md`**Bonus Harmonics Fact**: All instruments produce a sound along with its harmonics, but they vary significantly in how *loud* the individual harmonics are. Guitars have many odd-numbered harmonics (that's caused by the triangle shape of the string), and the oboe's first harmonic actually is louder than the base frequency. This variation in the loudness of the harmonics is what gives different instruments their unique sound.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3843,"value":"md`This may come as a surprise to you, but in real music dissonance is used extremely frequently. It adds a sort of \"spice\" to an otherwise entirely-consonant piece. Dissonant tones creates a feeling of *tension* in the listener that they then want to be resolved with a consonant tone. I'll get into that more later.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3867,"value":"md`> Consonance, says the dictionary, is the combination of several tones into a harmonic unit. Dissonance results from the deranging of this harmony by the addition of tones foreign to it. One must admit that all this is not clear. Ever since it appeared in our vocabulary, the word 'dissonance' has carried with it a certain odor of sinfulness. Let us light our lantern: in textbook language, dissonance is an element of transition, a complex or interval of tones that is not complete in itself and that must be resolved to the ear's satisfaction into a perfect consonance.\n\n> > ― Igor Stravinsky`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"md`# FIN`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3696,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"d3 = require(\"d3@^6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"import { sn, note, tip } from \"@anchpop/sidenotes@552\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"Tone = require(\"tone\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"import { reconcile, html } from '@tomlarkworthy/reconcile-nanomorph' //import { html } from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"_ = require(\"lodash@4.17\") /*= {\n const [_, fp] = await Promise.all([\n require(\"lodash@4\"),\n require(\"https://cdn.jsdelivr.net/gh/lodash/lodash@4/dist/lodash.fp.min.js\")\n ]);\n return fp(_);\n}*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2728,"value":"simplify = require(\"simplify-js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md`## Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2996,"value":"md`### Graphical`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2932,"value":"highlightColor = \"#c8008c\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3000,"value":"period = () => tip('period')`${tex`\\frac{seconds}{cycle}`}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3004,"value":"frequency = () => tip('frequency')`${tex`\\frac{cycles}{second}`}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3016,"value":"cycle = () => tip('cycle')`One full repetitition of the wave`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3021,"value":"standing_wave = () =>\n md`${tip(\n 'standing wave'\n )`A wave that alternates up-and-down (amplitude) instead traveling left or right.`}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3027,"value":"node = () => tip('node')`A point on a standing wave that doesn't move.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3536,"value":"harmonic = () =>\n tip(\n 'harmonic'\n )`Whole number multiples of a base frequency. If the base frequency is 440 Hz, the first harmonic is 880 Hz, the second harmonic is 1320 Hz, etc.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3651,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3625,"value":"md`1:2:3 (440 Hz + 660 Hz + 880 Hz + ${tex`l`})`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2997,"value":"md`### Mechanical`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"notes = _.range(starting_piano_key, starting_piano_key + 12).map(i => ({\n frequency: calc_frequency(i),\n index: i\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"scale = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"margin = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"height = scale * 2 + margin * 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"fidelity = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"md`We need a certain base number of repetitions to make the wave look suitably wavy. Otherwise (in Emma's words) it just looks like a squiggle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"repetitions = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md`There is no specific correct stretch factor - although we may want the x axis to be scaled so the wave is shown at life-size.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"stretch = 20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1630,"value":"base_x_stretch = 2 * Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"who_for = [\"gamers\", \"programmers\", \"alex\", \"speech pathologists\"][3]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"starting_piano_key = 49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1973,"value":"speed_of_sound = 340.27 // meters/second","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2451,"value":"nomag = ({magFactor: 1, magFactorRepetition: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2453,"value":"soundmag = ({ magFactor: 440, magFactorRepetition: 220 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2460,"value":"soundmag_out = ({ magFactor: 440, magFactorRepetition: 440 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2978,"value":"md`## State`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2980,"value":"mutable show_nodal_points = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3076,"value":"mutable show_wavelength = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4030,"value":"mutable show_nodal_points_2 = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"md`## Waves`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"sin = Math.sin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3200,"value":"triangle = x =>\n ((a, p) =>\n ((4 * a) / p) * Math.abs(((((x - p / 4) % p) + p) % p) - p / 2) - a)(\n 1,\n base_x_stretch\n ) // thank god for wikipedia lol","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1561,"value":"wave1 = wave({ waveType: sin, frequency: 1, speed: .2, phase: 0, amplitude: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1671,"value":"wave1_reversed = wave({\n waveType: sin,\n frequency: 1,\n speed: -.2,\n phase: 0,\n amplitude: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"wave2 = wave({ waveType: sin, frequency: 2, speed: 1, phase: 0, amplitude: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"value":"md`## Pianos`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"consonance = pianoSVG(notes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1722,"value":"dissonance = pianoSVG(\n notes.map(({ frequency, index }) => ({\n frequency: frequency + 50,\n index\n }))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`## Time`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"speed = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"t = {\n let t = 0;\n let oldTime = new Date().getTime() - 16;\n while (true) {\n const currentTime = new Date().getTime();\n const deltaTime = (currentTime - oldTime) / 1000;\n oldTime = currentTime;\n t += speed * deltaTime;\n yield t;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"md`## Wave Helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2229,"value":"{\n return simpleNotePlayer([440], soundmag, \"test1\")(this);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2299,"value":"{\n //return simpleNotePlayer([2], nomag, \"test2\")(this);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2256,"value":"wavePlayer(\n [{ frequency: 1, amplitude: 1, speed: 1, phase: 0, waveType: sin }],\n repetitions,\n nomag,\n \"test2\"\n)(this)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2214,"value":"simpleNotePlayer = (notes, mag, description, options) => {\n const { speed, amplitude_adjustment, show_frequencies } = Object.assign(\n { speed: 1, amplitude_adjustment: notes.length, show_frequencies: false },\n options\n );\n const mywaves = notes.map(frequency => ({\n waveType: sin,\n frequency: frequency,\n speed: speed,\n phase: 0,\n amplitude: 1 / amplitude_adjustment\n }));\n\n return wavePlayer(mywaves, repetitions, mag, description, options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2114,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"wave = ({ waveType, frequency, speed, phase, amplitude }) => ({\n waveFunc: t => x =>\n amplitude *\n waveType(\n frequency * (x - t * speed + (phase * base_x_stretch) / frequency)\n ),\n amplitude,\n frequency\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"heights = (waveFunc, repetitions, t) => {\n const indices = _.range(0, fidelity + 1).map(i => i / fidelity);\n const f = waveFunc(t * base_x_stretch);\n return indices.map(i => {\n const scale = repetitions * base_x_stretch;\n return f(i * scale);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"getHeight = ({ amplitude }) => Math.ceil(amplitude * 2 * scale) + margin * 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"line = totalHeight => {\n const offset = totalHeight / 2;\n return d3\n .line()\n .x(d => d.time * scale)\n .y(d => -d.pressure_delta * scale + offset);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1811,"value":"md`## Piano helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"/*viewof synth = {\n const element = html`

Create Synth (click me)

`;\n element.value = {\n triggerAttackRelease: () => console.log(\"click to create synth please\")\n };\n element.onclick = () => {\n element.value = new Tone.PolySynth(Tone.Synth).toDestination();\n element.dispatchEvent(new CustomEvent(\"input\"));\n };\n\n return element;\n}*/\nmutable synth = ({\n unset: true,\n triggerAttackRelease: () => console.log(\"Synth not created yet >:(\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"mySVG = pianoSVG(notes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"nodes = mySVG.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"{\n let elem = html``;\n elem.onmousedown = () => {\n mySVG.press(starting_piano_key + 0, .1);\n mySVG.press(starting_piano_key + 4, .1);\n };\n return elem;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1938,"value":"playButton = params => html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"md`## Math`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1498,"value":"function gcd(input) {\n function gcd_two_numbers(x, y) {\n if (typeof x !== 'number' || typeof y !== 'number') return false;\n x = Math.abs(x);\n y = Math.abs(y);\n while (y) {\n var t = y;\n y = x % y;\n x = t;\n }\n return x;\n }\n\n if (toString.call(input) !== \"[object Array]\") return false;\n var len, a, b;\n len = input.length;\n if (!len) {\n return null;\n }\n a = input[0];\n for (var i = 1; i < len; i++) {\n b = input[i];\n a = gcd_two_numbers(a, b);\n }\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1756,"value":"function getRandomArbitrary(min, max) {\n return Math.random() * (max - min) + min;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1757,"value":"/**\n * Returns a random integer between min (inclusive) and max (inclusive).\n * The value is no lower than min (or the next integer greater than min\n * if min isn't an integer) and no greater than max (or the next integer\n * lower than max if max isn't an integer).\n * Using Math.round() will give you a non-uniform distribution!\n */\nfunction getRandomInt(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min + 1)) + min;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"combine = (a, b) => a.map((x, i) => x + b[i]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"md`## Music helper functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"calc_frequency = (i, equal_temperament) =>\n 440 * Math.pow(2, (i - starting_piano_key) / 12)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`# Things I don't understand yet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 30:"$2f:body"