2f:T562,md`# A Fast SVG Stipple Generator By some freak coincidence, I had *two* people request a version of my stippling notebooks that would render to SVG in one week. So I gave it a shot over the weekend. Good excuse to try to make the whole thing a bit faster and more polished! New features: - Save as SVG. Now you can save and print it as big as you want to! - Support both Linde-Buzo-Gray stippling for quickly converging on a decent stipple image, and "plain" Voronoi relaxation to recover fine detail - The Linde-Buzo-Gray implementation got another optimizing pass and is a bit faster again - Stippling is done in a worker to avoid freezing the browser - Option to *not* show intermediate renders - Ability to manually override ink density (does not require the stipples to be processed again) - Option for Gaussian pre-blurring of the Sobel input (currently a bit buggy results) - Choose which color channel to use as the input TO DO: - cancel rendering option - option to continue rendering with existing stipples with new settings, instead of starting from scratch - better Sobel pre-filters - apply the blur in a worker - current Gaussian blur is a bit buggy, - maybe use symmetric nearest neighbour as a filter option - perf: split option dependencies further out to avoid pointless reactivity - example: only re-blur Sobel when other sobel radius changes `30:T719,viewof options = form(html``)31:T1dce,// decouple resolution (stipples per area) from ink density (stipple radius) class Stippling { constructor(densityGrid, resolutionGrid, minRadius, maxRadius) { this.densityGrid = densityGrid; this.resolutionGrid = resolutionGrid; // assumes widh and height are the same for both grids this.width = resolutionGrid.width; this.height = resolutionGrid.height; this.densityGridExtent = d3.extent(densityGrid.values); this.resolutionGridExtent = d3.extent(resolutionGrid.values); this.radiusExtent = [minRadius, maxRadius]; this.resolutionDensityToRadius = d3 .scaleLinear() .domain(this.resolutionGridExtent) .range([minRadius, maxRadius]); this.threshold = 0.4; this.delta_threshold = 0.01; // we initialize the algorithm with random stipples - 1 per 25x25 pixels this.stipples = this.random_stipples(this.width*this.height / 625 | 0); } // generates `num` random stipples on top of the grid. random_stipples(num) { const stipples = [] const xran = d3.randomUniform(0, this.width); const yran = d3.randomUniform(0, this.height); for (var i = 0; i < num; ++i) { stipples[i] = [ xran(), // x yran(), // y // d3.Delaunay only cares about the first two // values as coordinates and ignores the rest, // so we can safely store all other data in the // array. This is slightly faster than adding // properties dynamically. this.radiusExtent[0], // radius 0, // radiusDensity 0, // resolutionDensity 0, // moment10 0, // moment01d 0, // moment11 0, // moment20 0, // moment02 ]; } return stipples; } // performs one iteration of the LBG stippling algorithm iterate() { const delaunay = d3.Delaunay.from(this.stipples), voronoi = delaunay.voronoi([0, 0, this.width, this.height]); // initialize densities for(let i = 0; i < this.stipples.length; i++) { const st = this.stipples[i]; st[3] = 0; // radiusDensity st[4] = 0; // resolutionDensity aka moment00 st[5] = 0; // moment10 st[6] = 0; // moment01 st[7] = 0; // moment11 st[8] = 0; // moment20 st[9] = 0; // moment02 } // compute the density and the weighted centroid of each cell var found = 0; for(let y = 0, {stipples, width} = this, dValues = this.densityGrid.values, rValues = this.resolutionGrid.values; y < this.height; y++) { const line = y * width; for(let x = 0; x < width; x++) { found = delaunay.find(x, y, found); const st = stipples[found]; const densityVal = dValues[x + line]; const resolutionVal = rValues[x + line]; const xval = x*resolutionVal; const yval = y*resolutionVal; st[3] += densityVal; // radiusDensity st[4] += resolutionVal; // resolutionDensity aka moment00 st[5] += xval; // moment10 st[6] += yval; // moment01 st[7] += x * yval; // moment11 st[8] += x * xval; // moment20 st[9] += y * yval; // moment02 } } const { resolutionDensityToRadius, } = this; const resolutionGridMax = this.resolutionGridExtent[1]; let deleted = 0; let splitted = 0 const newStipples = []; const {abs, atan2, cos, min, sin, sqrt, PI } = Math; for (let i = 0; i < this.stipples.length; i++) { const polygon = voronoi.cellPolygon(i); if (!polygon) continue; const st = this.stipples[i]; const density = st[4]; // resolutionDensity aka moment00 // determine point size based on average intensity const area = abs(d3.polygonArea(polygon)); const avgDensity = area ? density / area : 0; const resolutionRadius = resolutionDensityToRadius(avgDensity); const resolutionArea = PI * resolutionRadius * resolutionRadius * resolutionGridMax; const splitThreshold = (1.0 + this.threshold / 2.0) * resolutionArea; const deleteThreshold = (1.0 - this.threshold / 2.0) * resolutionArea; const renderRadius = sqrt(st[3]) / 16; // radiusDensity if (density < deleteThreshold) { deleted++; } else if (density > splitThreshold) { // Split splitted++; const centroid = d3.polygonCentroid(polygon); const cx = centroid[0]; const cy = centroid[1]; const dist = sqrt(area / PI) / 2.0; const x = st[8] / density - cx * cx; // moment20 const y = 2 * (st[7] / density - cx * cy); // moment11 const z = st[9] / density - cy * cy; // moment02 var orientation = atan2(y, x - z) / 2.0; var deltaX = dist * cos(orientation); var deltaY = dist * sin(orientation); st[0] = cx + deltaX; st[1] = cy + deltaY; st[2] = renderRadius; // re-use arrays to reduce GC pressure centroid[0] -= deltaX; centroid[1] -= deltaY; centroid.push( renderRadius, 0, // radiusDensity 0, // resolutionDensity 0, // moment10 0, // moment01 0, // moment11 0, // moment20 0, // moment02 ); newStipples.push(st, centroid); } else { // Relax st[0] = st[5] / density; // moment10 st[1] = st[6] / density; //moment01 st[2] = renderRadius; newStipples.push(st); } } // we increase the threshold with each iteration for faster convergence this.threshold = min(1, this.threshold + this.delta_threshold); this.stipples = newStipples; // is done? return splitted + deleted === 0; } // Performs plain Voronoi relaxation (can be used to "clean up" LBG stippling that doesn't converge) relax() { const delaunay = d3.Delaunay.from(this.stipples), voronoi = delaunay.voronoi([0, 0, this.width, this.height]); // initialize densities for(let i = 0; i < this.stipples.length; i++) { const st = this.stipples[i]; st[3] = 0; // radiusDensity st[4] = 0; // resolutionDensity aka moment00 st[5] = 0; // moment10 st[6] = 0; // moment01 } // compute the density and the weighted centroid of each cell var found = 0; for(let y = 0, {stipples, width} = this, dValues = this.densityGrid.values, rValues = this.resolutionGrid.values; y < this.height; y++) { const line = y * width; for(let x = 0; x < width; x++) { found = delaunay.find(x, y, found); const st = stipples[found]; const densityVal = dValues[x + line]; const resolutionVal = rValues[x + line]; const xval = x*resolutionVal; const yval = y*resolutionVal; st[3] += densityVal; // radiusDensity st[4] += resolutionVal; // resolutionDensity aka moment00 st[5] += xval; // moment10 st[6] += yval; // moment01 } } const {abs, sqrt} = Math; for (let i = 0; i < this.stipples.length; i++) { const polygon = voronoi.cellPolygon(i); if (!polygon) continue; const st = this.stipples[i]; // determine point size based on average intensity const renderRadius = sqrt(st[3]) / 16; // radiusDensity // Relax const density = st[4] st[0] = st[5] / density; // moment10 st[1] = st[6] / density; // moment01 st[3] = renderRadius; } } }32:T98f,function toSobel(w, h, sobelFactor, sobelValues, values) { // Top row { const v = values[0]; const vxp = v - values[1]; const vyp = v - values[w]; sobelValues[0] = Math.sqrt(vxp*vxp + vyp*vyp); } for (let x = 1; x < w-1; x++) { const v = values[x]; const vxm = v - values[x - 1]; const vxp = v - values[x + 1]; const vyp = v - values[x + w]; sobelValues[x] = Math.sqrt(vxm*vxm + vxp*vxp + vyp*vyp); } { const v = values[w-1]; const vxm = v - values[w-2]; const vyp = v - values[w+w-1]; sobelValues[w-1] = Math.sqrt(vxm*vxm + vyp*vyp); } // Middle part for (let y = 1; y < h-1; y++) { const line = y * w; // leftmost column let v = values[line]; let vxp = v - values[line + 1]; let vym = v - values[line - w]; let vyp = v - values[line + w]; sobelValues[line] = Math.sqrt(vxp*vxp + vym*vym + vyp*vyp); // middle for (let x = 1; x < w-1; x++) { const idx = x + line; v = values[idx]; const vxm = v - values[idx - 1]; vxp = v - values[idx + 1]; vym = v - values[idx - w]; vyp = v - values[idx + w]; sobelValues[idx] = Math.sqrt(vxm*vxm + vxp*vxp + vym*vym + vyp*vyp); } // rightmost column v = values[line + w - 1]; let vxm = v - values[line + w - 2]; vym = v - values[line - 1]; vyp = v - values[line + w + w - 1]; sobelValues[line + w - 1] = Math.sqrt(vxm*vxm + vym*vym + vyp*vyp); } // sobel values for bottom row const bottomRow = (h-1)*w; { const v = values[bottomRow]; const vxp = v - values[bottomRow + 1]; const vym = v - values[bottomRow - w]; sobelValues[bottomRow] = Math.sqrt(vxp*vxp + vym*vym); } for (let x = 1; x < w-1; x++) { const idx = bottomRow + x const v = values[idx]; const vxm = v - values[idx - 1]; const vxp = v - values[idx + 1]; const vym = v - values[idx - w]; sobelValues[idx] = Math.sqrt(vxm*vxm + vxp*vxp + vym*vym); } { const idx = h*w-1 const v = values[idx]; const vxm = v - values[idx - 1]; const vym = v - values[idx - w]; sobelValues[idx] = Math.sqrt(vxm*vxm + vym*vym); } let max = 0; for(let i = 0; i < sobelValues.length; i++) if (sobelValues[i] > max) max = sobelValues[i]; for(let i = 0; i < sobelValues.length; i++) { sobelValues[i] = values[i] > 0 ? (values[i] + sobelValues[i] * sobelFactor * 255 / max) / (1 + sobelFactor) : 0; } }33:T664,function gaussianBlurTwoPass(source, width, height, radius) { let target = new Uint8ClampedArray(source.length), buffer = new Float64Array(source.length); const kernel = bellcurvish1D(radius); let totalWeight = 0; for(let i = 0; i < kernel.length; i++) totalWeight += kernel[i]; const norm = 1 / totalWeight; const {min, max} = Math; // Horizontal pass for(let y = 0; y < height; y++) { const line = y * width * 4; for (let x = 0; x < width; x++) { let r = 0, g = 0, b = 0; for (let dx = -radius; dx <= radius; dx++) { const weight = kernel[radius + dx] const _dx = dx*4; const cIdx = max(0, min( width-1, x+dx))*4 + line; r += source[cIdx] * weight; g += source[cIdx + 1] * weight; b += source[cIdx + 2] * weight; } const cIdx = x*4 + line; buffer[cIdx] = r * norm; buffer[cIdx+1] = g * norm; buffer[cIdx+2] = b * norm; } } // Vertical pass for(let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { let r = 0; let g = 0; let b = 0; for (let dy = -radius; dy <= radius; dy++) { const weight = kernel[radius + dy]; const line = max(0, min(height-1, y + dy)) * width * 4; const cIdx = x*4 + line; r += buffer[cIdx] * weight; g += buffer[cIdx + 1] * weight; b += buffer[cIdx + 2] * weight; } const line = y * width * 4; const cIdx = x*4 + line; target[cIdx] = r * norm; target[cIdx+1] = g * norm; target[cIdx+2] = b * norm; target[cIdx+3] = 255; } } return target; }34:Tb05,messageHandler = { // stub, just for workerscript let grid, gridSobel, w, h, stippling; function postMessage(foo){} return function onmessage(event) { const { data: { imgData, width, height, minRadius, maxRadius, sobelFactor, maxIterations, totalRelaxations, channel, showProgress, invert, blurRadius, } } = event; w = width; h = height; [grid, gridSobel] = initGrids(sobelFactor, blurRadius, channel, invert, imgData, width, height); postMessage({grid, gridSobel}); stippling = new Stippling(grid, gridSobel, minRadius, maxRadius) for(let i = 1, done = false; i <= maxIterations; i++) { if (!done) { done = stippling.iterate(); } else { stippling.relax(); } let message = i < maxIterations || totalRelaxations > 0 ? `Rendering - iteration ${i}/${maxIterations},` : "Done!"; message += ` ${stippling.stipples.length} points` if (showProgress || i%10 === 0 || i == maxIterations) { const points = new Float64Array(stippling.stipples.length * 3); for(let j = 0, {stipples} = stippling; j < stipples.length; j++) { const st = stipples[j]; const idx = j*3; points[idx] = st[0]; points[idx+1] = st[1]; points[idx+2] = st[2]; // radius } postMessage({message, points}, [points.buffer]); } else { postMessage({message}); } } for(let i = 1; i <= totalRelaxations; i++) { stippling.relax(); let message = !showProgress || i < totalRelaxations ? `Rendering - relaxation ${i}/${totalRelaxations},` : "Done!"; message += ` ${stippling.stipples.length} points` if (showProgress || i%40 === 0 || i == totalRelaxations) { const points = new Float64Array(stippling.stipples.length * 3); for(let j = 0, {stipples} = stippling; j < stipples.length; j++) { const st = stipples[j]; const idx = j*3; points[idx] = st[0]; points[idx+1] = st[1]; points[idx+2] = st[2]; // radius } postMessage({message, points}, [points.buffer]); } else { postMessage({message}); } } // Pass final result if we didn't pass the previous renders if (!showProgress) { const points = new Float64Array(stippling.stipples.length * 3); for(let j = 0, {stipples} = stippling; j < stipples.length; j++) { const st = stipples[j]; const idx = j*3; points[idx] = st[0]; points[idx+1] = st[1]; points[idx+2] = st[2]; // radius } postMessage({message: `Done! ${stippling.stipples.length} points`, points}, [points.buffer]); } }; }35:T727,function svgOutput(points) { const svgPoints = []; const {round} = Math; for(let i = 0; i < points.length; i += 3) { // let's limit the subpixel precision, yeah? const x = round(points[i] * 100) / 100; const y = round(points[i+1] * 100) / 100; const radius = round(points[i+2] * 100) / 100; svgPoints.push([x, y, radius]); } const svg = d3.select(DOM.svg(im.naturalWidth || im.width, im.naturalHeight || im.height)); svg.append("g") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", im.naturalWidth || im.width) .attr("height", im.naturalHeight || im.height) .attr("fill", optionsInvert.invert ? "black" : "white"); svg.append("g") .attr("fill", optionsInvert.invert ? "white" : "black") .selectAll("circle") .data(svgPoints) .join("circle") .attr("r", d => d[2] * inkDensity.inkDensity) .attr("cx", d => d[0]) .attr("cy", d => d[1]) // convert to serialized SVG const xmlns = "http://www.w3.org/2000/xmlns/"; const xlinkns = "http://www.w3.org/1999/xlink"; const svgns = "http://www.w3.org/2000/svg"; const fragment = window.location.href + "#"; const svgNode = svg.node(); const walker = document.createTreeWalker(svgNode, NodeFilter.SHOW_ELEMENT, null, false); while (walker.nextNode()) { for (const attr of walker.currentNode.attributes) { if (attr.value.includes(fragment)) { attr.value = attr.value.replace(fragment, "#"); } } } svgNode.setAttributeNS(xmlns, "xmlns", svgns); svgNode.setAttributeNS(xmlns, "xmlns:xlink", xlinkns); const serializer = new window.XMLSerializer; const string = serializer.serializeToString(svgNode); return new Blob([string], {type: "image/svg+xml"}); }36:[{"id":"14959f050311f400368624031a7b9e4285f35c65ca4022f618f9250d7163ef4b0a0582de20f7d9790ed76b3442b4a77ebb96b86f641c1d8466f6544325144aed","href":"https://static.observableusercontent.com/files/14959f050311f400368624031a7b9e4285f35c65ca4022f618f9250d7163ef4b0a0582de20f7d9790ed76b3442b4a77ebb96b86f641c1d8466f6544325144aed","name":"obama.png","type":"image/png","lastModified":1583091549292.376,"size":619051},{"id":"d8d9ef3cede3660a91775bb134dc2e79282fed526b3a44ad19efa618858bdca25d0242298310454db223c3018b1b4df3e57f1db03f488ac5b7bf5e6982c6ab92","href":"https://static.observableusercontent.com/files/d8d9ef3cede3660a91775bb134dc2e79282fed526b3a44ad19efa618858bdca25d0242298310454db223c3018b1b4df3e57f1db03f488ac5b7bf5e6982c6ab92","name":"david2.jpg","type":"image/jpeg","lastModified":1617461511619.647,"size":217681}] 2d:{"title":"A Fast SVG Stipple Generator","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"html`

