2b:null 2c:["$","title",null,{"children":"Logarithms - alternate ver. | hzsteinberg | Observable"}] 31:T6cd,md`You might notice that one has twice the frequency of the other. Multiplying the frequency by two is called going up an an _octave_. In practice, when you hear a guitar string, you're also hearing lots of frequencies in the octaves above the frequency you hear as the string's frequency. To go up one octave, we take ${tex`300`} and double it to get the frequency ${tex`300*2=600`}. If we wanted to go up an octave again, we could just multiply by two again. We'd be multiplying by 2, then 2 again, for a frequency of ${tex`300*4=1200`}. ${'
'} Here's a new sine wave, with a frequency of ${tex`200`}. ${tex `y = \sin(200t)`} ${ShowAndPlayInline((t) => Math.sin(t * 200), 1, 30, 100) } What should we multiply ${tex`200`} by to go up, say, 3 octaves? We multiply by 2 repeatedly, 3 times, for a multiplier of ${tex`2*2*2 = 2^3=8`}. ${'
'} Finally, here's a different question we can ask: how many octaves does a multiplier of ${tex`*32`} represent? In essence, we're solving this equation for x: ${tex`2^x = 32`} Logarithms are a kind of shorthand for solving this equation. That same equation is written as: ${tex`\log_2(32) = x`} In this case, plugging ${tex`\log_2(32)`} will give 5 , since ${tex`2^5 = 32 `}. ${tex `y = \sin( (200 * 2^5) t)`} ${ShowAndPlayInline((t) => Math.sin(t * 200 * 32), 1, 30, 100) } See the ${tex`${base}`} at the bottom of the word ${tex`\log`} in ${tex`\log_{${base}}(x)`}? It's called the "base" of the logarithm function being used, because it's on the bottom of the equation ${tex`${base}^x`}. To say "${tex`\log_{${base}}(32)`}" out loud, say "log base ${base} of 32". The takeaway: ${tex`\log_{${base}}(c)`} is equivalent to "find the value of x in ${tex`${base}^x = c`}".`32: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; } }33: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; } }34: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); }); }35:[] 2f:{"id":"7e3ce5b14bd234af","slug":"logarithms-alternate-ver","title":"Logarithms - alternate ver.","thumbnail":"83495b81e95b067c47ea5188fe26d497599b2fe0f8ccc1ca7380ff83477e294b","access_level":"public","create_time":"$D2019-07-19T19:20:09.988Z","update_time":"$D2019-07-29T20:06:31.624Z","view_time":null,"first_public_time":"$D2019-07-29T17:23:03.293Z","fork":{"id":"9839c66d3b020c87","slug":"the-sine-wave","title":"The sine wave","owner":{"id":"dac515665f0522b2","login":"hzsteinberg","name":""}},"stars":2,"starred":false,"owner":{"type":"team","id":"dac515665f0522b2","login":"hzsteinberg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a6dcaef5abbec7806d67ff132df550fef376ba5e0176b83540b7a9222638baef","tier":"starter_2024"},"version":2685,"publish_version":2685,"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":1,"collection":null,"type":"notebook","body":{"title":"Logarithms - alternate ver.","cells":[{"id":2165,"value":"md`# Logarithms - alternate ver.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2357,"value":"md`\n\nListen to these two sine waves. Don't they sound similar somehow?\n\n${tex `y_1 = \\sin(300t)`} ${ShowAndPlayInline((t) => Math.sin(t * 300), 1, 30, 100) }\n\n${`
`}\n${tex `y_1 = \\sin(600t)`} ${ShowAndPlayInline((t) => Math.sin(t * 600), 1, 30, 100) }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2130,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2648,"value":"viewof base = slider({\n min: 1.25, \n max: 20, \n step: 0.25, \n value: 2, \n title: 'Base', \n description: 'Drag to change the base of the logarithms in the paragraph above'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2645,"value":"md`\n\nYou 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)`}! Logarithms will smoothly handle numbers like 482 that aren't powers of 10 by returning a real number, however, while digit-counting doesn't.\n\nAlso, ${tex`\\log_x(1) = 0`} no matter what the base x is, because ${tex`x^0 = 1`} no matter the number x.`","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":1816,"value":"","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":"$32","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":"$33","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":"$34","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"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"