30:T1483,class Scope { static READY = 1 static TRACING = 2 static PAUSE = 3 // track where we are with consuming data prev_x = 0; prev_y = 0; dxdtime = 1; state = Scope.READY; gain = 1; display_scale = 0.45; // style strokeTrace = "rgb(0 255 110)"; strokeGrid = "rgb(0 255 110 / 15%)"; fillColor = "rgb(0 45 30)"; constructor(w, h) { this.width = w; this.height = h; this.context_trace = DOM.context2d(w, h); this.context_trace.lineJoin = "round"; this.canvas_trace = this.context_trace.canvas; this.context_bg = DOM.context2d(w, h); this.canvas_bg = this.context_bg.canvas; this.fill(0, w); const divDisplay = document.createElement("div"); divDisplay.style.width = w + "px"; divDisplay.style.color = "#eee"; divDisplay.style.fontFamily = "monospace"; divDisplay.style.fontSize = ".7rem"; divDisplay.style.backgroundColor = "#444"; const hscaleDisplay = document.createElement("span"); hscaleDisplay.innerText = "\xa0"; hscaleDisplay.style.display = "inline-block"; hscaleDisplay.style.padding = "0 1em"; const spsDisplay = document.createElement("span"); spsDisplay.style.padding = "0 1em"; divDisplay.appendChild(hscaleDisplay); divDisplay.appendChild(document.createTextNode("—")); divDisplay.appendChild(spsDisplay); const div = document.createElement("div"); div.style.position = "relative"; div.appendChild(this.canvas_bg); div.appendChild(this.canvas_trace); this.canvas_trace.style.position = "absolute"; this.canvas_trace.style.left = "0px"; this.canvas_trace.style.top = "0px"; div.appendChild(divDisplay); this.hscaleDisplay = hscaleDisplay; this.spsDisplay = spsDisplay; this.spsValue = 0; this.rootEl = div; } setGain(g) { this.gain = g; } fill(x1, x2) { const context = this.context_bg; context.fillStyle = this.fillColor; context.fillRect(x1, 0, x2 - x1, this.height); context.beginPath(); for (var y = -1.0; y < 1.1; y += 0.5) { var py = (0.5 + this.display_scale * y)*this.height; context.moveTo(x1, py); context.lineTo(x2, py); } context.strokeStyle = this.strokeGrid; for (var i = 0; i < 10; ++i) { var x = i * this.width / 10; if (x >= x1 && x < x2) { context.moveTo(x, 0); context.lineTo(x, this.height); } } context.lineWidth = 1.0; context.stroke(); } setApproxTimeShown(desiredSecondsShown) { var secondsShown = Math.pow(10, Math.ceil(Math.log10(desiredSecondsShown))); if (secondsShown * 0.2 >= desiredSecondsShown) secondsShown *= 0.2; else if (secondsShown * 0.5 >= desiredSecondsShown) secondsShown *= 0.5; this.dxdtime = this.width / secondsShown; // text in status bar var unit = "s"; var timePerSub = .1 * secondsShown; // 10 subdivisions if (timePerSub < 1e-3) { unit = "µs"; timePerSub *= 1e6; } else if (timePerSub < 1) { unit = "ms"; timePerSub *= 1000; } timePerSub = ("\xa0\xa0" + timePerSub.toFixed(0)).slice(-3); this.hscaleDisplay.innerText = `${timePerSub} ${unit} per subdivision`; } // the t0 and dt values are angles expressed in turns. // the point where t crosses an integer turn value // acts as the trigger. update(dtime, t0, dt, channel) { if (dt == 0 || this.state == Scope.PAUSE) return; const g = this.gain; const newSps = (1 / dtime); if (this.spsValue != newSps) { this.spsDisplay.innerText = newSps.toFixed(0) + " sps"; this.spsValue = newSps; } var dxdt = this.dxdtime * dtime / dt; var di = 1; // limit to 10 samples for each logical pixel of width // use at least 256 samples of each update while (dt * dxdt < 0.1 && di * 256 < channel.length) { di *= 2; dt *= 2; } var x = this.prev_x; var y = this.prev_y; var trace = new Path2D(); if (this.state == Scope.TRACING) { trace.moveTo(x, y); } for (var i = 0; i < channel.length; i += di) { y = (.5 - g * channel[i] * this.display_scale) * this.height; if (this.state == Scope.READY) { x = (t0 - Math.ceil(t0)) * dxdt; this.prev_x = 0; this.state = Scope.TRACING; trace.moveTo(x, y); } else { x += dt * dxdt; trace.lineTo(x, y); } if (x > this.width) { this.state = Scope.PAUSE // this delay limits us to 20 frames per second, this // avoids heavy CPU usage with low chunk sizes window.setTimeout(() => { this.state = Scope.READY; }, 50); break; } } const prev_x_2 = this.prev_x; this.prev_x = x; this.prev_y = y; window.requestAnimationFrame(() => { const x1 = prev_x_2 == 0 ? 0 : prev_x_2 + 1 const context = this.context_trace; const blank = this.dxdtime < 2000 ? 100 : 1; context.clearRect(x1, 0, x + blank - x1, this.height); context.lineWidth = 2.0; context.strokeStyle = this.strokeTrace; context.stroke(trace); }); } // reset the state to ready to trigger reset() { this.state = Scope.READY; } }31:Td9a,class Wave { static BUFFER_COUNT = 4; t = 0; play = false; sampleRate = 44100; frameCount = 1024; buffers = []; nextStartTime = 0; nextIBuffer = 0; volume = 0; dt = 0; target_dt = 0; // consumers get 5 parameters: // - time: some measure of real time // - dtime: real time difference per sample // - t0: phase angle of the wave form at the start of // this chunk, in turns // - dt: phase angle advance per sample, in turns // - buffer: the buffer with samples consumers = []; constructor(context, sampleRate) { this.context = context; this.sampleRate = sampleRate; for (var i = 0; i < Wave.BUFFER_COUNT; ++i) { var buffer = this.context.createBuffer(1, this.frameCount, this.sampleRate); this.buffers.push(buffer); } this.filter = new Filter(); } set(settings) { const {shape, volume, freq, duty, play, ac, lp_freq, lp_Q} = settings; if (shape == "square") { this.signal = new SquareWave(duty); } else if (shape == "saw") { this.signal = new SawWave(duty); } else if (shape == "triangle") { this.signal = new TriangleWave(duty); } else if (shape == "sine") { this.signal = new SineWave(duty); } else { throw new Error("Wave shape not set"); } this.filter.set(ac, lp_freq, lp_Q, this.sampleRate); this.volume = volume; this.target_dt = freq / this.sampleRate; if (!this.play || !play) this.dt = this.target_dt; this.play = play; if (play && volume != 0) { this.fillBuffer(this.context.currentTime); } } fillBuffer(tCurrent) { this.nextStartTime = Math.max(this.nextStartTime, tCurrent); const duration = this.buffers[0].duration; while (this.nextStartTime < tCurrent + (Wave.BUFFER_COUNT - 1.5) * duration) { this.tick(); } } tick() { const buffer = this.buffers[this.nextIBuffer]; const t0 = this.t; const dt0 = this.dt; const octaves_per_sec = 10; const dtime = 1 / this.sampleRate; const ddt = octaves_per_sec * Math.LOG2E * dtime; const channel = buffer.getChannelData(0); // fill up the audio channel var t = t0; var dt = dt0; for (var i = 0; i < this.frameCount; ++i) { // generate signal and filter channel[i] = this.volume * this.filter.f(this.signal.f(t)); // frequency sweep to the desired frequency if (!dt) { dt = this.target_dt; } else if (dt < this.target_dt) { dt = Math.min(this.target_dt, dt * (1 + ddt)); } else if (this.dt > this.target_dt) { dt = Math.max(this.target_dt, dt * (1 - ddt)); } // increment angle t += this.dt; if (t >= 1) t -= 1; } this.t = t; this.dt = dt; for (var c of this.consumers) { c(this.nextStartTime, dtime, t0, dt0, channel); } if (this.play) { var src = this.context.createBufferSource(); src.buffer = buffer; src.connect(this.context.destination); src.addEventListener("ended", (event) => { if (this.volume > 0 && this.play) this.fillBuffer(this.context.currentTime); }) src.start(this.nextStartTime); } this.nextIBuffer = (this.nextIBuffer + 1) % this.buffers.length; this.nextStartTime += this.frameCount * dtime; } resetTime() { this.nextIBuffer = 0; this.nextStartTime = 0; } stop() { this.play = false; } }32:T89a,class Filter { // AC coupling parameters and state ac_t = 1; prev_ac_y = 0; // low pass filter parameters and state prev_lp_y1 = 0; prev_lp_y2 = 0; lp_a0 = 0; lp_a1 = 0; lp_b0 = 1; set(ac_freq, lp_freq, lp_Q, sampleRate) { // DC or AC coupling (dc is 0 is DC coupling, otherwise it is the // AC knee frequency in Hz) this.ac_t = 2 * Math.PI * ac_freq / sampleRate; // avoid DC offset if AC coupling is disabled: if (ac_freq == 0) this.prev_ac_y = 0; // low pass filter, 2nd order // use formulas found on https://gusbertianalog.com/2nd-digital-filter/ // "A Simple 2nd Order Low-Pass Filter" // by G. F. Gusberti // It is not quite your usual knee frequency / Q factor filter, but it remains // well behaved for very high knee frequencies function cexp(a, b) { const ya = Math.exp(a); return [ya * Math.cos(b), ya * Math.sin(b)]; } var Z = Math.min(0.999, 0.5 / lp_Q); if (lp_freq < 25000) { var ff = lp_freq / sampleRate; // frequency ratio // heuristic correction to fix the higher and higher // cutoff frequency at Q < 1, see data table below // At Q=1.3 it is still nearly 1.0 (0.2% less), // but at Q < 1 it drops quickly. ff *= Math.sqrt(1 - Math.pow(Z, 6)); // pole (complex number a + b·j) var sp_b = 2 * Math.PI * ff; var sp_a = -sp_b * Z / Math.sqrt(1 - Z*Z); // pole in Z plane: zp = exp(sp) var zp_R = Math.exp(sp_a); var zp_th = sp_b; // filter parameters this.lp_a0 = 2 * zp_R * Math.cos(zp_th); this.lp_a1 = -zp_R * zp_R; // inverse of DC gain this.lp_b0 = 1 - 2 * zp_R * Math.cos(zp_th) + zp_R * zp_R; } else { this.lp_b0 = undefined; } } f(y) { // AC coupling var t = this.ac_t; var filter_y = t * y + (1 - t) * this.prev_ac_y; this.prev_ac_y = filter_y; y -= filter_y; if (this.lp_b0 != undefined) { // low pass filter var lp_y = y * this.lp_b0 + this.prev_lp_y1 * this.lp_a0 + this.prev_lp_y2 * this.lp_a1; this.prev_lp_y2 = this.prev_lp_y1; this.prev_lp_y1 = lp_y; y = lp_y; } return y; } }33:[] 2e:{"title":"Sound","cells":[{"id":0,"value":"# Sound\n\nThis is a simple PCM wave generator based on the Web Audio API.\n\n**⚠️ Loudness warning — headphone warning ⚠️**\n\nTake a note of which volume becomes “loud” at around 1000 Hz, and avoid exceeding this volume. Human hearing sensitivity tapers off above a few thousand Hertz. Avoid compensating this with higher volume, you may expose yourself to damaging sound levels especially at high frequencies.","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"viewof wave_setting_base = Inputs.form({\n play: Inputs.toggle({label: \"Play 🔊\"}),\n shape: Inputs.radio([\"saw\", \"square\", \"triangle\", \"sine\"], {label: \"Shape\", value: \"square\"}),\n freq: range([5, 16000], {value: 880, label: \"Frequency\", step: 0.1, transform: Math.log, width: 600}),\n gain: range([0, 1], {label: \"Gain\", step: .001, width: 600, value: .50}),\n duty: range([0, 1], {label: \"Duty\", step: .001, width: 600, value: .5}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"viewof wave_setting_filter = Inputs.form({\n ac: range([0, 5000], {value: 0, label: \"AC coupling (Hz)\", step: 0.1, transform: x => Math.log(x + 20), invert: y => Math.exp(y) - 20, width: 600}),\n lp_freq: range([100, 25e3], {value: 25e3, label: \"Lowpass freq. (Hz)\", step: 0.1, width: 600,\n transform: x => Math.log(x),\n invert: x => Math.exp(x)}),\n lp_Q: range([0.5, 30], {value: 0.5, label: \"Low pass Q factor\", step: 0.01, transform: Math.log, width: 600})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"scope.rootEl","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"This slider sets the output volume at 100% gain. See the warning above before increasing it.","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"viewof volume_setting = Inputs.form({\n volume: range([0, 1], {label: \"Volume\", step: .001, width: 600, value: .15}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"### SFZ representation\n\nGo to https://github.com/roelandschoukens/sf-wave-synth if you want to convert it to an SF2.\n\nThis does not include the duty cycle, the basic wave forms all correspond to 50%.","pinned":false,"hidden":false,"mode":"md"},{"id":981,"value":"sfz = {\n var filters = \"\";\n var f_i = \"\";\n if (wave_setting.lp_freq < 25000) {\n // \"resonance\"\n // Without the hypothenusa this formula predicts the response\n // at the knee frequency. But we want resonance=0 for Q=sqrt(2).\n const resonance = 20 * Math.log10(Math.sqrt(0.5 + wave_setting.lp_Q*wave_setting.lp_Q));\n filters += `fil${f_i}_type=lpf_2p\ncutoff${f_i}=${wave_setting.lp_freq}\nresonance${f_i}=${resonance.toFixed(1)}\n`;\n f_i = (f_i || 1) + 1;\n }\n if (wave_setting.ac > 0) {\n filters += `fil${f_i}_type=hpf_1p\ncutoff${f_i}=${wave_setting.ac}\n`;\n f_i = (f_i || 1) + 1;\n }\n \n const txt = `\nampeg_release=0.005\n\nvolume=${wave_setting.gain}\n${filters}\n\nsample=*${wave_setting.shape} lokey=26 hikey=120\n`;\n \n return htl.html`

${txt}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"wave_setting = ({...wave_setting_base, ...wave_setting_filter, volume: volume_setting.volume * wave_setting_base.gain})","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"scope = new Scope(Math.min(width, 600), 300)","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"scope_updater = {\n // this adds a consumer to our wave generator\n const consumer = (_time, dtime, t0, dt, channel) => {\n scope.update(dtime, t0, dt, channel);\n };\n wave.consumers.push(consumer);\n invalidation.then(() => wave.consumers = wave.consumers.filter(c => c != consumer));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"setting_updater = {\n scope_updater;\n wave.set(wave_setting)\n\n // scope vertical scale\n scope.setGain(Math.min(100, 1 / volume_setting.volume));\n // scope horizontal scale: show a bit over 2 periods\n scope.setApproxTimeShown(2.5 / wave_setting.freq);\n \n if (!wave_setting.play || wave_setting.volume == 0) {\n scope.reset();\n for (var i = 0; i < 1000 && scope.state != Scope.PAUSE; ++i) wave.tick();\n wave.resetTime();\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"import {range} from \"@roelandschoukens/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"wave = {\n const context = new AudioContext();\n const square1 = new Wave(context, Math.min(96000, context.sampleRate * 2));\n invalidation.then(() => {square1.stop(); context.close(); });\n return square1;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":872,"value":"class SquareWave {\n constructor(duty) {\n this.duty = duty;\n }\n\n f(t) {\n return t < this.duty ? 1 : -1;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":875,"value":"class SawWave {\n constructor(duty) {\n const duty2 = duty * 2;\n this.t1 = Math.min(duty2, 2 - duty2);\n this.t2 = this.t1 + Math.max(0, duty2 - 1);\n this.slope = 2 / this.t1;\n }\n \n f(t) {\n return t < this.t1 ? t * this.slope - 1 :\n t < this.t2 ? 1 :\n -1;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":883,"value":"class TriangleWave {\n constructor(duty) {\n var duty2 = duty * 2;\n this.t1 = 0.5 * Math.min(duty2, 2 - duty2);\n this.t2 = this.t1 + Math.max(0, duty2 - 1);\n this.t3 = this.t2 + this.t1;\n this.slope = 2 / this.t1;\n }\n\n f(t) {\n return t < this.t1 ? t * this.slope - 1 :\n t < this.t2 ? 1 :\n t < this.t3 ? (this.t3 - t) * this.slope - 1 :\n -1\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":888,"value":"class SineWave extends TriangleWave {\n constructor(duty) {\n super(duty);\n }\n\n f(t) {\n return Math.sin(0.5 * Math.PI * super.f(t));\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":931,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"viewof table = Inputs.table([\n{Z:1.0 , f: 0.0},\n{Z:0.980, f: 0.192 / 0.574},\n{Z:0.909, f: 0.381 / 0.574},\n{Z:0.833, f: 0.468 / 0.574},\n{Z:0.769, f: 0.510 / 0.574},\n{Z:0.694, f: 0.540 / 0.574},\n{Z:0.625, f: 0.556 / 0.574},\n{Z:0 , f: 0.574 / 0.574}])","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}