${iterationMessage}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"canvasPreview = {\n if (points === undefined) {\n return html`

Please wait while rendering completes

`;\n } else {\n const w = im.naturalWidth || im.width;\n const h = im.naturalHeight || im.height;\n const ctx = DOM.context2d(w,h);\n ctx.fillStyle = optionsInvert.invert ? \"black\" : \"white\";\n ctx.fillRect(0, 0, w, h);\n ctx.fillStyle = optionsInvert.invert ? \"white\" : \"black\"\n const density = inkDensity.inkDensity;\n for(let i = 0; i < points.length; i += 3) {\n const radius = points[i+2] * density;\n // if (radius < 0.1) continue;\n ctx.beginPath();\n ctx.moveTo(points[i], points[i+1]);\n ctx.arc(points[i], points[i+1], radius, 0, Math.PI * 2);\n ctx.fill();\n }\n return ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"viewof inkDensity = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"saveButton = {\nif (iterationMessage && iterationMessage.startsWith(\"Done!\")) {\n let name;\n if (fileImg[0]) {\n name = fileImg[0].name.split(\".\")\n name.pop();\n name.push(\"svg\");\n name = name.join(\".\");\n } else {\n name = \"stipples.svg\"\n }\n return DOM.download(() => svgOutput(points), name, \"Save as SVG\");\n }\n else { \n return html``\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"viewof optionsInvert = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"delayedUpdate = {\n const button = html``;\n button.onclick = () => { \n mutable points = undefined;\n mutable iterationMessage = \"Awaiting first iteration\";\n startWorker(Object.assign(\n { \n imgData: imgData.data,\n width: imgData.width,\n height: imgData.height\n },\n optionsInvert,\n options));\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"html`

