31:T504,viewof lensEffectSettings = { if (lensEffectMode === "vignette") return form(html``); if (lensEffectMode === "tiltShift") return form(html``); return form(html``); }32:T645,viewof options = form(html``)33:T6c3,description = md`

Wait, what is this?

It's a notebook I created to make it really easy to create your own stippled SVG images! A selection of other notebooks in this series: - [Voronoi Stippling](https://observablehq.com/@mbostock/voronoi-stippling) by [**Mike Bostock**](https://observablehq.com/@mbostock/) - [Stippling of 2D Scalar Fields](https://observablehq.com/@grtlr/stippling-of-2d-scalar-fields?ui=classic) by [**Jochen Görtler**](https://observablehq.com/@grtlr/), - [Linde–Buzo–Gray stippling](https://observablehq.com/@fil/linde-buzo-gray-stippling), a more up-to-date version by [**@fil**](https://observablehq.com/@fil/) - [Linde-Buzo-Gray RGB Color Stippling](https://observablehq.com/@fil/linde-buzo-gray-rgb-color-stippling) by [**@fil**](https://observablehq.com/@fil/) - [Linde-Buzo-Gray Color Stippling](https://observablehq.com/@jobleonard/color-stippling) by myself (again with separate stippling layers for red, green and blue channels) So what's new in this notebook? Well, I tried to optimize the LBG-implementation, and we're using a WebWorker to speed up the rendering (and avoid freezing the browser tab). Also, instead of separating colors into RGB layers, each dot is individually colored using the HSL color space. It also has the ability to emphasize edges when distributing the dots, and instead of a simple Sobel operator we use a Kotsarenko-Ramos comparison. This is a fairly quick approximation for determining perceptual color contrast as well as lightness when doing edge-detection. You can [tweak all of these settings](#options) and easily export the final result as an SVG, which should make it really easy to print out any results with a very fine resolution!`34:T2d32,// 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.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 // ); this.stipples = this.random_stipples( ((this.width * this.height) / (Math.PI * (minRadius*minRadius + maxRadius*maxRadius)*2)) | 0 ); this.relaxStipples = null; } // 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 = []; 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, // moment01 0, // moment11 0, // moment20 0, // moment02 0, // "hue density" (I hope this works by averaging :/) 0, // "saturation density" 0 // "lightness density" ]; } return stipples; } // Delaunator freaks out if stipples align too perfectly, // adding a microscopic amount of sub-pixel noise helps // with that while also avoiding real consequences for // the rendering result static jitter = (() => { // const {random} = Math; // return () => (random() - random()) * 0.00000762939453125; // return () => (random() + random() - random() - random()) * 0.000244140625; return () => 0; })(); // performs one iteration of the LBG stippling algorithm iterate() { const { stipples, width, height } = this; const delaunay = d3.Delaunay.from(stipples), voronoi = delaunay.voronoi([0, 0, width, height]); // initialize densities for (let i = 0; i < stipples.length; i++) { const st = 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 st[10] = 0; // hue density st[11] = 0; // saturation density st[12] = 0; // lightness density (will be set by radius density) } // compute the density and the weighted centroid of each cell { const dValues = this.densityGrid.values, rValues = this.resolutionGrid.values, sValues = this.densityGrid.saturation, hValues = this.densityGrid.hue; for (let y = 0, found = 0; y < height; y++) { const line = y * width; let x = 0 while(x < width) { found = delaunay.find(x, y, found); const st = stipples[found]; let idx = x + line; let densityVal = dValues[idx]; let resolutionVal = rValues[idx]; let rValSum = resolutionVal; let xval = x * resolutionVal; let yval = y * resolutionVal; let hue = hValues[idx]; let saturation = sValues[idx] let xi = x + 1; let foundi = delaunay.find(xi, y, found); while(xi < width && foundi === found) { idx = xi + line; densityVal += dValues[idx]; resolutionVal = rValues[idx]; rValSum += resolutionVal; xval += xi * resolutionVal; yval += y * resolutionVal; hue += hValues[idx]; saturation += sValues[idx]; foundi = delaunay.find(++xi, y, found); } x = xi; st[3] += densityVal; // radiusDensity st[4] += rValSum; // resolutionDensity aka moment00 st[5] += xval; // moment10 st[6] += yval; // moment01 st[10] += hue; st[11] += saturation; } } } const { resolutionDensityToRadius } = this; const resolutionGridMax = this.resolutionGridExtent[1]; let deleted = 0; let splitted = 0; const newStipples = []; const { abs, atan2, cos, min, random, sin, sqrt, PI } = Math; const { jitter } = Stippling; 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]); //area ? inkDensityToRadius(st[3] / area) : 0; // radiusDensity const hue = area ? st[10] / area : 0; const saturation = area ? st[11] / area : 0; const lightness = area ? st[3] / area : 0; if (density < deleteThreshold) { deleted++; } else if (density > splitThreshold) { // Split splitted++; const centroid = d3.polygonCentroid(polygon); let cx = centroid[0]; let 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 * sin(orientation); var deltaY = dist * cos(orientation); // jitter, and make sure the centroid is // constrained to the image dimensions cx += deltaX + jitter(); cy += deltaY + jitter(); if (cx < 0) cx = -cx; else if (cx > width) cx = 2 * width - cx; if (cy < 0) cy = -cy; else if (cy > height) cy = 2 * height - cy; st[0] = cx; st[1] = cy; st[2] = renderRadius; st[10] = hue; st[11] = saturation; // re-use arrays to reduce GC pressure cx -= 2 * deltaX; cy -= 2 * deltaY; if (cx < 0) cx = -cx; else if (cx > width) cx = 2 * width - cx; if (cy < 0) cy = -cy; else if (cy > height) cy = 2 * height - cy; centroid[0] = cx; centroid[1] = cy; centroid.push( renderRadius, 0, // radiusDensity 0, // resolutionDensity 0, // moment10 0, // moment01 0, // moment11 0, // moment20 0, // moment02 saturation, hue, lightness ); newStipples.push(st, centroid); } else { // Relax let moment10 = st[5] / density; // moment10 let moment01 = st[6] / density; // moment01 if (moment10 <= 0.5) moment10 = 0.5; else if (moment10 >= width - 0.5) moment10 = width - 0.5; if (moment01 <= 0.5) moment01 = 0.5; else if (moment01 >= height - 0.5) moment01 = height - 0.5; st[0] = moment10; st[1] = moment01; st[2] = renderRadius; st[10] = hue; st[11] = saturation; st[12] = lightness; 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 { stipples, width, height } = this, {jitter} = Stippling, delaunay = d3.Delaunay.from(stipples), voronoi = delaunay.voronoi([0, 0, width, height]); for (let i = 0; i < stipples.length; i++) { const st = stipples[i]; st[3] = 0; // radiusDensity st[4] = 0; // resolutionDensity aka moment00 st[5] = 0; // moment10 st[6] = 0; // moment01 st[10] = 0; // hue st[11] = 0; //saturation st[12] = 0; // lightness } // compute the density and the weighted centroid of each cell { const dValues = this.densityGrid.values, rValues = this.resolutionGrid.values, sValues = this.densityGrid.saturation, hValues = this.densityGrid.hue; for (let y = 0, found = 0; y < height; y++) { const line = y * width; for (let x = 0; x < width; x++) { found = delaunay.find(x, y, found); const st = stipples[found]; const idx = x + line; const densityVal = dValues[idx]; const resolutionVal = rValues[idx]; 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[10] += hValues[idx]; // hue st[11] += sValues[idx]; // saturation } } } const { abs, sqrt } = Math; for (let i = 0; i < stipples.length; i++) { const polygon = voronoi.cellPolygon(i); if (!polygon) continue; const st = stipples[i]; // determine point size based on average intensity const area = abs(d3.polygonArea(polygon)); const renderRadius = sqrt(st[3]); // radiusDensity const hue = area ? st[10] / area : 0; const saturation = area ? st[11] / area : 0; const lightness = area ? st[3] / area : 0; // Relax const density = st[4]; let moment10 = st[5] / density; // moment10 let moment01 = st[6] / density; // moment01 if (moment10 <= 0.5) moment10 = 0.5; else if (moment10 >= width - 0.5) moment10 = width - 0.5; if (moment01 <= 0.5) moment01 = 0.5; else if (moment01 >= height - 0.5) moment01 = height - 0.5; if ( !Number.isNaN(moment10) && !Number.isNaN(moment01) // Number.isFinite(renderRadius) && // Number.isFinite(hue) && // Number.isFinite(saturation) && // Number.isFinite(lightness) ) { st[0] = moment10; st[1] = moment01; st[3] = renderRadius; st[10] = hue; st[11] = saturation; st[12] = lightness; } } } }35:T5b4,// import { // rgbaToOklab, // oklabToRgba // } from "@jobleonard/rgba-oklab-typed-array-convertors" function rgbaToOklab(rgba, L, A, B) { const { cbrt } = Math; for (let i = 0; i < rgba.length; i += 4) { const r = rgba[i]; const g = rgba[i + 1]; const b = rgba[i + 2]; // sRGB to linear sRGB - https://observablehq.com/@mbostock/lab-and-rgb#rgb_lrgb1 // assuming normalized c input, linear output cl is: // const cl = c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; // multiplying the constants by 255 to avoid wasteful conversions // 0.04045 * 255 == 10.31475 // 12.92 * 255 == 3294.6 // 0.055 * 255 == 14.025 // 1.055 * 255 == 269.025 const rl = r <= 10 ? r / 3294.6 : ((r + 14.025) / 269.025) ** 2.4; const gl = g <= 10 ? g / 3294.6 : ((g + 14.025) / 269.025) ** 2.4; const bl = b <= 10 ? b / 3294.6 : ((b + 14.025) / 269.025) ** 2.4; const l = 0.4122214708 * rl + 0.5363325363 * gl + 0.0514459929 * bl; const m = 0.2119034982 * rl + 0.6806995451 * gl + 0.1073969566 * bl; const s = 0.0883024619 * rl + 0.2817188376 * gl + 0.6299787005 * bl; const l_ = cbrt(l); const m_ = cbrt(m); const s_ = cbrt(s); L[i >>> 2] = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_; A[i >>> 2] = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_; B[i >>> 2] = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_; } return [L, A, B]; }36:T4ed,// Reference: https://bottosson.github.io/posts/oklab/ function oklabToRgba(L, A, B, a = 1) { const l_ = L + 0.3963377774 * A + 0.2158037573 * B; const m_ = L - 0.1055613458 * A - 0.0638541728 * B; const s_ = L - 0.0894841775 * A - 1.2914855480 * B; const l = l_ * l_ * l_; const m = m_ * m_ * m_; const s = s_ * s_ * s_; const rl = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s; const gl = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s; const bl = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s; // linear sRGB to sRGB - https://observablehq.com/@mbostock/lab-and-rgb#lrgb_rgb1 // v = (vl <= 0.0031308 ? 12.92 * vl : (1.055 * vl ** (1 / 2.4) - 0.055)) * 255; // convert to 8-bit channel: // 12.92 * 255 == 3294.6 // 1.055 * 255 == 269.025 // 0.055 * 255 == 14.025 // v = vl <= 0.0031308 ? 3294.6 * vl : (269.025 * vl ** (1 / 2.4) - 14.025); const r_ = clamp(0, 255, (rl <= 0.0031308 ? 3294.6 * rl : (269.025 * rl ** (1 / 2.4) - 14.025)) + 0.5 | 0), g_ = clamp(0, 255, (gl <= 0.0031308 ? 3294.6 * gl : (269.025 * gl ** (1 / 2.4) - 14.025)) + 0.5 | 0), b_ = clamp(0, 255, (bl <= 0.0031308 ? 3294.6 * bl : (269.025 * bl ** (1 / 2.4) - 14.025)) + 0.5 | 0); return [r_, g_, b_]; }37:T74a,oklabToRgbaStr = { const memo = new Map(); // Reference: https://bottosson.github.io/posts/oklab/ return function oklabToRgbaStr(L, a, b, A = 1) { const l_ = L + 0.3963377774 * a + 0.2158037573 * b; const m_ = L - 0.1055613458 * a - 0.0638541728 * b; const s_ = L - 0.0894841775 * a - 1.2914855480 * b; const l = l_ * l_ * l_; const m = m_ * m_ * m_; const s = s_ * s_ * s_; const rl = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s; const gl = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s; const bl = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s; // linear sRGB to sRGB - https://observablehq.com/@mbostock/lab-and-rgb#lrgb_rgb1 // v = (vl <= 0.0031308 ? 12.92 * vl : (1.055 * vl ** (1 / 2.4) - 0.055)) * 255; // convert to 8-bit channel: // 12.92 * 255 == 3294.6 // 1.055 * 255 == 269.025 // 0.055 * 255 == 14.025 // v = vl <= 0.0031308 ? 3294.6 * vl : (269.025 * vl ** (1 / 2.4) - 14.025); const r_ = clamp(0, 255, (rl <= 0.0031308 ? 3294.6 * rl : (269.025 * rl ** (1 / 2.4) - 14.025)) + 0.5 | 0), g_ = clamp(0, 255, (gl <= 0.0031308 ? 3294.6 * gl : (269.025 * gl ** (1 / 2.4) - 14.025)) + 0.5 | 0), b_ = clamp(0, 255, (bl <= 0.0031308 ? 3294.6 * bl : (269.025 * bl ** (1 / 2.4) - 14.025)) + 0.5 | 0); if (A < 1) { return `rgba(${r_}, ${g_}, ${b_}, ${A})`; } let str = memo.get(r_ * 0x10000 + g_ * 0x100 + b_); if (!str) { const RR = r_ .toString(16) .padStart(2, "0") .toUpperCase(); const GG = g_ .toString(16) .padStart(2, "0") .toUpperCase(); const BB = b_ .toString(16) .padStart(2, "0") .toUpperCase(); memo.set(r_ * 0x10000 + g_ * 0x100 + b_, str = `#${RR}${GG}${BB}`); } return str; } }38:T508,// Adapted from code in https://github.com/mapbox/pixelmatch // calculate color difference according to the paper "Measuring perceived color difference // using YIQ NTSC transmission color space in mobile applications" by Y. Kotsarenko and F. Ramos function colorDelta(img, pos1, pos2) { let r1 = img[pos1 + 0]; let g1 = img[pos1 + 1]; let b1 = img[pos1 + 2]; // let a1 = img[pos1 + 3]; // we ignore alpha in this demo, for perf reasons let r2 = img[pos2 + 0]; let g2 = img[pos2 + 1]; let b2 = img[pos2 + 2]; // let a2 = img[pos2 + 3]; if (r1 === r2 && g1 === g2 && b1 === b2) return 0; const r = r1 - r2; const g = g1 - g2; const b = b1 - b2; // Without strength-reduction // const y = r * 0.29889531 + g * 0.58662247 + b * 0.11448223 // const i = r * 0.59597799 - g * 0.27417610 - b * 0.32180189 // const q = r * 0.21147017 - g * 0.52261711 + b * 0.31114694 // return 0.5053 * y * y + 0.299 * i * i + 0.1957 * q * q; // With strength-reduced constants const y = r * 0.2124681075446384 + g * 0.4169973963260294 + b * 0.08137907133969426; const i = r * 0.3258860837850668 - g * 0.14992193838645426 - b * 0.17596414539861255; const q = r * 0.0935501584120867 - g * 0.23119531908149002 + b * 0.13764516066940333; return y*y + i*i + q*q }39:T16d6,function toSobelOKLAB(w, h, sobelFactor, L, A, B) { if (!(sobelFactor >= 0)) sobelFactor = 0; else if (sobelFactor > 1) sobelFactor = 1; const sobelValues = sobelFactor > 0 ? new Float64Array(w * h) : L.slice(); if (sobelFactor) { // first sum up all the squared values of all layers for (const arr of [L, A, B]) { let // array indices i00, i01, i02, i10, i11, i12, i20, i21, i22, // values // delta values dx, dy; // corners,rows, and columns // ==== we first have to deal with the literal corner cases ==== // Top left corner i00 = 0; i01 = 1; i10 = w; i11 = w + 1; dx = -3 * arr[i00] + 3 * arr[i01] + -arr[i10] + arr[i11]; dy = -3 * arr[i00] + -arr[i01] + 3 * arr[i10] + arr[i11]; sobelValues[i00] += dx*dx + dy*dy; // Top right corner i00 = w - 2; i01 = w - 1; i10 = 2 * w - 2; i11 = 2 * w - 1; dx = -3 * arr[i00] + 3 * arr[i01] + -arr[i10] + arr[i11]; dy = -arr[i00] + -3 * arr[i01] + arr[i10] + 3 * arr[i11]; sobelValues[i01] += dx*dx + dy*dy; // Bottom left corner i00 = (h - 2) * w; i10 = (h - 2) * w + 1; i10 = (h - 1) * w; i11 = (h - 1) * w + 1; dx = -arr[i00] + arr[i01] + -3 * arr[i10] + 3 * arr[i11]; dy = -3 * arr[i00] + -arr[i01] + 3 * arr[i10] + arr[i11]; sobelValues[i10] += dx*dx + dy*dy // Bottom right corner i00 = h * w - w - 2; i01 = h * w - w - 1; i10 = h * w - 2; i11 = h * w - 1; dx = -arr[i00] + arr[i01] + -3 * arr[i10] + 3 * arr[i11]; dy = -arr[i00] + -3 * arr[i01] + arr[i10] + 3 * arr[i11]; sobelValues[i11] += dx*dx + dy*dy; // ==== And now the edges ==== // Top row i00 = 0; i01 = 1; i02 = 2; i10 = w; i11 = w + 1; i12 = w + 2; while(i02 < w) { dx = -3 * arr[i00] + 3 * arr[i02] + -arr[i10] + arr[i12]; dy = -arr[i00] + -2 * arr[i01] + -arr[i02] + arr[i10] + 2 * arr[i11] + arr[i12]; sobelValues[i01] += dx*dx + dy*dy; ++i00; ++i01; ++i02; ++i10; ++i11; ++i12; } // Bottom row i00 = (w-2)*h; i01 = (w-2)*h + 1; i02 = (w-2)*h + 2; i10 = (w-1)*h; i11 = (w-1)*h + 1; i12 = (w-1)*h + 2; let end = w*h; while(i12 < end) { dx = -arr[i00] + arr[i02] + -3 * arr[i10] + 3 * arr[i12]; dy = -arr[i00] + -2 * arr[i01] + -arr[i02] + arr[i10] + 2 * arr[i11] + arr[i12]; sobelValues[i11] += dx*dx + dy*dy; ++i00; ++i01; ++i02; ++i10; ++i11; ++i12; } // Left column i00 = 0; i01 = 1; i10 = w; i11 = w + 1; i20 = 2 * w; i21 = 2 * w + 1; while (i21 < end) { dx = -arr[i00] + arr[i01] + -2 * arr[i10] + 2 * arr[i11] + -arr[i20] + arr[i21]; dy = -3 * arr[i00] + -arr[i01] + 3 * arr[i20] + arr[i21]; sobelValues[i10] += dx*dx + dy*dy; i00 += w; i01 += w; i10 += w; i11 += w; i20 += w; i21 += w; } // Right column i00 = w - 2; i01 = w - 1; i10 = 2 * w - 2; i11 = 2 * w - 1; i20 = 3 * w - 2; i21 = 3 * w - 1; while (i21 < end) { dx = -arr[i00] + arr[i01] + -2 * arr[i10] + 2 * arr[i11] + -arr[i20] + arr[i21]; dy = -arr[i00] + -3 * arr[i01] + arr[i20] + 3 * arr[i21]; sobelValues[i11] += dx*dx + dy*dy; i00 += w; i01 += w; i10 += w; i11 += w; i20 += w; i21 += w; } // the rest of the pixels for (let j = 0; j < h - 2; j++) { i00 = j * w; i01 = 1 + j * w; i02 = 2 + j * w; i10 = (j + 1) * w; i11 = 1 + (j + 1) * w; i12 = 2 + (j + 1) * w; i20 = (j + 2) * w, i21 = 1 + (j + 2) * w; i22 = 2 + (j + 2) * w; const end = i00 + w; while (i00 < end) { dx = -arr[i00] + arr[i02] + -2 * arr[i10] + 2 * arr[i12] + -arr[i20] + arr[i22]; dy = -arr[i00] + -2 * arr[i01] + -arr[i02] + arr[i20] + 2 * arr[i21] + arr[i22]; sobelValues[i11] += dx*dx + dy*dy; ++i00; ++i01; ++i02; ++i10; ++i11; ++i12; ++i20; ++i21; ++i22; } } } } let min = Infinity, max = -Infinity, Lmin = Infinity, Lmax = -Infinity; for (let i = 0; i < sobelValues.length; i++){ // take the square root to get the actual magnitude. let v = sobelValues[i]**0.5; if (v > max) max = v; if (v < min) min = v; sobelValues[i] = v; v = L[i]; if (v > Lmax) Lmax = v; if (v < Lmin) Lmin = v; } const sortedVals = sobelValues.slice(); sortedVals.sort(); const v99 = sortedVals[sortedVals.length * 99 / 100 | 0]; let norm = v99 - min, Lnorm = Lmax - Lmin; L = L.slice(); console.log({min, max, v99, norm, Lmin, Lmax, Lnorm}); if (Lnorm > 0) { Lnorm = 1 / Lnorm; for (let i = 0; i < L.length; i++) { L[i] = (L[i] - Lmin)*Lnorm; } } if (sobelFactor && norm > 0 && norm < Infinity) { norm = 1 / norm; for (let i = 0; i < sobelValues.length; i++) { const v = Math.min((sobelValues[i] - min)*norm, 1); // ensure the values are never zero sobelValues[i] = ((v * sobelFactor + (1 - sobelFactor) * L[i]) * 1023 + 1)/1024; } return sobelValues; } return L; }3a:T132c,// Quadratic stack blur function quadStackBlur(source, width, height, radius) { if (!(radius > 0)) return source; // algo: two horizontal passes of box blurs, // followed by two vertical passes of box blur. // the blox blurs use a sliding window to effectively // reduce each pass to O(n) const buffer = Float64Array.from(source), // although we only care about red green and blue channels, // making the window include the transparancy layer // makes it easier to "align" with the pixels in the buffer window = new Float64Array((radius * 2 + 1) * 4); const line = width * 4; const summedPixels = radius * 2 + 1; const passes = 3; // horizontal pass for (let k = 0; k < passes; k++) { for (let y = 0; y < height; y++) { const line = y * width * 4; let rsum = 0; let gsum = 0; let bsum = 0; // initialize window. const rad4 = radius*4; // use leftmost pixel for radius bleeding over left edge for (let i = 0; i <= rad4; i += 4) { rsum += (window[i] = buffer[line]); gsum += (window[i + 1] = buffer[line + 1]); bsum += (window[i + 2] = buffer[line + 2]); } // now add part of radius overlapping actual image for (let i = 4; i <= rad4; i += 4) { rsum += (window[rad4 + i] = buffer[line + i]); gsum += (window[rad4 + i + 1] = buffer[line + i + 1]); bsum += (window[rad4 + i + 2] = buffer[line + i + 2]); } let wIdx = 0; for (let x = 0; x < (width - radius)*4; x += 4) { buffer[line + x] = rsum / summedPixels; buffer[line + x + 1] = gsum / summedPixels; buffer[line + x + 2] = bsum / summedPixels; // remove leftmost pixel of the window and add // a new one, both from pixel sums and the window. rsum -= window[wIdx]; rsum += (window[wIdx] = buffer[line + x + rad4]); gsum -= window[wIdx + 1]; gsum += (window[wIdx + 1] = buffer[line + x + rad4 + 1]); bsum -= window[wIdx + 2]; bsum += (window[wIdx + 2] = buffer[line + x + rad4 + 2]); wIdx = (wIdx + 4) % window.length; } // handle right edge const rPixel = buffer[line + width * 4 - 4]; const gPixel = buffer[line + width * 4 - 3]; const bPixel = buffer[line + width * 4 - 2]; for (let x = (width - radius)*4; x < width*4; x += 4) { buffer[x + line] = rsum / summedPixels; buffer[x + line + 1] = gsum / summedPixels; buffer[x + line + 2] = bsum / summedPixels; rsum += rPixel - window[wIdx]; gsum += gPixel - window[wIdx + 1]; bsum += bPixel - window[wIdx + 2]; wIdx = (wIdx + 4) % window.length; } } } // vertical pass for (let k = 0; k < passes; k++) { for (let x = 0; x < width; x++) { let rsum = 0; let gsum = 0; let bsum = 0; // initialize window. const x4 = x*4; const rad4 = radius*4; const rady = radius * line; // use top pixel for radius bleeding over top edge for (let i = 0; i <= rad4; i+= 4) { rsum += (window[i] = buffer[x4]); gsum += (window[i + 1] = buffer[x4 + 1]); bsum += (window[i + 2] = buffer[x4 + 2]); } // now add part of radius overlapping actual image for (let i = 1; i <= radius; i++) { const yi = i * line; const wi = (radius + i) * 4; rsum += (window[wi] = buffer[x4 + yi]); gsum += (window[wi + 1] = buffer[x4 + yi + 1]); bsum += (window[wi + 2] = buffer[x4 + yi + 2]); } let wIdx = 0; for (let y = 0; y < height - radius; y++) { const yi = y * line; buffer[x4 + yi] = rsum / summedPixels; buffer[x4 + yi + 1] = gsum / summedPixels; buffer[x4 + yi + 2] = bsum / summedPixels; // remove top pixel of the window and add // new bottom one, both from pixel sums and the window. rsum -= window[wIdx]; rsum += (window[wIdx] = buffer[x4 + yi + rady]); gsum -= window[wIdx + 1]; gsum += (window[wIdx + 1] = buffer[x4 + yi + rady + 1]); bsum -= window[wIdx + 2]; bsum += (window[wIdx + 2] = buffer[x4 + yi + rady + 2]); wIdx = (wIdx + 4) % window.length; } // handle bottom edge const bRow = buffer.length - line; const rPixel = buffer[x4 + bRow]; const gPixel = buffer[x4 + bRow + 1]; const bPixel = buffer[x4 + bRow + 2]; for (let y = height - radius; y < height; y++) { const yi = y * line; buffer[x4 + yi] = rsum / summedPixels; buffer[x4 + yi + 1] = gsum / summedPixels; buffer[x4 + yi + 2] = bsum / summedPixels; rsum += rPixel - window[wIdx]; gsum += gPixel - window[wIdx + 1]; bsum += bPixel - window[wIdx + 2]; wIdx = (wIdx + 4) % window.length; } } } return buffer; }3b:Te92,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, useOkLab = true } } = event; w = width; h = height; [grid, gridSobel] = initGrids(sobelFactor, imgData, width, height, useOkLab); postMessage({ grid, gridSobel }); stippling = new Stippling(grid, gridSobel, minRadius, maxRadius); const stippleSorter = ({0: x1, 1: y1}, {0: x2, 1:y2}) => { if (y1 < y2) return -1; else if (y1 > y2) return 1; else if (x1 < x2) return -1; else if (x1 > x2) return 1; else return 0; }; for (let i = 1, done = false; i <= maxIterations; i++) { done = done && i%4 !== 0 && i !== maxIterations; if (!done) { done = stippling.iterate(); } stippling.relax(); let message = i < maxIterations || totalRelaxations > 0 ? `Rendering - iteration ${i}/${maxIterations},` : "Done!"; message += ` ${stippling.stipples.length} points`; if (showProgress || i % 5 === 0 || i == maxIterations) { const points = new Float64Array(stippling.stipples.length * 6); const { stipples } = stippling; stipples.sort(stippleSorter); for (let j = 0; j < stipples.length; j++) { const st = stipples[j]; const idx = j * 6; points[idx] = st[0]; points[idx + 1] = st[1]; points[idx + 2] = st[2]; // radius points[idx + 3] = st[10]; // hue points[idx + 4] = st[11]; // saturation points[idx + 5] = st[12]; // lightness } 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 % 20 === 0 || i == totalRelaxations) { const points = new Float64Array(stippling.stipples.length * 6); const { stipples } = stippling; stipples.sort(stippleSorter); for (let j = 0; j < stipples.length; j++) { const st = stipples[j]; const idx = j * 6; points[idx] = st[0]; points[idx + 1] = st[1]; points[idx + 2] = st[2]; // radius points[idx + 3] = st[10]; // hue points[idx + 4] = st[11]; // saturation points[idx + 5] = st[12]; // lightness } 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 * 6); const { stipples } = stippling; stipples.sort(stippleSorter); for (let j = 0; j < stipples.length; j++) { const st = stipples[j]; const idx = j * 6; points[idx] = st[0]; points[idx + 1] = st[1]; points[idx + 2] = st[2]; // radius points[idx + 3] = st[10]; // hue points[idx + 4] = st[11]; // saturation points[idx + 5] = st[12]; // lightness } postMessage( { message: `Done! ${stippling.stipples.length} points`, points }, [points.buffer] ); } }; }3c:Tcad,function svgOutput(points) { const svgPoints = []; const { round } = Math; const im = fileImg; for (let i = 0; i < points.length; i += 6) { svgPoints.push([ points[i], points[i + 1], points[i + 2], points[i + 3], points[i + 4], points[i + 5] ]); } const w = im.naturalWidth || im.width; const h = im.naturalHeight || im.height; const svg = d3.select(DOM.svg(w, h)); svg .append("g") .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", w) .attr("height", h) .attr("fill", "black"); let density = inkDensity.inkDensity; // no need to render anything if ink density is zero. if (density > 0) { if (density > 100) density = 100; const lightnessMultiplyer = inkDensityCompensation.checked ? (1 / density) : 1; // let's limit the subpixel precision to three digits, and // strip trailing zeroes to reduce the size of the SVG a bit const limitDigits = v => { let output = v.toFixed(3); if (output.endsWith(".000")) return output.slice(0, output.length - 4); else if (output.endsWith("00")) return output.slice(0, output.length - 2); else if (output.endsWith("0")) return output.slice(0, output.length - 1); else return output; }; const distanceFn = makeDistanceFn(w, h, lensEffectMode, lensEffectSettings); const fallOff = (lensEffectSettings.light * 2 || 0) + 1; const opacityFn = d => limitDigits(opacity / distanceFn(d[0], d[1]) ** fallOff); // Don't add opacity property unless necessary, save a bit of disk space if (lensEffectMode || opacity < 1) { svg .append("g") .selectAll("circle") .data(svgPoints) .join("circle") .attr("r", d => limitDigits(d[2] * density * distanceFn(d[0], d[1])) ) .attr("cx", d => limitDigits(d[0])) .attr("cy", d => limitDigits(d[1])) .attr("fill", d => oklabToRgbaStr(d[5], d[4], d[3], 1)) .attr("opacity", opacityFn); } else { svg .append("g") .selectAll("circle") .data(svgPoints) .join("circle") .attr("r", d => limitDigits(d[2] * density * distanceFn(d[0], d[1])) ) .attr("cx", d => limitDigits(d[0])) .attr("cy", d => limitDigits(d[1])) .attr("fill", d => oklabToRgbaStr(d[5], d[4], d[3], 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" }); }3d:T428,function makeDistanceFn(w, h, lensEffectMode, lensEffectSettings) { let distanceFn; // We divide by the edgeFactor, so the smaller it is, // the bigger the vignetting effect at the edges const edgeFactor = (w * w + h * h) / (1 + 127 * (lensEffectSettings.blur || 0)); const cx = w * lensEffectSettings.x; const cy = h * (1 - lensEffectSettings.y); if (lensEffectMode === "vignette") { distanceFn = (x, y) => { const dx = x - cx; const dy = y - cy; return 1 + (dx * dx + dy * dy) / edgeFactor; }; } else if (lensEffectMode === "tiltShift") { let slope = lensEffectSettings.slope || 0; if (slope >= -1 && slope <= 1) { distanceFn = (x, y) => { const dy = y - cy + (x - cx) * slope; return 1 + (dy * dy) / edgeFactor; }; } else { slope += slope < 0 ? 2 : -2; distanceFn = (x, y) => { const dx = x - cx + (y - cy) * -slope; return 1 + (dx * dx) / edgeFactor; }; } } else { // "Off" distanceFn = (x, y) => 1; } return distanceFn; }3e:T496,canvasPreviewRenderer = { await canvasPreview.visibility(); yield; const {ctx, w, h, scale, width, height} = canvasPreview; ctx.fillStyle = "black"; ctx.fillRect(0, 0, width, height); let density = inkDensity.inkDensity; // Don't bother rendering if the dots have no radius if (density > 0) { if (density > 100) density = 100; const lightnessMultiplyer = inkDensityCompensation.checked ? (1 / density) : 1; const distanceFn = makeDistanceFn(w, h, lensEffectMode, lensEffectSettings); for (let i = 0; i < points.length; i += 6) { ctx.beginPath(); const x = points[i]; const y = points[i+1]; const distance = distanceFn(x, y); ctx.moveTo(x * scale, y * scale); const fillStyle = oklabToRgbaStr( Math.min(1, points[i + 5] * lightnessMultiplyer), points[i + 4], points[i + 3], opacity / (distance ** ((lensEffectSettings.light*2||0)+1)) ); ctx.fillStyle = fillStyle; const r = points[i + 2] * density * distance; ctx.arc( x * scale, y * scale, r * scale, 0, Math.PI * 2 ); ctx.fill(); } } }3f:[{"id":"5a91453a9231e2ee29f468316352897eac45ec69d0aca0f000ba785fb1ba3e45c8f0c3c1c6dc2153cfef698c1aff59311fdd4a578b577da06221aa4def834990","href":"https://static.observableusercontent.com/files/5a91453a9231e2ee29f468316352897eac45ec69d0aca0f000ba785fb1ba3e45c8f0c3c1c6dc2153cfef698c1aff59311fdd4a578b577da06221aa4def834990","name":"cropped_boats@1.jpg","type":"image/jpeg","lastModified":1617460643837.974,"size":967790}] 2f:{"title":"A Fast Colored Stipple Generator","cells":[{"id":0,"value":"title = md`# A Fast Colored Stipple Generator\n\n\n\n[*(Wait, what is this?)*](#description)\n\n*Default image credit:* a crop of [a photo of Vincent van Gogh's *Starry Night Over the Rhone*](https://commons.wikimedia.org/wiki/File:Starry_Night_Over_the_Rhone.jpg), added to WikiMedia commons by Carl Fredrik Sjöland.\n\n

