31:T428,function draw(p, p5, context) { const { strokeWeight: sw } = settings; const { data, maxs, current } = context; p.background(0); const maxY = p.height / 2.25; const a = 1 / data.length; const r = current / max(maxs); let pow = 1.25; let powMax = p.pow(1, 1 / pow); data.forEach(d => { d.forEach((v, i) => { let n = p.map(i, 0, d.length, 0, 1); let pv = p.pow(n, 1 / pow); let x = p.map(pv, 0, powMax, 5, p.width - 5); //let x = p.map(i, 0, d.length, 5, p.width - 5); let y1 = p.map(v, 0, 1, 0, maxY); let y2 = r * y1; let y = (y1 + y2) / 2; let h = p.map(i, 0, d.length, 0, 360); let s = 100; let b = p.map(p.sqrt(v), 0, 1, 25, 100); p.strokeWeight(p.map(r, 0, 1, sw.min, sw.max) + p.map(n, 0, 1, 1, 0)); p.stroke(h, s, b, a); p.line(x, p.height / 2 + y, x, p.height / 2 - y); }); }); p.noStroke(); p.fill(0, 0, 100); p.text(`FPS: ${Math.round(p.frameRate())}`, p.width - 5, 5); p.text(`LVL: ${Math.min(99, Math.round(100 * r))}`, p.width - 5, 15); }32:T55b,web = () => ` Sound Visualizer

Sound Visualizer

Displays a stylized representation of the data captured by your microphone.

Click here to learn more.

`33:[] 2f:{"title":"Sound Visualizer","cells":[{"id":0,"value":"title = md`# Sound Visualizer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"visualizer = sketch((p, p5) => {\n const context = {};\n p.setup = () => setup(p, p5, context);\n p.draw = () => {\n update(p, p5, context);\n draw(p, p5, context);\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"md`_{^{_This is a placeholder for a more advanced visualization. Check back later for updates._}}\n\nDisplays a stylized frequency spectrum of the data captured by your microphone.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`## Settings\n\nLimited settings can be modified below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"// these setting values were derived using a 2013 macbook built-in microphone and playing music through the built-in speakers\nsettings = ({\n // size\n width: 900,\n height: 425,\n samples: 512, // number of frequency samples\n frequency: { min: 10, max: 12500 }, // frequency range\n frequencyBias: { min: 5, max: 50 }, // size of samples in hz, scaled by frequency\n strokeWeight: { min: 3, max: 4 }, // thickness of each sample\n scaling: { min: 3.25, max: 3.33 }, // multiply the value of each frequency sample by this weighted number\n // fft\n smoothing: { min: 0.7, max: 0.76, step: 0.05 }, // multiple FFT instances with different smoothing settings\n bins: 2048, // fidelity of each FFT instance (must be power of 2)\n history: Math.round(60 * 1.5), // number of frames to remember activity for scaling\n useLowPass: false // filter-out lower-frequency sounds\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`
\n## Sketch\n\nThe [p5.js](https://p5js.org/) library organizes a sketch into _setup_ and _draw_ callbacks;\nwe've added an additional _update_ callback to separate the act of updating the data from rendering it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"function setup(p, p5, context) {\n const { width, height, bins, useLowPass, smoothing, samples } = settings;\n p.createCanvas(width, height);\n p.colorMode(p.HSB, 360, 100, 100, 1.0);\n p.textAlign(p.RIGHT, p.TOP);\n context.audioIn = new p5.AudioIn();\n context.audioIn.start();\n if (useLowPass) {\n context.lowPass = new p5.LowPass();\n context.lowPass.disconnect();\n context.audioIn.connect(context.lowPass);\n }\n //\n context.ffts = [];\n for (let s = smoothing.min; s <= smoothing.max; s += smoothing.step) {\n let fft = new p5.FFT(s, bins);\n fft.setInput(context.audioIn);\n context.ffts.push(fft);\n console.log({ smooth: s });\n }\n context.data = context.ffts.map(fft => Array(samples).fill(0));\n context.maxs = Array(settings.history).fill(0);\n //\n console.log(context);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"function update(p, p5, context) {\n const { frequency, samples, scaling, history, frequencyBias } = settings;\n const { ffts, data, maxs } = context;\n p.getAudioContext().resume();\n ffts.forEach(fft => fft.analyze());\n let fr = (frequency.max - frequency.min) / samples / 2;\n let m = 0;\n ffts.forEach((fft, i) => {\n data[i].forEach((x, i, a) => {\n let f = p.map(i, 0, samples, frequency.min, frequency.max);\n let fr = p.map(i, 0, samples, frequencyBias.min, frequencyBias.max);\n let s = p.map(f, frequency.min, frequency.max, scaling.min, scaling.max);\n let e = fft.getEnergy(f - fr, f + fr) ** s;\n a[i] = e;\n if (e > m) m = e;\n });\n });\n data.forEach(d => normalize(d, true));\n maxs[p.frameCount % history] = m;\n context.current = m;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`
\n## Appendix\n\nBuilt using the\n[p5.js](https://p5js.org/)\nand\n[p5.sound.js](https://p5js.org/reference/#/libraries/p5.sound)\nlibraries in\n[_instance mode_](https://p5js.org/reference/#/p5/p5)\nas an\n[_async generator_](https://observablehq.com/@observablehq/introduction-to-generators).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"import { sketch } from \"@keystroke/p5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"function normalize(buffer = [], in_place = false) {\n const m = max(buffer);\n return in_place\n ? buffer.forEach((e, i, b) => (b[i] = e / m))\n : buffer.map(v => v / m);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"function max(buffer = []) {\n return buffer.reduce((p, c) => (p > c ? p : c), buffer[0]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}