Input Image

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof fileImg = file({\n title: \"Select custom image input\",\n description: \"Select an image file\",\n accept: \"image/*\",\n multiple: true,\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"input = html`${im}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"html`

Implementation

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"function initGrids(sobelFactor, blurRadius, channel, invert, data, w, h) {\n channel = channel | 0;\n const grid = {\n width: w,\n height: h,\n values: new Float64Array(w*h),\n };\n if (invert) {\n for(let i = 0; i < w*h; i++) {\n grid.values[i] = data[i*4 + channel];\n }\n } else {\n for(let i = 0; i < w*h; i++) {\n grid.values[i] = 255 - data[i*4 + channel];\n }\n }\n\n const gridSobel = {\n width: w,\n height: h,\n values: new Float64Array(w*h),\n }\n const blurValues = blurRadius > 0 ? gaussianBlurTwoPass(grid.values, w, h, blurRadius) : grid.values;\n toSobel(w, h, sobelFactor, gridSobel.values, blurValues);\n return [grid, gridSobel];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"initGrids(options.sobelFactor, options.blurRadius, +options.channel, options.invert, imgData.data, imgData.width, imgData.height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"function bellcurvish1D(radius) {\n const p = new Uint32Array(radius+1);\n for (let i = 0; i <= (radius+1)/2; i++){\n for (let j = 0; j <= radius/2; j++) {\n p[i+j]++;\n }\n }\n const q = new Uint32Array(p.length*2 - 1);\n for (let i = 0; i < p.length; i++){\n for (let j = 0; j < p.length; j++) {\n q[i+j] += p[j];\n }\n }\n\n const quadratic = [];\n for (let v of q){\n quadratic.push(v*v);\n }\n return quadratic;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"workerScript = {\n\n const script = `\nimportScripts(\"${await require.resolve(\"d3@5\")}\", \"${await require.resolve(\"d3-delaunay@5\")}\");\n\n${Stippling.toString()}\n\n${initGrids.toString()}\n\n${toSobel.toString()}\n\n${gaussianBlurTwoPass.toString()}\n\n${bellcurvish1D.toString()}\n\nlet grid, gridSobel, w, h, stippling;\n\nonmessage = ${messageHandler.toString()}\n`;\n const blob = new Blob([script], {type: 'text/javascript'});\n const url = URL.createObjectURL(blob);\n invalidation.then(() => {\n URL.revokeObjectURL(url);\n });\n return url;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"startWorker = {\n let worker;\n invalidation.then(() => {\n if (worker) worker.terminate();\n })\n\n return (settings) => {\n // end previous worker session\n if (worker) worker.terminate();\n worker = new Worker(workerScript);\n const messaged = (e) => { \n if (e.data.points) {\n mutable points = e.data.points;\n }\n mutable iterationMessage = e.data.message;\n };\n worker.onmessage = messaged;\n // Initial render\n worker.postMessage(settings);\n return \"worker initiated\"\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"startWorker(defaultSettings)","pinned":true,"hidden":false,"mode":"ojs"},{"id":778,"value":"defaultSettings = {\n await obamaData;\n return {\n imgData: obamaData.data,\n width: obamaData.width,\n height: obamaData.height,\n showProgress: true,\n invert: false,\n channel: \"0\",\n minRadius: 0.25,\n maxRadius: 2,\n sobelFactor: 0,\n blurRadius: 0,\n inkDensity: 0.6,\n maxIterations: 30,\n totalRelaxations: 50\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"mutable points = undefined","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"mutable iterationMessage = \"Awaiting first iteration\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"obama = {\n const obama = await FileAttachment(\"david2.jpg\").image();\n return obama;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":657,"value":"obamaData = {\n const width = obama.naturalWidth || obama.width;\n const height = obama.naturalHeight || obama.height\n const context = DOM.context2d(width, height, 1);\n context.drawImage(obama, 0, 0, width, height);\n return context.getImageData(0, 0, width, height);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"im = {\n if (fileImg.length) {\n let img = new Image();\n img.src = await Files.url(fileImg[0]);\n return img;\n } else return obama;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"imgData = {\n const width = im.naturalWidth || im.width;\n const height = im.naturalHeight || im.height\n const context = DOM.context2d(width, height, 1);\n context.drawImage(im, 0, 0, width, height);\n return context.getImageData(0, 0, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"import {file} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"import {form} from \"@mbostock/form-input\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n const fragment = window.location.href + \"#\";\n const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT, null, false);\n while (walker.nextNode()) {\n for (const attr of walker.currentNode.attributes) {\n if (attr.value.includes(fragment)) {\n attr.value = attr.value.replace(fragment, \"#\");\n }\n }\n }\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}