30:Tcba,viewof gif = { const lbg_stippling = { r: new Stippling(grid.r, grid_sobel.r, minradius, maxradius), g: new Stippling(grid.g, grid_sobel.g, minradius, maxradius), b: new Stippling(grid.b, grid_sobel.b, minradius, maxradius) }; const ctx = { r: DOM.context2d(w, h, 1), g: DOM.context2d(w, h, 1), b: DOM.context2d(w, h, 1), rgb: DOM.context2d(w, h, 1), }; // once finished splitting, do a few extra relaxation passes let done = { r: lbg_stippling.r.iterate(), g: lbg_stippling.g.iterate(), b: lbg_stippling.b.iterate(), } let max_iterations = 3 * maxIterations; let rData = ctx.r.getImageData(0,0,w,h); let gData = ctx.g.getImageData(0,0,w,h); let bData = ctx.b.getImageData(0,0,w,h); const rgbData = ctx.b.getImageData(0,0,w,h); rgbData.data.fill(255); const gif = new GIF; // to improve per-frame performance a bit, we only update one channel per frame while(!(done.r && done.g && done.b) && (--max_iterations >= 0)) { if (!done.r && (max_iterations%3 === 0)) { done.r = lbg_stippling.r.iterate(); ctx.r.fillStyle = "black"; ctx.r.fillRect(0, 0, w, h); ctx.r.fillStyle = "white"; for(let st of lbg_stippling.r.stipples) { ctx.r.beginPath(); ctx.r.moveTo(st[0], st[1]); ctx.r.arc(st[0], st[1], st.radius, 0, Math.PI * 2); ctx.r.fill(); } rData = ctx.r.getImageData(0,0,w,h); for(let y = 0; y < h; y++) { const line = y * 4 * w; for (let x = 0; x < w; x++) { const idx = x*4 + line; rgbData.data[idx] = rData.data[idx]; } } } if (!done.g && (max_iterations%3 === 1)) { done.g = lbg_stippling.g.iterate(); ctx.g.fillStyle = "black"; ctx.g.fillRect(0, 0, w, h); ctx.g.fillStyle = "white"; for(let st of lbg_stippling.g.stipples) { ctx.g.beginPath(); ctx.g.moveTo(st[0], st[1]); ctx.g.arc(st[0], st[1], st.radius, 0, Math.PI * 2); ctx.g.fill(); } gData = ctx.g.getImageData(0,0,w,h); for(let y = 0; y < h; y++) { const line = y * 4 * w; for (let x = 0; x < w; x++) { const idx = x*4 + line; rgbData.data[idx+1] = gData.data[idx]; } } } if (!done.b && (max_iterations%3 === 2)) { done.b = lbg_stippling.b.iterate(); ctx.b.fillStyle = "black"; ctx.b.fillRect(0, 0, w, h); ctx.b.fillStyle = "white"; for(let st of lbg_stippling.b.stipples) { ctx.b.beginPath(); ctx.b.moveTo(st[0], st[1]); ctx.b.arc(st[0], st[1], st.radius, 0, Math.PI * 2); ctx.b.fill(); } bData = ctx.b.getImageData(0,0,w,h); for(let y = 0; y < h; y++) { const line = y * 4 * w; for (let x = 0; x < w; x++) { const idx = x*4 + line; rgbData.data[idx+2] = bData.data[idx]; } } } ctx.rgb.putImageData(rgbData, 0, 0); ctx.rgb.canvas.style = "width:100%;height:100%;"; gif.addFrame(ctx.rgb.canvas, {copy: true, delay: 25}); yield ctx.rgb.canvas; } gif.on("finished", blob => { ctx.rgb.canvas.value = blob; ctx.rgb.canvas.dispatchEvent(new CustomEvent("input")); }); gif.render(); }31:Tbbf,grid_sobel = { const grid_sobel = { r: { width: w, height: h, values: new Float64Array(w*h), }, g: { width: w, height: h, values: new Float64Array(w*h), }, b: { width: w, height: h, values: new Float64Array(w*h), }, }; function toSobel(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] + sobelValues[i] * sobelFactor * 255 / max; } } toSobel(grid_sobel.r.values, grid.r.values); toSobel(grid_sobel.g.values, grid.g.values); toSobel(grid_sobel.b.values, grid.b.values); return grid_sobel; }32:T14c9,// 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(this.radiusExtent); this.inkDensityToRadius = d3 .scaleLinear() .domain(this.densityGridExtent) .range(this.radiusExtent); 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); } // returns the thresholds for split and delete thresholds(radius) { const area = Math.PI * radius * radius; return [ (1.0 + this.threshold / 2.0) * area, (1.0 - this.threshold / 2.0) * area ]; } // generates `num` random stipples on top of the grid. random_stipples(num) { const stipples = new Array(num); const xran = d3.randomUniform(0, this.width); const yran = d3.randomUniform(0, this.height); for (var i = 0; i < num; ++i) { stipples[i] = [xran(), yran()]; stipples[i].radius = this.radiusExtent[0]; } return stipples; } // performs one iteration of the 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.radiusDensity = 0; st.resolutionDensity = 0; st.moment10 = 0; st.moment01 = 0; st.moment11 = 0; st.moment20 = 0; st.moment02 = 0; } // 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]; st.radiusDensity += densityVal; st.resolutionDensity += resolutionVal; // Moment00 const xval = x*resolutionVal; const yval = y*resolutionVal; st.moment10 += xval st.moment01 += yval st.moment11 += x * yval; st.moment20 += x * xval; st.moment02 += y * yval; } } const { // resolutionGridExtent, // densityGridExtent, resolutionDensityToRadius, inkDensityToRadius } = this; const resolutionGridMax = this.resolutionGridExtent[1]; let deleted = 0; let splitted = 0 const newStipples = []; const {abs, atan2, cos, 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.resolutionDensity; // determine point size based on average intensity const area = abs(d3.polygonArea(polygon)) || 1; const avgDensity = density / area; 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 = inkDensityToRadius(st.radiusDensity / area); 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.moment20 / density - cx * cx; const y = 2 * (st.moment11 / density - cx * cy); const z = st.moment02 / density - cy * cy; 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.radius = renderRadius; // re-use arrays to reduce GC pressure centroid[0] -= deltaX; centroid[1] -= deltaY; centroid.radius = renderRadius; newStipples.push(st, centroid); } else { // Relax st[0] = st.moment10 / density; st[1] = st.moment01 / density; st.radius = renderRadius; newStipples.push(st); } } // we increase the threshold with each iteration for faster convergence this.threshold = this.threshold + this.delta_threshold; this.stipples = newStipples; // is done? return splitted + deleted === 0; } }33:[] 2e:{"title":"Linde-Buzo-Gray Color Stippling","cells":[{"id":0,"value":"md`# Linde-Buzo-Gray Color Stippling\n\nBased on [Jochen Görtler's notebook on Linde-Buzo-Gray stippling](https://observablehq.com/@grtlr/stippling-of-2d-scalar-fields) and [Fil's updated version](https://observablehq.com/@fil/linde-buzo-gray-stippling).\n\nWith GIF-rendering support.\n\nAnd it turns out Fil and I were working on a similar thing at the same time! [Linde–Buzo–Gray RGB Color stippling](https://observablehq.com/@fil/linde-buzo-gray-rgb-color-stippling)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"DOM.download(gif)","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof fileImg = file({\n title: \"Use your own image input!\",\n description: \"Select an image file\",\n accept: \"image/*\",\n multiple: true,\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"viewof minradius = number({placeholder: \"Must be a number!\", title: \"minimum dot radius\", value: 2, submit: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof maxradius = number({placeholder: \"Must be a number!\", title: \"maximum dot radius\", value: 10, submit: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"viewof sobelFactor = number(\n {\n placeholder: \"Must be a number!\",\n title: \"Sobel weight\",\n description: \"Higher values place more dots on edges\",\n value: 4,\n submit: true\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"viewof maxIterations = number(\n {\n placeholder: \"Must be a number!\",\n title: \"Maximum iterations (per channel)\",\n description: \"How long to keep iterating\",\n value: 40,\n submit: true\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"// this object shows the structure needed by Jochen’s implementation\ngrid = {\n const context = DOM.context2d(w, h, 1);\n context.drawImage(im, 0, 0, w, h);\n const data = context.getImageData(0, 0, w, h);\n return {\n r: {\n width: w,\n height: h,\n values: data.data.filter((_, i) => i % 4 === 0),\n },\n g: {\n width: w,\n height: h,\n values: data.data.filter((_, i) => i % 4 === 1),\n },\n b: {\n width: w,\n height: h,\n values: data.data.filter((_, i) => i % 4 === 2),\n },\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"w = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"h = ((im.height / im.width) * w) | 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"im = {\n if (fileImg.length) {\n let img = html``\n img.src = await Files.url(fileImg[0]);\n return img;\n } else return imgGradientColor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"imgGradientColor = {\n const w = 512;\n const h = w;\n const mid = (w-1)/2;\n const mid2 = mid*mid;\n const ctx = DOM.context2d(w, h, 1);\n const imgData = ctx.getImageData(0, 0, w, h);\n const {data} = imgData;\n data.fill(255)\n for (let y = 0; y < h; y++) {\n const line = y*w;\n for(let x = 0; x < w; x++) {\n const idx = (x + line) * 4;\n let dx = x - mid;\n let dy = y - mid;\n const inCircle = dx*dx + dy*dy >= mid2/3;\n \n const g = (inCircle ? x/(w-1) : 1 - x/(w-1)) * 255;\n const b = (inCircle ? y/(h-1) : 1 - y/(h-1)) * 255;\n const r = 255 - Math.max(g,b);\n data[idx] = r;\n data[idx+1] = g;\n data[idx+2] = b;\n }\n }\n ctx.putImageData(imgData, 0, 0);\n ctx.canvas.style = \"width:100%;\";\n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"import {file, number} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"GIF = {\n const gif = await require(\"gif.js@0.2\");\n const workerScript = await fetch(\"https://unpkg.com/gif.js@0.2/dist/gif.worker.js\")\n .then(response => response.blob())\n .then(blob => URL.createObjectURL(blob, {type: \"text/javascript\"}));\n function GIF(options) { gif.call(this, {workerScript, ...options}); }\n GIF.prototype = Object.create(gif.prototype);\n return GIF;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}