2b:null 2c:["$","title",null,{"children":"Stravinsky Fourier Series | Casey Miller | Observable"}] 31:T47a,m = { const context = DOM.context2d(data.width, data.height); context.lineCap = "round"; context.lineJoin = "round"; const getRandom = (min, max) => { return Math.random() * (max - min) + min; } let vTime = 2; let forward = false; for (let m = 0; true; m = (m + vTime) % M) { context.save(); context.fillStyle = "rgba(255, 255, 255, .1)"; context.fillRect(0, 0, data.width, data.height); for(let x = 0; x < dftArray.length; x++) { const thisPath = dftArray[x]; context.beginPath(); for (let t = 0; t < q; ++t) { const a = t * 2 / q * Math.PI; let p = [0, 0]; for (let i = 0; i < m; ++i) { p = add(p, mul(thisPath.DFT[i], expim(a * thisPath.K[i]))); } if (t === 0) context.moveTo(...p); else context.lineTo(...p); } context.closePath(); context.fillStyle = colorScale(x) // context.strokeStyle = 'black' // context.fill(); context.stroke(); // console.log(m) } context.restore(); context.canvas.value = m; // vTime = getRandom(2, 4); yield context.canvas; } }32:T491,// { // const div = html`

` // d3.select(div).style("text-align", 'left') // const mArray = [2, 3, 4, 6, 12, 24, 50] // mArray.forEach(m => { // const canvas = d3.select(div).append("canvas").attr("width", data.width).attr("height", data.height); // const context = canvas.node().getContext('2d'); // context.lineCap = "round"; // context.lineJoin = "round"; // context.fillStyle = "rgba(255, 255, 255, .1)"; // context.fillRect(0, 0, data.width, data.height); // for(let x = 0; x < dftArray.length; x++) { // const thisPath = dftArray[x]; // context.beginPath(); // for (let t = 0; t < q; ++t) { // const a = t * 2 / q * Math.PI; // let p = [0, 0]; // for (let i = 0; i < m; ++i) { // p = add(p, mul(thisPath.DFT[i], expim(a * thisPath.K[i]))); // } // if (t === 0) context.moveTo(...p); // else context.lineTo(...p); // } // context.closePath(); // context.fillStyle = colorScale(x) // context.strokeStyle = 'black' // context.fill(); // context.stroke(); // } // }) // return div // }33:[{"id":"5110b47776bdb47058b928109e93e10296bbafe9125929c89161aa9a2fc9015523d92992dea88bc59da4589cabfd7d5b083604e756c2405de94cde85280437aa","href":"https://static.observableusercontent.com/files/5110b47776bdb47058b928109e93e10296bbafe9125929c89161aa9a2fc9015523d92992dea88bc59da4589cabfd7d5b083604e756c2405de94cde85280437aa","name":"Screen Shot 2020-12-30 at 6.38.58 PM.png","type":"image/png","lastModified":1609382472972.198,"size":53087},{"id":"6e640e6e2df443c8c8b1025af2b5c8163542ed1bccfa533b947a919a517bed9dd64646283c7d3b8460b871572f17a1b1d49364679864e04b7009ad23deec31fb","href":"https://static.observableusercontent.com/files/6e640e6e2df443c8c8b1025af2b5c8163542ed1bccfa533b947a919a517bed9dd64646283c7d3b8460b871572f17a1b1d49364679864e04b7009ad23deec31fb","name":"Screen Shot 2020-12-31 at 1.32.25 PM.png","type":"image/png","lastModified":1609450391407.181,"size":206207}] 2f:{"id":"feaaa951c48c093b","slug":"stravinsky-fourier-series","title":"Stravinsky Fourier Series","thumbnail":"83f230dcb8329006118f95f5888fcbfcd47b68621dfea69c90850d61bd006420","access_level":"public","create_time":"$D2020-12-31T02:40:47.051Z","update_time":"$D2020-12-31T23:10:46.094Z","view_time":null,"first_public_time":"$D2020-12-31T02:42:11.039Z","fork":{"id":"4d7f5d1b47afe3e1","slug":"stravinsky-fourier-series","title":"Stravinsky Fourier Series","owner":{"id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa"}},"stars":1,"starred":false,"owner":{"type":"team","id":"ee4c04021961f6e3","login":"caseymm","name":"Casey Miller","avatar_url":"https://avatars-next.observableusercontent.com/f6277f9072a7c1c6b20dde6d95e2294d5398af56338ebf10f147b35690073875","tier":"starter_2024"},"version":238,"publish_version":238,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c2c40f2bd537268","login":"caseymm","name":"Casey Miller","avatar_url":"https://avatars-next.observableusercontent.com/f6277f9072a7c1c6b20dde6d95e2294d5398af56338ebf10f147b35690073875","tier":null}],"members":[{"type":"individual","id":"3c2c40f2bd537268","login":"caseymm","name":"Casey Miller","avatar_url":"https://avatars-next.observableusercontent.com/f6277f9072a7c1c6b20dde6d95e2294d5398af56338ebf10f147b35690073875","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Stravinsky Fourier Series","cells":[{"id":0,"value":"md`# Stravinsky Fourier Series`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"colorScale = d3.scaleSequential(d3.interpolateSpectral)\n .domain([0, dftArray.length])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`## Data Processing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"dftArray = generateDFTArray(svgData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"N = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"M = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"q = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"svgData = potrace.traceCanvas(data.canvas.canvas)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"data = {\n let img = await FileAttachment(\"Screen Shot 2020-12-31 at 1.32.25 PM.png\").image();\n let ctx = DOM.canvas(img.width, img.height).getContext('2d');\n ctx.drawImage(img, 0, 0);\n return {\n image: ctx.getImageData(0, 0, img.width, img.height).data,\n width: img.width,\n height: img.height,\n canvas: ctx\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`#### Original`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":" FileAttachment(\"Screen Shot 2020-12-30 at 6.38.58 PM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`## Imported Modules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"potrace = require(\"potrace-js-dev@0.0.3/lib/dist/index.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { PathSampler, abs, expim, add, mul, L, C } from '@pstuffa/image-to-progressive-fourier-series'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function* generateDFTArray(input) {\n \n const data = input.map(d => `M ${d.points.map(e => `${e.x} ${e.y}`).join(\"L \")} Z`)\n\n const output = []\n for(let i = 0; i < data.length; i++) {\n const array = data[i]\n const sampler = new PathSampler(array);\n const P = Array.from({length: N}, (_, i) => sampler.pointAt(i / N));\n const K = Int16Array.from({length: M}, (_, i) => (1 + i >> 1) * (i & 1 ? -1 : 1));\n const DFT = Array.from(K, k => {\n let x = [0, 0];\n for (let i = 0; i < N; ++i) {\n x = add(x, mul(P[i], expim(k * i * 2 / N * -Math.PI)));\n }\n return [x[0] / N, x[1] / N];\n })\n output.push({\n P: P,\n K: K,\n DFT: DFT,\n sampler: sampler,\n array: array\n })\n }\n \n yield output\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"