${iterationMessage}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":704,"value":"viewof canvasPreview = {\n \n const w = fileImg.naturalWidth || fileImg.width;\n const h = fileImg.naturalHeight || fileImg.height;\n const scale = width / w;\n const height = (h * scale) | 0;\n const ctx = DOM.context2d(width, height);\n ctx.canvas.style = \"width:100%;height100%\";\n ctx.canvas.value = {\n ctx, w, h, scale, width, height, visibility\n };\n ctx.fillStyle = \"black\";\n ctx.fillRect(0, 0, width, height);\n ctx.fillStyle = \"#FFF\";\n ctx.fillText\n \n ctx.font = \"50px serif\";\n ctx.fillText(\"Please wait until rendering completes\", 50, 90);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1591,"value":"fileImgInputDefault === defaultImg ? md`Default input image: cropped_boatd.jpg, ${imgData.width}×${imgData.height}` : md`User selected input image: ${fileImgInputDefault.name}, ${imgData.width}×${imgData.height}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"viewof lensEffectMode = (o => Inputs.radio(o.keys(), {\n label: \"Some Lens-Effects?\",\n value: \"\",\n format: v => o.get(v),\n}\n))(new Map([\n [\"\", \"Nah, I'm good\"],\n [\"vignette\", \"Fake Vignetting\"],\n [\"tiltShift\", \"Fake Tilt-Shift\"],\n]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"viewof inkDensity = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1852,"value":"viewof inkDensityCompensation = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1182,"value":"viewof stippleOpacity = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"saveButton = {\n if (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 } else {\n return html``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"md`### Pick your own input image:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2152,"value":"{\n let {width: w, height: h, data} = imgData;\n const ctx = DOM.context2d(w, h);\n ctx.canvas.style.width = \"100%\";\n yield ctx.canvas\n const nImgData = ctx.getImageData(0, 0, w, h);\n const {data: ndata} = nImgData;\n ndata.set(data);\n ctx.putImageData(nImgData, 0, 0);\n if (showSobel.length) {\n yield ctx.canvas; \n const {values} = initGrids(options.sobelFactor, data, w, h, true)[1];\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n let v = (values[x + y * w]) * 256 | 0;\n if (v > 255) v = 255;\n const idx = (x + y * w) * 4;\n ndata[idx] = v;\n ndata[idx+1] = v;\n ndata[idx+2] = v;\n ndata[idx+3] = 0xFF;\n }\n }\n }\n ctx.putImageData(nImgData, 0, 0);\n yield ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof fileImgInput = Inputs.file({label: \"Select image file:\", accept: \".png,.jpg\", required: false});","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"viewof showSobel = Inputs.checkbox([\"Show sobel map\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"delayedUpdate = {\n const button = html``;\n const onclick = () => {\n mutable points = undefined;\n mutable iterationMessage = \"Awaiting first iteration\";\n startWorker(\n Object.assign(\n {\n imgData: imgData.data,\n width: imgData.width,\n height: imgData.height\n },\n options\n )\n );\n };\n button.onclick = onclick;\n if (!firstLoad) {\n mutable firstLoad = true;\n onclick();\n }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"html`

Implementation

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1598,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1656,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"// Reference: https://bottosson.github.io/posts/oklab/\nfunction oklabStr(l, a, b, A = 1) {\n return `oklab(${l},${a},${b},${A})`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1681,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"function initGrids(sobelFactor, data, w, h) {\n const l = new Float64Array(w*h), // lightness\n a = new Float64Array(w*h),\n b = new Float64Array(w*h);\n\n const sobelValues = new Float64Array(w*h);\n for (const i of [0, 1, 3, 7]) {\n const sobelData = quadStackBlur(data, w, h, i);\n rgbaToOklab(sobelData, l, a, b);\n const sv = toSobelOKLAB(w, h, sobelFactor, l, a, b);\n for (let j = 0; j < sobelValues.length; j++) {\n sobelValues[j] += sv[j];\n }\n }\n for (let j = 0; j < sobelValues.length; j++) {\n sobelValues[j] *= 0.25;\n }\n const gridSobel = {\n width: w,\n height: h,\n values: sobelValues\n };\n rgbaToOklab(data, l, a, b);\n\n const grid = {\n width: w,\n height: h,\n // oklab\n l, a, b,\n // HSL (since we'll only use oklab or hsl but not both, we can re-use the arrays)\n values: l,\n saturation: a,\n hue: b,\n };\n return [grid, gridSobel];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"workerScript = {\n const script = `\nimportScripts(\"${await require.resolve(\"d3@7\")}\", \"${await require.resolve(\n \"d3-delaunay@5\"\n )}\");\n\n${Stippling.toString()}\n\n${colorDelta.toString()}\n\n${toSobelOKLAB.toString()}\n\n${rgbaToOklab.toString()}\n\n${initGrids.toString()}\n\n${quadStackBlur.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":false,"hidden":false,"mode":"ojs"},{"id":1705,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2076,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"$3b","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"mutable firstLoad = null;","pinned":true,"hidden":false,"mode":"ojs"},{"id":778,"value":"defaultSettings = {\n return {\n showProgress: true,\n channel: \"0\",\n minRadius: 0.25,\n maxRadius: 4,\n sobelFactor: 1,\n inkDensity: 0.8,\n maxIterations: 40,\n totalRelaxations: 10,\n stippleOpacity: 1\n };\n}","pinned":false,"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":120,"value":"imgData = {\n await fileImg;\n const width = fileImg.naturalWidth || fileImg.width;\n const height = fileImg.naturalHeight || fileImg.height;\n const context = DOM.context2d(width, height, 1);\n context.drawImage(fileImg, 0, 0, width, height);\n return context.getImageData(0, 0, width, height);\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":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"opacity = clamp(0, 1, stippleOpacity.stippleOpacity)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1544,"value":"defaultImg = await FileAttachment(\n \"cropped_boats@1.jpg\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1572,"value":"fileImgInputDefault = fileImgInput || defaultImg","pinned":true,"hidden":false,"mode":"ojs"},{"id":1381,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs"},{"id":1781,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs"},{"id":1415,"value":"function clamp(a, b, v) {\n return v < a ? a : v > b ? b : v;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1577,"value":"fileImg = fileImgInputDefault.image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3f","stdlib":"1","titling":"auto"}