31:T47c,{ const scale = .75; const div = html`

` d3.select(div).style("text-align", 'left') const mArray = [2, 3, 4, 6, 12, 24, 50, 100] mArray.forEach(m => { const canvas = d3.select(div).append("canvas").attr("width", data.width * scale).attr("height", data.height * scale); const context = canvas.node().getContext('2d'); context.scale(scale, scale); 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 }32:[{"id":"e0772622f020a1a5ea271895e48430415c697832c0355f8b9ed657d62ee320503d5adf8f2fc8c6ac27f4db581a4288c4e07f66f7cfb1bf59e9848be461e75fe4","href":"https://static.observableusercontent.com/files/e0772622f020a1a5ea271895e48430415c697832c0355f8b9ed657d62ee320503d5adf8f2fc8c6ac27f4db581a4288c4e07f66f7cfb1bf59e9848be461e75fe4","name":"ray2.jpg","type":"image/jpeg","lastModified":1592858634995.997,"size":49291}] 2f:{"title":"Ray Pettibon Fourier Series","cells":[{"id":0,"value":"md`# Ray Pettibon Fourier Series`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"m = {\n const context = DOM.context2d(data.width, data.height);\n context.lineCap = \"round\";\n context.lineJoin = \"round\";\n for (let m = 0; true; m = (m + 1) % M) {\n context.save();\n context.fillStyle = \"rgba(255, 255, 255, .1)\";\n context.fillRect(0, 0, data.width, data.height);\n for(let x = 0; x < dftArray.length; x++) {\n \n const thisPath = dftArray[x];\n context.beginPath();\n for (let t = 0; t < q; ++t) {\n const a = t * 2 / q * Math.PI;\n let p = [0, 0];\n for (let i = 0; i < m; ++i) {\n p = add(p, mul(thisPath.DFT[i], expim(a * thisPath.K[i])));\n }\n if (t === 0) context.moveTo(...p);\n else context.lineTo(...p);\n }\n context.closePath();\n context.fillStyle = colorScale(x)\n context.strokeStyle = 'black';\n context.fill(); \n context.stroke();\n }\n context.restore();\n context.canvas.value = m;\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"{\n const scale = 1.25;\n const svg = d3.create(\"svg\")\n .attr(\"width\", data.width * scale)\n .attr(\"height\", data.height * scale);\n \n const m = 50\n\n for(let x = 0; x < dftArray.length; x++) {\n\n const thisPath = dftArray[x];\n let pathString = ``\n for (let t = 0; t < q; ++t) {\n const a = t * 2 / q * Math.PI;\n let p = [0, 0];\n for (let i = 0; i < m; ++i) {\n p = add(p, mul(thisPath.DFT[i], expim(a * thisPath.K[i])));\n }\n if (t === 0) pathString += `M ${p[0] * scale} ${p[1] * scale}`;\n else pathString += `L ${p[0] * scale} ${p[1] * scale}`;\n }\n svg.append(\"path\")\n .style(\"fill\", colorScale(x))\n .style(\"stroke\", \"#000\")\n .attr(\"d\", pathString)\n }\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"colorScale = d3.scaleOrdinal(d3.interpolateSpectral)\n .range([\"#000\", \"#fff\"])\n .domain([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`## Data Processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"dftArray = generateDFTArray(svgData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"N = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"M = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"q = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"svgData = potrace.traceCanvas(data.canvas.canvas)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"data = {\n let img = await FileAttachment(\"ray2.jpg\").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"},{"id":52,"value":"md`#### Original`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":" FileAttachment(\"ray2.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`## Imported Modules`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"potrace = require(\"potrace-js-dev@0.0.3/lib/dist/index.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { PathSampler, abs, expim, add, mul, L, C } from '@pstuffa/image-to-progressive-fourier-series'","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"function* generateDFTArray(input) {\n \n const filter = input.filter(d => d.area > 20);\n const data = filter.map(d => `M ${d.points.map(e => `${e.x} ${e.y}`).join(\"L \")} Z`)\n console.log(data)\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"}],"files":"$W32","stdlib":"1","titling":"auto"}