2b:null 2c:["$","title",null,{"children":"The sine wave | hzsteinberg | Observable"}] 31:T5a7,md`Changing the phase doesn't change the sound of this particular sine wave very much, but it will be more important when multiple sine waves interact. ## Radians You may have also noticed that the phase slider above is displayed in multiples of π. Why? When you use the functions Sin(x) and Cos(x), x is an _angle_. Instead of being measured in degrees, this angle is being measured in _radians_. You may be familiar with measuring angles in degrees, where 360° is a full circle, but sometimes mathematicians like to use units of _radians_, where a full revolution is 2π radians. Why are radians built around 2π? This may seem arbitrary at first, but it makes certain calculations more convenient: if you draw an arc on a circle, the angle that arc makes in radians will be the same value as the length of the arc itself. That means if a circle with a radius of 1 rolls a full revolution (an angle of 2π radians), it will have rolled a distance that's also 2π. ![Gif](https://upload.wikimedia.org/wikipedia/commons/4/4e/Circle_radians.gif) _animation by LucasVB from wikimedia commons_ You'll encounter radians fairly often when working with sine waves, especially since most programming languages' trigonometric functions like sin() and cos() accept values in radians, not degrees. Here's an interactive radian-to-degree converter - if you're not used to radians, play around with different angles to get a feel for how they work. `32:Tde7,{ //code adapted from https://observablehq.com/@toja/radial-input let height = 500; let rads = Math.PI/4; const radius = Math.min(width, height) / 2 - 40, 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); //degree marks 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}°`); //radian marks 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+20}) scale(1, -1)`) .append('text') .attr("dy", d => d > 180 ? 16 : -6) .attr('transform', d => `rotate(${d > 180 ? 180 : 0})`) .text(d => `${displayRadianAngleInTermsOfPi(deg2rad(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) .on('start', drag)); const degText = svg.append('text') .attr('text-anchor', 'middle') .attr("dy", -50) .attr('pointer-events', 'none') .attr('transform', 'scale(2,2)') .text(``); const radText = svg.append('text') .attr('text-anchor', 'middle') .attr("dy", -25) .attr('pointer-events', 'none') .attr('transform', 'scale(2,2)') .text(``); function drag() { const x = -d3.event.x; const y = -d3.event.y; rads = Math.atan2(y, x) + Math.PI; update(); } function update() { const degrees = Math.round(rad2deg(rads)); 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(`${displayRadianAngleInTermsOfPi(radAngle)} (${twoDecimalPlaces(radAngle)}) rad)`); } function displayRadianAngleInTermsOfPi(x){ let displayAngle = twoDecimalPlaces(x/Math.PI); if(displayAngle == 1){ return 'π' } return displayAngle + 'π'; } 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(); return Generators.disposable(svg.node()); }33: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; } }34: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; } }35: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); }); }36:[] 2f:{"id":"9839c66d3b020c87","slug":"the-sine-wave","title":"The sine wave","thumbnail":"9a8ded1a388a5b16d2b97f6db6cd79dc8be0429011da6aff99d502f377b3a54c","access_level":"public","create_time":"$D2019-06-26T14:23:50.850Z","update_time":"$D2019-08-05T19:59:03.281Z","view_time":null,"first_public_time":"$D2019-07-29T17:22:54.726Z","fork":{"id":"91a89ae51cf1e4ca","slug":"music","title":"The sine wave","owner":{"id":"5c4e44301f49454b","login":"yclicc","name":"Matthew Billson"}},"stars":4,"starred":false,"owner":{"type":"team","id":"dac515665f0522b2","login":"hzsteinberg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a6dcaef5abbec7806d67ff132df550fef376ba5e0176b83540b7a9222638baef","tier":"starter_2024"},"version":2672,"publish_version":2672,"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":7,"collection":null,"type":"notebook","body":{"title":"The sine wave","cells":[{"id":2165,"value":"md`# The sine wave`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"md`Step 1: Go read https://pudding.cool/2018/02/waveforms/ !\n\n# Parameters of a Sine Wave\n\nMost of the waves in that article were sine waves, named after the ${tex `\\sin()`} function used to make them. It's pretty simple - as t increases, (moving to the right on the graph) y will move up and down, because that's what ${tex `\\sin()`} does. Here's a sine wave graphed in red:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2225,"value":"Title(\"It's a sine wave! Click the play button below to hear it through your speakers.\", ShowAndPlayInline(sineWaveRed, 1, 200, 800))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2174,"value":"md`The equation to graph that sine wave is ('t' stands for time):\n\n${tex.block `y = ${waveString(freq, phaseShift, amplitude)}`}\n\nWhat's that ${freq} doing there? It's the _frequency_ of the sine wave: the speed at which a sine wave goes up and down. Adjust it using this slider, then click the play button below the red graph to hear your wave:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1776,"value":"viewof freq = slider({\n min: 110, \n max: 440, \n step: 1, \n value: 220, \n title: 'Sine wave frequency', \n description: 'Drag to change the frequency, then click play above to hear your new wave. What direction makes the wave sound lower? How about higher?'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2327,"value":"md`There's also the _amplitude_ of a sine wave, which changes how large the wave is. Mathematically you're just multiplying the sine wave by some number. For sound waves, decreasing the amplitude will sound quieter.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2329,"value":"viewof amplitude = slider({\n min: -1, \n max: 1, \n step: 0.01, \n value: 1, \n title: 'Amplitude', \n description: 'Drag to change the amplitude of the red sine wave above.'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2245,"value":"md`Finally, there's the _phase_ of a sine wave, which changes where in the cycle the sine wave starts. Mathematically, changing a sine wave's phase just adds a constant, moving the graph above left or right:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2247,"value":"viewof phaseShift = slider({\n min: 0, \n max: Math.PI*2, \n step: Math.PI/32, \n value: 0, \n format: v => v === 0 ? 0 : `${Math.round(v/Math.PI*100)/100}π`,\n title: 'Sine wave phase shift', \n description: 'Drag to change the phase of the red sine wave above'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2268,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2572,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2617,"value":"md`\nHere's a table of common radian-degree conversion factors:\n\n| Radians | Degrees | \n| ------ | ---------- | \n| 0| 0° |\n| 0.167π, or π/6 | 30°\n| 0.25π, or π/4 | 45°\n| 0.5π, or π/2 | 90°\n| π | 180°\n| 1.5π, or 3π/2 | 270°\n| 2π | 360°\n\n(See if you can recreate some of the conversions in this table using the interactive widget above!)\n`","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":"sineWaveRed = (t) => amplitude * Math.sin(t * freq + phaseShift)","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":"$33","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":"$34","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":"$35","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":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"