2b:null 2c:["$","title",null,{"children":"Audio Visualizations | Derrek Chow | Observable"}] 31:T659,{ const { CanvasSpace, Pt, Group, Geom, Sound, Curve, Num, Util, Noise } = Pts; const root = html`

`; const space = new CanvasSpace(root).setup({ bgcolor: 'black'}); const form = space.getForm(); let sound; const bins = 2048; const rows = 100; const segSize = 20; Sound.input().then( s => { sound = s.analyze(bins); }); space.add((time, ftime) => { if (sound) { let freq = sound.freqDomainTo(space.size).slice(0, bins/2).segments(segSize, 12, true).reverse(); let waves = []; for(let row = Math.round(rows/6); row < Math.round(rows - rows/6) + 1; row++) { const y = space.height/rows * row; const curFreq = freq[row%freq.length]; let leftWave = []; let centerWave = []; let rightWave = []; for (let i=0; i new Pt(Num.lerp(l1, l2, i/curFreq.length), y - yDelta); leftWave.push(pt( space.width/4, space.width * 4/10 - 10, Math.sqrt(curFreq[i].y)/2 )); centerWave.push(pt( space.width * 4/10, space.width * 3/5, Math.pow(curFreq[i].y, 3)/800000 )); rightWave.push(pt( space.width * 3/5 + 10, space.width * 3/4, Math.sqrt(curFreq[i].y)/2 )); }; waves.push(leftWave.concat(centerWave, rightWave)); } form.fill('black').stroke('white').lines( waves ); } }); space.play(); return root; }32:T547,{ const { CanvasSpace, Pt, Group, Geom, Sound, Curve, Shaping, Num, Polygon } = Pts; const root = html`

`; const space = new CanvasSpace(root).setup({ bgcolor: 'black'}); const form = space.getForm(); let sound; const bins = 16; const segSize = 4; const rows = 16; Sound.input().then( s => { sound = s.analyze(bins); }); space.add((time, ftime) => { if (sound) { let freq = sound.freqDomainTo(space.size).segments(segSize, segSize, true); const pt = (a, m) => new Pt(space.center).toAngle(a, m, true); for(let row = 0; row < rows; row++) { let rings = [[], [], [], []]; const y = (space.height/rows * row)/2; const curFreq = freq[row%freq.length]; for (let i=0; i form.strokeOnly('white').polygon(ring, 1, 'circle')); } } }); space.play(); return root; }33:T434,{ const { CanvasSpace, Pt, Color, Geom, Sound, Curve, Shaping, Num, Line } = Pts; const root = html`

`; const space = new CanvasSpace(root).setup({ bgcolor: 'black'}); const form = space.getForm(); let sound; const bins = 32; Sound.input().then( s => { sound = s.analyze(bins); }); const createLine = (angle, mag) => Line.fromAngle(space.center, angle, mag); space.add((time, ftime) => { if (sound) { const tDomain = sound.freqDomainTo(space.size); for (let bin=0; bin`; const space = new CanvasSpace(root).setup({ bgcolor: 'black'}); const form = space.getForm(); let sound; const bins = 64; Sound.input().then( s => { sound = s.analyze(bins); }); const closeCurve = (poly) => { poly.push( poly.p1, poly.p2, poly.p3 ); return poly; } const createWave = (i, base, radius, rand) => { let poly = Create.radialPts( base.add(0, i*5 + radius), radius, 4); poly.shear2D(1, base, 'xx'); return closeCurve(poly); } space.add((time, ftime) => { if (sound) { let waves = []; const freq = sound.timeDomainTo([0, 50]); for (let i=0; i`; const space = new CanvasSpace(root).setup({ bgcolor: 'black'}); const form = space.getForm(); let sound; const bins = 32; Sound.input().then( s => { sound = s.analyze(bins); }); const makeWave = (root, offset, freq) => Line.fromAngle(root.add(offset, 0), Math.PI/2, freq); const displayText = (root, code) => form.text(root, String.fromCharCode(code)); space.add((time, ftime) => { if (sound) { let curveWave = new Group(); const freq = sound.freqDomainTo(space.size); let codes = []; let maxFreq = 0; for (let r = 0; r < bins; r++) { const f = freq[r].y; //codes.push(freq[r].y); if (f > 0) { maxFreq = r; } codes.push(Math.round(freq[r].y / 50)*50); let circleWave = Line.fromAngle(new Pt(space.width/2, space.height*3/4 - 100), (Math.PI*2*r)/bins, f/5); let verticalWave = makeWave(new Pt((space.width/4), space.height/2 - 70), (space.width/2*r)/bins, -f/7); let curve = makeWave(new Pt((space.width/4), space.height - 70), (space.width/2*r)/bins, (-2*(r%2) + 1)*f/20).p2; form.strokeOnly('white', 2).line(circleWave); form.line(verticalWave); curveWave.push(curve); } form.stroke('grey').line(Line.fromAngle(new Pt(space.width/4, space.height/2 - 60), 0, space.width/2)); form.stroke('white').line(Line.fromAngle(new Pt(space.width/4, space.height/2 - 60), 0, (space.width/2*maxFreq)/bins)); form.line(Curve.cardinal(curveWave)); form.fill('white').font(8); codes.map((code, i) => { if (i%2 == 0){ displayText(new Pt((space.width/4) + (space.width/2)*(i/bins), space.height/4 - 70), code+9455+i); } }) } }); space.play(); return root; }36:Tb4f,{ const { CanvasSpace, Pt, Color, Line, Sound, Curve, Group, Rectangle, Num } = Pts; const root = html`

`; const space = new CanvasSpace(root).setup({ bgcolor: 'black'}); const form = space.getForm(); let sound; const bins = 16; const numTeeth = 7; Sound.input().then( s => { sound = s.analyze(bins); }); const cycle = t => Num.cycle(t%500/500); let teeth = new Group(); let x = 0; space.add({ start: () => { for (let i=1; i<=numTeeth+1; i++) { teeth.push(new Group( new Pt(), new Pt(), new Pt(), new Pt(), new Pt(), new Pt(), new Pt(), )) } }, animate: (time, ftime) => { const corner = new Pt(0, 0); const l = teeth.length; const halfLine = [new Pt(0, space.height/2), new Pt(space.width, space.height/2)]; if (sound) { let freq = sound.freqDomainTo(space.size); const teethWhite = teeth.map((tooth, i) => { const f = freq[(l-i+x)%l].y + i; const centerX = i*space.width/numTeeth; // center tooth[0].x = centerX; tooth[0].y = 0; tooth[1].x = centerX - f/5; tooth[1].y = 0; tooth[2].x = centerX; tooth[2].y = 0; tooth[3].x = centerX; tooth[3].y = f; tooth[4].x = centerX; tooth[4].y = 0; tooth[5].x = centerX + f/5; tooth[5].y = 0; tooth[6].x = centerX; tooth[6].y = 0; return Curve.bspline(tooth, 10, 1); }); x++; // const teethRed = teethWhite.clone().map( // (tooth, i) => { // return tooth.subtract(10, 0); // } // ); // const teethBlue = teethWhite.clone().map( // (tooth, i) => { // return tooth.add(10, 0); // } // ); form.composite('screen'); // form.fillOnly(Color.rgb(0,0,255,0.5)).lines(teethBlue); // form.fill(Color.rgb(255,0,0,0.5)).lines(teethRed); form.fillOnly(Color.rgb(255,255,255,0.5)).lines(teethWhite); form.composite('source-over'); form.fillOnly('black').rect(Rectangle.fromTopLeft(corner.$add(0, space.height/2), space.width, space.height/2)); form.clip(); teethWhite.reflect2D(halfLine); // teethRed.reflect2D(halfLine); // teethBlue.reflect2D(halfLine); form.composite('screen'); // form.fillOnly(Color.rgb(0,0,255,0.5)).lines(teethBlue); // form.fill(Color.rgb(255,0,0,0.5)).lines(teethRed); form.fillOnly(Color.rgb(255,255,255,0.5)).lines(teethWhite); } } }); space.play(); return root; }37:[] 2f:{"id":"f9fc33d56244f336","slug":"music","title":"Audio Visualizations","thumbnail":"4927424092557d27128ac98aaa33f0e799759fd1bc992ff84cf474dfdd070189","access_level":"public","create_time":"$D2020-03-18T20:24:22.967Z","update_time":"$D2022-02-13T00:21:11.823Z","view_time":null,"first_public_time":"$D2020-03-28T19:45:56.856Z","fork":true,"stars":8,"starred":false,"owner":{"type":"team","id":"7379da9d7bdd9cce","login":"derrekchow","name":"Derrek Chow","avatar_url":"https://avatars-next.observableusercontent.com/483faf9752ba95e84c69a0bae2b1751b69e840b4dd9d1d7714a73617227b14b9","tier":"starter_2024"},"version":5217,"publish_version":5217,"role":null,"authored":false,"authors":[{"type":"individual","id":"6e16d847ff39e577","login":"derrekchow","name":"Derrek Chow","avatar_url":"https://avatars-next.observableusercontent.com/483faf9752ba95e84c69a0bae2b1751b69e840b4dd9d1d7714a73617227b14b9","tier":null}],"members":[{"type":"individual","id":"6e16d847ff39e577","login":"derrekchow","name":"Derrek Chow","avatar_url":"https://avatars-next.observableusercontent.com/483faf9752ba95e84c69a0bae2b1751b69e840b4dd9d1d7714a73617227b14b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"a3505bc03b6998bb","slug":"pt-js","title":"Creative Coding","owner":{"id":"7379da9d7bdd9cce","login":"derrekchow","name":"Derrek Chow"}},"type":"notebook","body":{"title":"Audio Visualizations","cells":[{"id":161,"value":"md`# Audio Visualizations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1452,"value":"md `## Enable your microphone and play some music (you might need to refresh the page)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":560,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1478,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2199,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2684,"value":"{\n const { CanvasSpace, Pt, Color, Circle, Sound, Shaping, Num } = Pts;\n const root = html`

`;\n const space = new CanvasSpace(root).setup({ bgcolor: 'black'});\n const form = space.getForm();\n \n let sound;\n const bins = 16;\n let slices = [];\n let prevFreq;\n \n Sound.input().then( s => {\n sound = s.analyze(bins);\n });\n \n space.add((time, ftime) => { \n if (sound) {\n const freq = sound.freqDomainTo(space.size);\n for (let r = 0; r < bins; r++) {\n let radius = Num.clamp(freq[r].y/5 + r*12, 0, space.width/2);\n let circle = Circle.fromCenter(space.center, radius);\n let c = (r/bins)*150;\n let color = Color.HSLtoRGB( Color.hsl((c-time/20)%360, 1, 0.5) );\n form.strokeOnly(color).circle(circle);\n }\n }\n });\n\n space.play();\n\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3218,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3785,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4078,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"Pts = require('pts')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"