2a:null 2b:["$","title",null,{"children":"Sine Waves and Harmonics | hzsteinberg | Observable"}] 30:T5d2,class CombinedTemporalSine extends SineDrawer{ //instead of drawing a string, draws the resulting wave. constructor(freqs=[1,2,3], height=80, yFraction=0.5){ super(1, height, yFraction); this.frequencies = freqs; this.numFrequencies = freqs.length; this.height = height // / (Math.log(this.frequencies.length+1)); } calcColor(normalizedX){ //solid green because why not let gVal = 1; let rVal = 0; return 'rgb('+(rVal*255) + ','+(gVal*255)+',0)' } estimateSecondDerivativeAt(normalizedX){ let dx = 0.001; let derivative1 = (this.wave(normalizedX-dx) - this.wave(normalizedX))/dx; let derivative2 = (this.wave(normalizedX) - this.wave(normalizedX+dx))/dx; let derivative = (derivative1 - derivative2) /dx let scaleFactor = 1/Math.log(this.frequencies.length+1) / 2; return derivative*scaleFactor; } clamp(val, min, max){ return Math.max(Math.min(val, max), min); } sinewave(normalizedX, frequency){ //normalizedX from 0 to 1 let timeVaryingPart = Math.sin((this.time/2+normalizedX) * Math.PI * 2 * frequency); let staticPart = 1; //no static part here, all time-varying let amplitude = 1/frequency; let sineval = staticPart * timeVaryingPart * amplitude; return sineval; } wave(normalizedX){ let sineval = 0; for(let i=0;i width){ continue; } if(objects[i].dead){ continue; //kill some old particles if above a max limit } newObjects.push(objects[i]); } this.last_t = t; this.particles = newObjects; } draw(){ this.context.clearRect(0, 0, this.width, this.height); for(var i=0;i 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:[] 2e:{"id":"860adcc5c5294f2d","slug":"sine-waves-and-harmonics","title":"Sine Waves and Harmonics","thumbnail":"912010930d5fd7dbc8c5c49b45316eab45630df60de5ef4c030ace1bab08ee17","access_level":"public","create_time":"$D2019-08-01T16:34:35.869Z","update_time":"$D2019-08-07T16:21:19.802Z","view_time":null,"first_public_time":"$D2019-08-01T18:13:05.537Z","has_unpublished_edits":null,"fork":{"id":"9839c66d3b020c87","slug":"the-sine-wave","title":"The sine wave","owner":{"id":"dac515665f0522b2","login":"hzsteinberg","name":""}},"stars":7,"starred":false,"owner":{"type":"team","id":"dac515665f0522b2","login":"hzsteinberg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a6dcaef5abbec7806d67ff132df550fef376ba5e0176b83540b7a9222638baef","tier":"starter_2024"},"version":3013,"publish_version":3013,"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,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sine Waves and Harmonics","cells":[{"id":2720,"value":"md`# Sine Waves and Harmonics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2685,"value":"{\n function restart(objects, lines, height){\n }\n \n let canvasHeight = width > 500 ? 500 : 300;\n let sineHeight = width > 500 ? 200 : 100;\n let s = new InfiniteSimulation(width,canvasHeight);\n restart(s.objects, s.lines, s.height);\n s.objects = [new SineDrawer(1, sineHeight), new SineDrawer(2, sineHeight), new SineDrawer(3, sineHeight)];\n \n s.context.canvas.onclick = function(event){\n let x = event.layerX;\n let y = event.layerY;\n }\n \n while (true) {\n s.run(s)\n s.draw(s)\n yield s.context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2791,"value":"md`\n${Title(\"Here's what a wave vibrating like this would sound like!\",ShowAndPlayInline((t) => nthpartial(t,1) + nthpartial(t,2) + nthpartial(t,3), 1, 30, 100)) }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2771,"value":"md` # Individual Harmonics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2778,"value":"viewof harmonicNumberToDisplay = slider({\n min: 1, \n max: 12, \n step: 1, \n value: 1, \n title: 'Harmonics', \n description: 'Drag to change the specific harmonic drawn below.',\n format: (x) => ordinal(x)+' harmonic, dividing line into '+x+' equal part' + (x===1 ? '' : 's')\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2773,"value":"{\n function restart(objects, lines, height){\n }\n \n let canvasHeight = width > 500 ? 400 : 200;\n let sineHeight = width > 500 ? 150 : 75;\n \n let s = new InfiniteSimulation(width,canvasHeight );\n restart(s.objects, s.lines, s.height);\n s.objects = [new SineDrawer(harmonicNumberToDisplay, sineHeight)];\n \n s.context.canvas.onclick = function(event){\n let x = event.layerX;\n let y = event.layerY;\n }\n \n while (true) {\n s.run(s)\n s.draw(s)\n yield s.context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3000,"value":"md`\n${ShowAndPlayInline((t) => nthpartial(t, harmonicNumberToDisplay), 1, 30, 100) }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2775,"value":"md`# Multiple Harmonics At Once!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2745,"value":"viewof numHarmonics = slider({\n min: 1, \n max: 12, \n step: 1, \n value: 1, \n title: 'Number of harmonics', \n description: 'Drag to change the number of harmonics drawn below'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2916,"value":"{\n let canvasHeight = width > 500 ? 600 : 400;\n let sineHeight = width > 500 ? 200 : 130;\n \n let s = new InfiniteSimulation(width,canvasHeight );\n for(var i=1;i<=numHarmonics;i++){\n s.objects.push(new SineDrawer(i, sineHeight*2/3, 1/3));\n }\n let freqs = []\n for(var i=1;i<=numHarmonics;i++){\n freqs.push(i);\n }\n s.objects.push(new CombinedTemporalSine(freqs, sineHeight/4, 3/4));\n \n while (true) {\n s.run(s)\n s.draw(s)\n yield s.context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2803,"value":"md`\n${ShowAndPlayInline((t) => {\n let val = 0;\n for(var i=1;i<=numHarmonics;i++){\n val += nthpartial(t, i);\n }\n return val;\n}, 1, 30, 100) }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2889,"value":"md`## How the Vibrating String Actually Looks\n(Or, adding together all the harmonics)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2860,"value":"{\n function restart(objects, lines, height){\n }\n \n let canvasHeight = width > 500 ? 400 : 200;\n let sineHeight = width > 500 ? 120 : 75;\n \n let s = new InfiniteSimulation(width,canvasHeight );\n restart(s.objects, s.lines, s.height);\n let freqs = []\n for(var i=1;i<=numHarmonics;i++){\n freqs.push(i);\n }\n s.objects.push(new CombinedSine(freqs, sineHeight));\n \n while (true) {\n s.run(s)\n s.draw(s)\n yield s.context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2959,"value":"{\n //plot of only the multiple-freq view, without sawtooth under it\n /*\n\n let canvasHeight = width > 500 ? 400 : 200;\n let sineHeight = width > 500 ? 150 : 75;\n \n let s = new InfiniteSimulation(width,canvasHeight );\n for(var i=1;i<=numHarmonics;i++){\n s.objects.push(new SineDrawer(i, sineHeight));\n }\n \n while (true) {\n s.run(s)\n s.draw(s)\n yield s.context.canvas;\n }*/\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2793,"value":"viewof fundamentalFreq = slider({\n min: 110, \n max: 440, \n step: 1, \n value: 300, \n title: 'Fundamental frequency', \n description: 'Drag to change the fundamental frequency (for audio).'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2795,"value":"function nthpartial(t, n){\n return Math.sin(t*fundamentalFreq * n)/n; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2784,"value":"function ordinal(n){\n let firstFew = ['st','nd','rd']\n if((n%10) < 3)return n + firstFew[(n%10)]\n return n + 'th'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"ctx = new (window.AudioContext || window.webkitAudioContext)()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2921,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2856,"value":"class CombinedSine extends SineDrawer{\n constructor(freqs=[1,2,3], height=80, yFraction=0.5){\n super(1, height, yFraction);\n this.frequencies = freqs;\n \n this.height = height / (Math.log(this.frequencies.length+1));\n }\n estimateSecondDerivativeAt(normalizedX){\n let dx = 0.001;\n let derivative1 = (this.wave(normalizedX-dx) - this.wave(normalizedX))/dx;\n let derivative2 = (this.wave(normalizedX) - this.wave(normalizedX+dx))/dx;\n \n let derivative = (derivative1 - derivative2) /dx\n let scaleFactor = 1/Math.log(this.frequencies.length+1) / 2;\n \n return derivative*scaleFactor;\n \n }\n clamp(val, min, max){\n return Math.max(Math.min(val, max), min); \n }\n \n wave(normalizedX){\n let sineval = 0;\n for(let i=0;i 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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2436,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 2f:"$2e:body"