25:["$","title",null,{"children":"Sound Visualizer | Keystroke | Observable"}] 4b: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); }4c:T55b,web = () => ` Sound Visualizer

Sound Visualizer

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

Click here to learn more.

`4d:[] 47:{"id":"a3e74067e11a4d8a","slug":"sound-visualizer","title":"Sound Visualizer","thumbnail":"88899988be2db39ff91e3d055e3e22c6d95508b937512b0342b658df0aeb755f","access_level":"public","create_time":"$D2021-02-21T18:26:32.054Z","update_time":"$D2023-10-01T08:44:45.829Z","view_time":null,"first_public_time":"$D2021-02-21T19:01:58.606Z","has_unpublished_edits":null,"fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"cb731a75944ba064","login":"keystroke","name":"Keystroke","avatar_url":"https://avatars-next.observableusercontent.com/9452d8a489eaa2fb9c97f8376cf2ce363149b8befaffff674f516781d0c35155","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":614,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"20811c5ede2aa407","login":"keystroke","name":"Keystroke","avatar_url":"https://avatars-next.observableusercontent.com/2fef62483f1d311fa180546462a7bd2d82a2f7ef9f49c6d87183e950f94be023","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"20811c5ede2aa407","login":"keystroke","name":"Keystroke","avatar_url":"https://avatars-next.observableusercontent.com/2fef62483f1d311fa180546462a7bd2d82a2f7ef9f49c6d87183e950f94be023","tier":null,"role":"editor"}],"comments":[{"id":"f85c6cc782c2fb00","reply_to_id":null,"content":"This is really cool! Thanks for creating this!","create_time":"$D2021-02-21T19:58:33.490Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}},{"id":"fa922fca6697a00b","reply_to_id":"f85c6cc782c2fb00","content":"Thanks! Took a bit of work to figure out how to make the p5 sound library work here. Just started messing around with Observable and very impressed, looking forward to making more fun toys :)","create_time":"$D2021-02-22T03:46:37.328Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"20811c5ede2aa407","login":"keystroke","name":"Keystroke","avatar_url":"https://avatars-next.observableusercontent.com/2fef62483f1d311fa180546462a7bd2d82a2f7ef9f49c6d87183e950f94be023","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sound Visualizer","cells":[{"id":0,"value":"title = md`# Sound Visualizer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`## Settings\n\nLimited settings can be modified below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"import { sketch } from \"@keystroke/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null