2b:null 2c:["$","title",null,{"children":"Logarithms | hzsteinberg | Observable"}] 31:T521,md` Let's start with a frequency of ${tex `350`}, and listen to what happens if we increase it by 15: _A frequency of 300, then 315:_ ${ShowAndPlayInline((t) => Math.sin(t * (300 + (15*Math.floor(t/6 * 1)))), 1.9, 30, 100)} Sounds good! We heard a change in the second half - it got higher. What if we keep adding 15? _Starting with 300 and repeatedly adding 15:_ ${ShowAndPlayInline((t) => Math.sin(t * (300 + (15*Math.floor(t/6 * 2)))), 5, 30, 100)} That's interesting - the pitch didn't sound like it was going up at a constant rate. It almost seemed to slow down towards the end. Listen to the first two notes and the last two notes - for both of these pairs, the second note in the pair doesn't sound like it's the same distance from the first: | 300 vs 315 | 475 vs 490| | -- | --- | |${ShowAndPlayInline((t) => Math.sin(t * (300 + (15*Math.floor(t/6 * 1)))), 1.9, 30, 100)} | ${ShowAndPlayInline((t) => Math.sin(t * (475 + (15*Math.floor(t/6 * 1)))), 1.9, 30, 100)} What's going on? Even though the frequencies have the same +10 difference, they don't sound the same distance apart. In fact, if you go higher, the exact same +10 difference barely makes a difference to our ears! ${tex `900\text{ vs }915`} ${ShowAndPlayInline((t) => Math.sin(t * (900 + (15*Math.floor(t/6 * 1)))), 1.9, 30, 100)} `32:T536,md` ## Other interesting logarithm properties You may secretly be used to taking logs base 10 in disguise - asking "how many digits are there in 10,000" is the same as finding ${tex`\log_{10}(10000)`}! However, logarithms will smoothly handle numbers like 482 that aren't powers of 10 by returning a real number, (${tex`\log_{10}(482) = ${round(Math.log10(482))}`}), while digit-counting doesn't (999 and 100 both have 3 digits). Also, ${tex`\log_x(1) = 0`} no matter what the base x is, because ${tex`x^0 = 1`} no matter the number x. For a similar reason, ${tex`\log_x(0)`} is undefined. If it existed (and we could say ${tex`\log_x(0) = n`}), then by undoing the logarithm with exponentiation we'd find ${tex`x^n = 0`}. That's impossible, because you can't get zero by multiplying together non-zero numbers like ${tex`x`}. (What about if ${tex`x=0`}? What goes wrong there?) ${tex`x^n`} can, however, get _close_ to zero by using lower and lower negative numbers, (think ${tex`x^{-9}, x^{-999}, x^{-99999}...`}), and that's why as ${tex`x \rightarrow 0`} the graph of ${tex`\log(x)`} approaches ${tex`-\infty`}. You may also have heard of logarithms as the inverse of exponentiation, since ${tex`\log_3(x)`} is the inverse of ${tex`3^x`}. In other words, they undo each other: ${tex`3^{(\log_3({x}))} = \log_3(3^x) = x`}. `33:Td76,md` ## So how do you use them in music? First of all, to go up an octave, you multiply the frequency of a note by two. If you hear a wave of a certain frequency, the pitch of a note you hear is ${tex`\log_2({\text{that note's frequency}})`}! That's important enough to repeat: ${tex.block `\text{pitch} = \log_2({\text{frequency}})`} Back to our original problem. Why did we hear _multiplying_ by 1.1 as increasing in pitch by the same amount, instead of adding? Take the log and find out: | Frequency | Pitch = ${tex`\log_2({\text{frequency}})`} | difference in ${tex`\log_2({\text{frequency}})`} from prev note | ------ | ---------- | | ${round(freq)} | ${round(Math.log(freq)/Math.log(2))} | | ${tex`${freq} \cdot 1.1 = ${round(freq * 1.1)}`} | ${round(Math.log(freq * 1.1)/Math.log(2))} | +${round(Math.log(freq * 1.1)/Math.log(2)-Math.log(freq * 1.1**0)/Math.log(2))} | ${tex`${freq} \cdot 1.1^2 = ${round(freq * 1.1**2)}`} | ${round(Math.log(freq * 1.1**2)/Math.log(2))} | +${round(Math.log(freq * 1.1**2)/Math.log(2)-Math.log(freq * 1.1**1)/Math.log(2))} | ${tex`${freq} \cdot 1.1^2 = ${round(freq * 1.1**3)}`} | ${round(Math.log(freq * 1.1**3)/Math.log(2))}| +${round(Math.log(freq * 1.1**3)/Math.log(2)-Math.log(freq * 1.1**2)/Math.log(2))} | ${tex`${freq} \cdot 1.1^2 = ${round(freq * 1.1**4)}`} | ${round(Math.log(freq * 1.1**4)/Math.log(2))}| +${round(Math.log(freq * 1.1**4)/Math.log(2)-Math.log(freq * 1.1**3)/Math.log(2))} ${`
`}There it is: multiplying by 1.1 increases the pitch by the same amount each time. And logarithms do indeed convert multiplication to addition - that special value of ${tex`+${round(Math.log(1.1)/Math.log(2)) }`} is just ${tex`\log_2(1.1)`}! (Why? Let's do out the math and convert the pitches back to frequency. To do that, we can undo the ${tex`\log_2`} using ${tex`2^x`}. If our starting pitch is ${tex`x`} (with frequency ${tex`2^x`}), then adding the same ${tex`+${round(Math.log(1.1)/Math.log(2)) }`} to that pitch will make a new note, with frequency ${tex`2^{x + ${round(Math.log(freq * 1.1**4)/Math.log(2)-Math.log(freq * 1.1**3)/Math.log(2))}} = 2^x \cdot 2^{${round(Math.log(freq * 1.1**4)/Math.log(2)-Math.log(freq * 1.1**3)/Math.log(2))}} = 2^x \cdot 1.1`} - the same multiple of 1.1 we've been using all along! What about when we repeatedly added 15 to the frequency? What happened then? | Frequency | Pitch = ${tex`\log_2({\text{frequency}})`} | difference in ${tex`\log_2({\text{frequency}})`} from prev note | ------ | ---------- | | ${round(freq)} | ${round(Math.log(freq)/Math.log(2))} | | ${tex`${freq} +15 = ${round(freq + 15)}`} | ${round(Math.log(freq + 15)/Math.log(2))} | +${round(Math.log(freq +15)/Math.log(2)-Math.log(freq +15*0)/Math.log(2))} | ${tex`${freq} +15*2 = ${round(freq +15*2)}`} | ${round(Math.log(freq + 15*2)/Math.log(2))} | +${round(Math.log(freq +15*2)/Math.log(2)-Math.log(freq +15*1)/Math.log(2))} | ${tex`${freq} +15*3 = ${round(freq +15*3)}`} | ${round(Math.log(freq + 15*3)/Math.log(2))}| +${round(Math.log(freq +15*3)/Math.log(2)-Math.log(freq +15*2)/Math.log(2))} | ${tex`${freq} +15*4 = ${round(freq +15*4)}`} | ${round(Math.log(freq + 15*4)/Math.log(2))}| +${round(Math.log(freq + 15*4)/Math.log(2)-Math.log(freq + 15*3)/Math.log(2))} ${`
`}No wonder repeated addition eventually stopped sounding like the pitch was increasing - once you get big enough the +15 isn't enough to require that much more multiplication by two. `34:T5dc,md` # Equal Temperament Our modern musical system is constructed using logarithms! Let's go through how to build one. Modern music uses a system called equal temperament, which is a system where every pitch sounds the same distance away from the next pitch in the series - or in other words, they're spaced evenly. Starting from some frequency ${tex`f`}, going up an octave means multiplying f by ${tex`2`} to get ${tex`2f`}. To divide an octave into 12 pieces, we need to find 12 frequencies that are all the same multiplier apart, and where the last frequency is ${tex`2f`}. Logarithms make the problem a lot easier! Remember - logarithms turn multiplying into adding. Say we start with frequency f. Since pitch is ${tex`\log_2{(x)}`}, the note one octave above ${tex`f`} is ${tex`\log_2{(2f)} = \log_2(f)+1`}. It's so easy to divide an interval of +1 into 12 pieces that the the answer is already in this sentence: division! Just add ${tex`\frac{1}{12}`}, and doing that 12 times will indeed result in ${tex`\log_2(f)+1`}. Using this, we can find the pitches easily: the next pitch after ${tex`f`} will have a pitch of ${tex`\frac{1}{12} + \log_2(f)`}, the next ${tex`\frac{2}{12} + \log_2(f)`}, and so on until ${tex`\frac{12}{12} + \log_2(f)`}. And then all you need to do is undo the logarithm using ${tex`2^x`}, and you have the exact frequencies of notes in equal temperament! ${makeEqualTemperamentTable(12, 512)} Play every note in this scale: ${playEquallyTemperedScaleInline(12)} `35:T418,function makeEqualTemperamentTable(divisions=12, startFreq = 300){ /* a template string with HTML subdivisions in it can't be concatenated to another string, because it will come out as [object HTMLElement] when the plus sign coerces it into a string. To work around this and successfully return MD from a function, I need to call .outerHTML on every tex element. This could all be avoided if there was a way of concatenating format strings.*/ function joian(a,b){ a.appendChild(b); } let string = `| Frequency | Pitch = ${tex`\log_2({\text{frequency}})`.outerHTML} | difference in ${tex`\log_2({\text{frequency}})`.outerHTML} from first note | --------- | ---------- | ` let logMultiplier = (1/divisions); for(var i=0;i<=divisions;i++){ let freq = startFreq * (2**(i/divisions)); string += `| ${round(freq)} | ${round(Math.log2(freq))} |`; if(i > 0){ string += `+${tex`\frac{${i}}{${divisions}} `.outerHTML} (${round(logMultiplier*i)})`; } string += `\n` } return string; }36:Tfcc,class SoundBuffer { constructor(genFn, duration = 1) { this.duration = duration; // Create an audio buffer. this.audioBuffer = ctx.createBuffer(1, ctx.sampleRate * this.duration, ctx.sampleRate); this.buffer = this.audioBuffer.getChannelData(0); let max = 0; for (let i = 0; i < this.audioBuffer.length; i++) { const value = genFn(i / ctx.sampleRate); this.buffer[i] = value; if (Math.abs(value) > max) max = Math.abs(value); } for (let i = 0; i < this.audioBuffer.length; i++) { this.buffer[i] = this.buffer[i] / max; } } play(maxVol = 0.3) { this.stop(); this.source = ctx.createBufferSource(); this.source.buffer = this.audioBuffer; const gain = ctx.createGain(); gain.gain.value = maxVol; this.source.connect(gain); gain.connect(ctx.destination); this.source.start(); } stop() { if (this.source) this.source.stop(); } draw(height = 50, width = width, color = 'blue') { const drawingCtx = DOM.context2d(width, height); // Draw the middle line. drawingCtx.strokeStyle = 'gainsboro'; drawingCtx.beginPath(); drawingCtx.moveTo(0, height / 2); drawingCtx.lineTo(width, height / 2); drawingCtx.stroke(); // Draw the waveform. drawingCtx.strokeStyle = color; drawingCtx.beginPath(); for (let i = 0; i < width; i++) { const value = this.buffer[Math.floor(i / width * this.audioBuffer.length)]; const y = height - Math.floor((value / 2 + 0.5) * height * 0.9 + height * 0.05); if (i == 0) { drawingCtx.moveTo(i, y); } else { drawingCtx.lineTo(i, y); } } drawingCtx.stroke(); return drawingCtx.canvas; } gui() { const ui = html`

▶ ◼ ${this.duration} s

`; const cursor = ui.querySelector('.cursor'); let interval = null; const resetInterval = () => { if (interval != null) { clearInterval(interval); interval = null; } }; const soundPlayer = ui.querySelector('.sound-player'); ui.querySelector('.sound-pane').appendChild(this.draw(46, width - 20)); ui.querySelector('.play-button').onclick = () => { cursor.style.left = '0'; this.play(); cursor.style.display = 'block'; const playTime = Date.now(); resetInterval(); interval = setInterval(() => { if (!document.contains(soundPlayer)) { resetInterval(); this.stop(); } let progress = (Date.now() - playTime) / this.duration / 1000; if (progress < 0) progress = 0; if (progress > 1) { progress = 1; resetInterval(); this.stop(); cursor.style.display = 'none'; } cursor.style.left = `${Math.floor(progress * (width - 20))}px`; }, 20); }; ui.querySelector('.stop-button').onclick = () => { resetInterval(); this.stop(); cursor.style.display = 'none'; }; return ui; } }37:Td95,class SoundBufferInline { constructor(genFn, duration = 1, height = 50, width=100) { this.width = width; this.height = height; this.duration = duration; // Create an audio buffer. this.audioBuffer = ctx.createBuffer(1, ctx.sampleRate * this.duration, ctx.sampleRate); this.buffer = this.audioBuffer.getChannelData(0); let max = 0; for (let i = 0; i < this.audioBuffer.length; i++) { const value = toSound(genFn)(i / ctx.sampleRate); this.buffer[i] = value; if (Math.abs(value) > max) max = Math.abs(value); } for (let i = 0; i < this.audioBuffer.length; i++) { this.buffer[i] = this.buffer[i] / max; } this.genFn = genFn; } play(maxVol = 0.3) { this.stop(); this.source = ctx.createBufferSource(); this.source.buffer = this.audioBuffer; const gain = ctx.createGain(); gain.gain.value = maxVol; this.source.connect(gain); gain.connect(ctx.destination); this.source.start(); } stop() { if (this.source) this.source.stop(); } draw(color = 'red') { return Draw(this.genFn, this.height, color, this.width); } gui() { const ui = html` ▶ ◼ `; const cursor = ui.querySelector('.inlinecursor'); let interval = null; const resetInterval = () => { if (interval != null) { clearInterval(interval); interval = null; } }; const soundPlayer = ui.querySelector('.inlinesound-player'); ui.querySelector('.inlinesound-pane').appendChild(this.draw()); ui.querySelector('.inlineplay-button').onclick = () => { cursor.style.left = '0'; this.play(); //cursor.style.display = 'block'; //this messes up for some reason const playTime = Date.now(); resetInterval(); interval = setInterval(() => { if (!document.contains(soundPlayer)) { resetInterval(); this.stop(); } let progress = (Date.now() - playTime) / this.duration / 1000; if (progress < 0) progress = 0; if (progress > 1) { progress = 1; resetInterval(); this.stop(); cursor.style.display = 'none'; } cursor.style.left = `${Math.floor(progress * (width - 20))}px`; }, 20); }; ui.querySelector('.inlinestop-button').onclick = () => { resetInterval(); this.stop(); cursor.style.display = 'none'; }; return ui; } }38:Tae8,function display(angle) { let height = 400; const radius = Math.min(width, height) / 2 - 20, arcOffset = Math.PI / 2, arcGen = d3.arc() .innerRadius(0) .outerRadius(radius - 3) .startAngle(arcOffset); const svg = d3.select(DOM.svg(width, height)) .attr('viewBox',`-${width / 2} -${height / 2} ${width} ${height}`); const axis = svg.append('g') .attr('transform', `scale(1, -1)`); const arc = axis.append("path") .attr("fill", '#f2f4f6'); const ticks = axis.append('g') .selectAll('g') .data(d3.range(0, 360, 1)) .enter().append('g') .attr('transform', d => `rotate(${d}) scale(1, -1)`) .append('line') .attr('x2', radius); axis.append('g') .attr('text-anchor', 'middle') .attr("font-size", 10) .attr("font-family", "sans-serif") .selectAll('g') .data(d3.range(0, 360, 30)) .enter().append('g') .attr('transform', d => `rotate(${d - 90}) translate(0, ${radius}) scale(1, -1)`) .append('text') .attr("dy", d => d > 180 ? 16 : -6) .attr('transform', d => `rotate(${d > 180 ? 180 : 0})`) .text(d => `${d}°`); axis.append('circle') .attr('r', 2) .attr('fill', 'black'); axis.append('circle') .attr('r', radius) .attr("cursor", "move") .attr('fill', 'transparent') .call(d3.drag() .on('drag', drag)); const degText = svg.append('text') .attr('text-anchor', 'middle') .attr("dy", -50) .attr('transform', 'scale(2,2)') .text(``); const radText = svg.append('text') .attr('text-anchor', 'middle') .attr("dy", -25) .attr('transform', 'scale(2,2)') .text(``); function drag() { const x = -d3.event.x; const y = -d3.event.y; angle.rad = Math.atan2(y, x) + Math.PI; } function update() { const degrees = Math.round(angle.deg); ticks .attr('x1', tick => tick === degrees ? radius - 20 : tick % 30 ? radius - 3 : radius - 10) .attr('stroke', tick => tick === degrees || tick === 0 && degrees > 359.5 ? 'red' : 'black'); arc.attr('d', arcGen.endAngle(deg2rad(degrees) + arcOffset)); let radAngle = deg2rad(degrees) degText.text(`${degrees}°`); radText.text(`${((x) => x === 1 ? '' : x)(twoDecimalPlaces(radAngle/Math.PI))}π (${twoDecimalPlaces(radAngle)}) rad)`); } function twoDecimalPlaces(x){ return Math.round(x*100)/100; } function deg2rad(deg) { return deg * Math.PI / 180; } function rad2deg(rad) { return rad * 180 / Math.PI; } update(); angle.addEventListener("input", update); return Generators.disposable(svg.node(), () => { angle.removeEventListener("input", update); }); }39:[] 2f:{"id":"26d7cef0868f22e5","slug":"logarithms","title":"Logarithms","thumbnail":"7e162d52ec7bc5c7edb2e4f0a7de33e5a2336d50bef6c08d0914721b585e3418","access_level":"public","create_time":"$D2019-07-17T13:55:38.934Z","update_time":"$D2019-07-19T18:13:27.087Z","view_time":null,"first_public_time":"$D2019-07-29T17:22:58.125Z","fork":{"id":"9839c66d3b020c87","slug":"the-sine-wave","title":"The sine wave","owner":{"id":"dac515665f0522b2","login":"hzsteinberg","name":""}},"stars":3,"starred":false,"owner":{"type":"team","id":"dac515665f0522b2","login":"hzsteinberg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a6dcaef5abbec7806d67ff132df550fef376ba5e0176b83540b7a9222638baef","tier":"starter_2024"},"version":3262,"publish_version":3262,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7b5deb57504c1a2","login":"hzsteinberg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a6dcaef5abbec7806d67ff132df550fef376ba5e0176b83540b7a9222638baef","tier":null}],"members":[{"type":"individual","id":"f7b5deb57504c1a2","login":"hzsteinberg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a6dcaef5abbec7806d67ff132df550fef376ba5e0176b83540b7a9222638baef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Logarithms","cells":[{"id":2165,"value":"md`# Logarithms`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2247,"value":"md`How does the frequency of a sine wave relate to the pitch we hear?\n\nLet's investigate.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2729,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2784,"value":"md`\n## What's going on\n\nSo how do you make an interval between two pitches still sound the same to our brains, even at higher frequencies? Here's how: instead of adding repeatedly, you _multiply_ repeatedly:\n\n${tex`300 \\text{, then } 300 \\cdot 1.1 \\text{, then } 300 \\cdot1.1 \\cdot 1.1`} ${ShowAndPlayInline((t) => Math.sin(t * 300 * (1.1**Math.ceil(t/6))), 2.8, 30, 100)}\n\nHere, listen to what happens if you multiply repeatedly:\n\n${tex`300 \\cdot 1.1^n`} ${ShowAndPlayInline((t) => Math.sin(t * 300 * (1.1**Math.ceil(t/6*2))), 3.8, 30, 100)}\n_(Compare how this sounds to the repeated addition above!)_\n\nIn other words, our ears hear _multiplying_ a frequency as _adding_ the same constant pitch.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2860,"value":"md `\n\n## Logarithms\n\nLogarithms are how we describe that relationship - they're functions that convert multiplication to addition. More specifically, ${tex `\\log(x)`} counts how many multiples of one number (called the \"base\") you need to multiply together to get x. For example, ${tex `\\log_3(81)`} is the number of 3s you need to multiply together to get 81 - and since ${tex`3*3*3*3 = 81`}, that means ${tex `\\log_3(81)=4`}.\n\nIn essence, we're solving this equation for x:\n\n${tex`3^x = 81`}\n\nAnd logarithms can be used to rewrite that same equation as:\n\n${tex`\\log_3(81) = x`}\n\n(By the way, see the ${tex`${3}`} at the bottom of the word ${tex`\\log`} in ${tex`\\log_{${3}}(x)`}? That's the _base_ of this logarithm, because it's on the bottom of the equation ${tex`${3}^x`}. To say \"${tex`\\log_{${3}}(32)`}\" out loud, say \"log base ${3} of 32\".) \n\nThe takeaway: ${tex`\\log_{${3}}(c)`} is equivalent to \"find the value of x in ${tex`${3}^x = c`}\".\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2995,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2617,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2982,"value":"viewof freq = slider({\n min: 110, \n max: 440, \n step: 1, \n value: 300, \n title: 'Starting frequency for tables above', \n description: 'Drag to change the starting frequency in the tables above. Use this to play around with logs, and see how everything changes!'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3059,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3197,"value":"md`\n\n## Make your own equal temperament!\n\nOnce you understand logarithms, it's easy to make an equally tempered scale with a different number of pitches: just change how you divide your interval of +1. Play around with this slider and make your own scale!\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3172,"value":"viewof numDivisions = slider({\n min: 2, \n max: 31, \n step: 1, \n value: 5, \n title: 'Notes to divide an octave into', \n description: 'Drag to change the number of notes in your scale, which will divide an octave into that many pieces!'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3174,"value":"md`\n\n## The frequencies in a ${numDivisions}-tone, equally tempered, musical system:\n\n${makeEqualTemperamentTable(numDivisions, 512)}\n\nPlay every note in this scale: ${playEquallyTemperedScaleInline(numDivisions)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2989,"value":"md`${`

`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3250,"value":"function playEquallyTemperedScaleInline(numNotesInScale){\n let startFreq = 300\n let notesPerSecond = 2\n \n let multiplier = Math.pow(2, 1/numNotesInScale);\n \n return ShowAndPlayInline((t) => Math.sin(t * startFreq * (multiplier**Math.ceil(t / 2 / Math.PI * notesPerSecond ))), ((numNotesInScale)/notesPerSecond + 1/notesPerSecond), 30, 100)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3062,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"ctx = new (window.AudioContext || window.webkitAudioContext)()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"function Draw(genFn, height = 120, color = 'blue', w = width, fudgeScale = 0.5) {\n const drawingCtx = DOM.context2d(w, height);\n // Draw a middle line.\n drawingCtx.strokeStyle = 'gainsboro';\n drawingCtx.beginPath();\n drawingCtx.moveTo(0, height / 2);\n drawingCtx.lineTo(w, height / 2);\n drawingCtx.stroke();\n // Draw the waveform.\n drawingCtx.strokeStyle = color;\n drawingCtx.beginPath();\n const values = [];\n let max = 1;\n for (let i = 0; i < w; i++) {\n const value = genFn(i / width * fudgeScale);\n if (Math.abs(value) > max) max = Math.abs(value);\n values.push(value);\n }\n for (let i = 0; i < w; i++) {\n const value = values[i] / max;\n const y = height - Math.floor((value / 2 + 0.5) * height * 0.9 + height * 0.05);\n if (i == 0) {\n drawingCtx.moveTo(i, y);\n } else {\n drawingCtx.lineTo(i, y);\n }\n }\n drawingCtx.stroke();\n return drawingCtx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1835,"value":"toSound = (f) => ((t) => t===0 ? 0 : f(t * 2 * Math.PI))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":378,"value":"function Play(genFn, duration = 1) {\n return new SoundBuffer(genFn, duration).gui();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1268,"value":"function Play8Bit(genFn, duration = 1) {\n const fn = (t) => {\n const step = Math.floor(t * ctx.sampleRate);\n let value = genFn(step) | 0;\n // Constrain to 8-bits.\n value = value % 256;\n if (value < 0) value += 256;\n // Convert result to real between -1 and 1.\n value = ((value / 256) - 0.5) * 2;\n return value;\n }\n return Play(fn, duration);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"function GenerateTex(prefix, generatorFn, iterations, suffix) {\n let equation = prefix;\n for (let i = 0; i < iterations; i++) equation += generatorFn(i);\n equation += suffix;\n const div = document.createElement('div');\n div.style.overflowX = 'scroll';\n div.style.overflowY = 'hidden';\n div.appendChild(tex`${equation}`);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":569,"value":"function Title(title, elem) {\n const div = document.createElement('div');\n const titleElem = document.createElement('div');\n titleElem.style.marginTop = '5px';\n titleElem.style.fontSize = '0.9em';\n titleElem.style.fontStyle = 'italic';\n titleElem.appendChild(document.createTextNode(title));\n div.appendChild(titleElem);\n div.appendChild(elem);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"function sum(start, end, fn) {\n let total = 0;\n for (let i = start; i <= end; i++) {\n total += fn(i);\n }\n return total;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2438,"value":"function ShowAndPlayInline(genFn, duration, height, width){\n return new SoundBufferInline(genFn,duration, height, width).gui(); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2436,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2199,"value":"function waveString(freq, phase, amp){\n var str = \"\\\\sin(\"+freq + \"t\"\n if(amp != 1){\n str = `${Math.round(amp*100)/100}` + str \n }\n if(phase != 0){\n str += \" + \"+`${Math.round(phase/Math.PI*100)/100}π` \n }\n return str + \")\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2569,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2563,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2839,"value":"function round(n, digits=3){\n return Math.round(n * (10**digits)) / (10**digits);\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2678,"value":"function equationAndBtn(freq, multiplier=10){\n //return `${tex `\\sin(${freq})`}${ShowAndPlayInline((t) => Math.sin(t * freq*multiplier), 1, 30, 100) }`\n \n const span = document.createElement('span');\n span.appendChild(tex `\\sin(${round(freq, 2)})`)\n span.appendChild( ShowAndPlayInline((t) => Math.sin(t * freq*multiplier), 1, 30, 100))\n return span;//\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"