2b:null 2c:["$","title",null,{"children":"A Fast Colored Stipple Generator (blank no BG) | DANIAUD Dimitri | Observable"}] 31:T935,canvasPreview = { if (points === undefined) { // Si les points ne sont pas définis, affiche un message d'attente return html`

Please wait while rendering completes

`; } else { // Récupère la largeur et la hauteur naturelles de l'image ou utilise la largeur et la hauteur spécifiées const w = fileImg.naturalWidth || fileImg.width; const h = fileImg.naturalHeight || fileImg.height; // Calcule le facteur d'échelle en fonction de la largeur spécifiée const scale = 1; // width / w; // Calcule la nouvelle hauteur en fonction du facteur d'échelle const height = (h * scale) | 0; // Crée un contexte 2D pour le canvas const ctx = DOM.context2d(fileImg.naturalWidth, height); // Remplit le canvas avec une couleur de fond noire ctx.fillStyle = "black"; ctx.fillRect(0, 0, width, height); // Récupère la densité de l'encre spécifiée const density = inkDensity.inkDensity; // Crée une fonction de distance en fonction des paramètres spécifiés const distanceFn = makeDistanceFn(w, h, lensEffectMode, lensEffectSettings); // Parcours les points et dessine des cercles en fonction de leurs propriétés 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); // Déplace le point de départ du chemin vers la position spécifiée ctx.moveTo(x * scale, y * scale); // Définit la couleur de remplissage en fonction des propriétés du point ctx.fillStyle = hslToRgb( points[i + 3], points[i + 4], points[i + 5], opacity / (distance ** ((lensEffectSettings.light * 2 || 0) + 1)) ); // Calcule le rayon du cercle en fonction des propriétés du point const r = points[i + 2] * density * distance; // Dessine un cercle à la position spécifiée ctx.arc( x * scale, y * scale, r * scale, 0, Math.PI * 2 ); // Remplit le cercle avec la couleur définie précédemment ctx.fill(); } // Définit le style du canvas pour qu'il occupe 100% de la largeur et de la hauteur parentes ctx.canvas.style = "width:100%;height100%"; // Retourne le canvas return ctx.canvas; } } 32:T511,viewof lensEffectSettings = { if (lensEffectMode === "Fake Vignetting") return form(html``); if (lensEffectMode === "Fake Tilt-Shift") return form(html``); return form(html``); }33:T583,viewof options = form(html``)34:T74a,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. Most importantly, you can tweak all of these settings 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! ## Tips - if you want a more smooth, even output, make the min and max radius (almost) the same size and set Sobel factor to 0`35:T2525,// 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 ); } // 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, // moment01d 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 jitter() { return (Math.random() - Math.random()) * 0.00001862939453125; } // 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 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 { stipples, width } = this, dValues = this.densityGrid.values, rValues = this.resolutionGrid.values, sValues = this.densityGrid.saturation, hValues = this.densityGrid.hue; for (let y = 0, found = 0; 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 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[7] += x * yval; // moment11 st[8] += x * xval; // moment20 st[9] += y * yval; // moment02 st[10] += hValues[idx]; // hue st[11] += sValues[idx]; // saturation } } } const { resolutionDensityToRadius, jitter } = 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]); //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); 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 + jitter(); st[1] = cy + deltaY + jitter(); st[2] = renderRadius; st[10] = saturation; st[11] = hue; // re-use arrays to reduce GC pressure centroid[0] -= deltaX + jitter(); centroid[1] -= deltaY + jitter(); 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 st[0] = st[5] / density + jitter(); // moment10 st[1] = st[6] / density + jitter(); //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 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[10] = 0; // hue st[11] = 0; //saturation // st[12] = 0; // lightness } // compute the density and the weighted centroid of each cell { const { stipples, width } = this, dValues = this.densityGrid.values, rValues = this.resolutionGrid.values, sValues = this.densityGrid.saturation, hValues = this.densityGrid.hue; for (let y = 0, found = 0; 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 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 < 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 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]; st[0] = st[5] / density; // moment10 st[1] = st[6] / density; // moment01 st[3] = renderRadius; st[10] = hue; st[11] = saturation; st[12] = lightness; } } }36:T423,// https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion /** * Converts an RGB color value to HSL. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSL_color_space. * Assumes r, g, and b are contained in the set [0, 255] and * returns h, s, and l in the set [0, 1]. * * @param {number} r The red color value * @param {number} g The green color value * @param {number} b The blue color value * @return {Array} The HSL representation */ function rgbToHsl(r, g, b){ r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if(max == min){ h = s = 0; // achromatic }else{ var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch(max){ case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [h, s, l]; }37:T426,/** * Converts an HSL color value to RGB. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSL_color_space. * Assumes h, s, and l are contained in the set [0, 1] and * returns r, g, and b in the set [0, 255]. * * @param {number} h The hue * @param {number} s The saturation * @param {number} l The lightness * @return {Array} The RGB representation */ function hslToRgb(h, s, l, a = 1) { var r, g, b; if (s == 0) { r = g = b = l; // achromatic } else { var hue2rgb = function hue2rgb(p, q, t) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1 / 6) return p + (q - p) * 6 * t; if (t < 1 / 2) return q; if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; return p; }; var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1 / 3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1 / 3); } return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round( b * 255 )}, ${a})`; }38:T509,// 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:Tad7,function toSobel(w, h, sobelFactor, rgbValues, lightnessValues) { if (sobelFactor > 0) { const { sqrt } = Math; const sobelValues = new Float64Array(w * h); // Top left corner sobelValues[0] = sqrt( colorDelta(rgbValues, 0, 4) + colorDelta(rgbValues, 0, w * 4) ); // Top row for (let x = 1; x < w - 1; x++) { const idx = x * 4; sobelValues[x] = sqrt( colorDelta(rgbValues, idx, idx - 4) + colorDelta(rgbValues, idx, idx + 4) + colorDelta(rgbValues, idx, idx + 4 * w) ); } // Top right corner sobelValues[w - 1] = sqrt( colorDelta(rgbValues, w * 4 - 4, w * 4 - 8) + colorDelta(rgbValues, w * 4 - 4, (w + 1) * 4 - 4) ); // Middle part for (let y = 1; y < h - 1; y++) { const line = y * w; const l4 = line * 4; // leftmost column sobelValues[line] = sqrt( colorDelta(rgbValues, l4, l4 - w * 4) + colorDelta(rgbValues, l4, l4 + 4) + colorDelta(rgbValues, l4, l4 + w * 4) ); // middle for (let x = 1; x < w - 1; x++) { const idx = x * 4 + l4; sobelValues[x + line] = sqrt( colorDelta(rgbValues, idx, idx - w * 4) + colorDelta(rgbValues, idx, idx - 4) + colorDelta(rgbValues, idx, idx + 4) + colorDelta(rgbValues, idx, idx + w * 4) ); } // rightmost column const w4 = l4 + (w - 1) * 4; sobelValues[line + w - 1] = sqrt( colorDelta(rgbValues, w4, w4 - 4) + colorDelta(rgbValues, w4, w4 - w * 4) + colorDelta(rgbValues, w4, w4 + w * 4) ); } // Bottom-left corner const bottomRow = (h - 1) * w; const br4 = bottomRow * 4; sobelValues[bottomRow] = sqrt( colorDelta(rgbValues, br4, br4 - w * 4) + colorDelta(rgbValues, br4, br4 + 4) ); // Bottom Row for (let x = 1; x < w - 1; x++) { const idx = br4 + x * 4; sobelValues[bottomRow + x] = sqrt( colorDelta(rgbValues, idx, idx - 4 * w) + colorDelta(rgbValues, idx, idx - 4) + colorDelta(rgbValues, idx, idx + 4) ); } // Bottom-right corner const brr = br4 + (w - 1) * 4; sobelValues[bottomRow + w - 1] = sqrt( colorDelta(rgbValues, brr, brr - w * 4) + colorDelta(rgbValues, brr, brr - 4) ); let max = 0; for (let i = 0; i < sobelValues.length; i++) if (sobelValues[i] > max) max = sobelValues[i]; for (let i = 0, norm1 = 255 / max, norm2 = 1 / (1 + sobelFactor);i < sobelValues.length;i++) {sobelValues[i] =(lightnessValues[i] + sobelValues[i] * norm1 * sobelFactor) * norm2;} return sobelValues; } else { return Float64Array.from(lightnessValues); } }3a:T69e,//TODO: fix this 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; }3b:Te3e,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 } } = event; w = width; h = height; [grid, gridSobel] = initGrids(sobelFactor, imgData, width, height); postMessage({ grid, gridSobel }); stippling = new Stippling(grid, gridSobel, minRadius, maxRadius); const stippleSorter = ([x1, y1], [x2, 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++) { 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 % 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:T924,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", "white"); // let's limit the subpixel precision to two digits, and // strip trailing zeroes to reduce the size of the SVG a bit const limitDigits = v => { let output = v.toFixed(2); if (output.endsWith(".00")) return output.slice(0, output.length - 3); 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 => opacity / distanceFn(d[0], d[1]) ** fallOff; svg .append("g") .selectAll("circle") .data(svgPoints) .join("circle") .attr("r", d => limitDigits(d[2] * inkDensity.inkDensity * distanceFn(d[0], d[1])) ) .attr("cx", d => limitDigits(d[0])) .attr("cy", d => limitDigits(d[1])) .attr("fill", d => hslToRgb(d[3], d[4], d[5], 1)) .attr("opacity", opacityFn); // 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:T435,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 === "Fake Vignetting") { distanceFn = (x, y) => { const dx = x - cx; const dy = y - cy; return 1 + (dx * dx + dy * dy) / edgeFactor; }; } else if (lensEffectMode === "Fake Tilt-Shift") { 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:[{"id":"26c51596ed238118969ab608b0b39edf56b66778a154c78557ab71ba3cfa38573762350765b591c9813e6d2e9ab20b2a8a02023bd6eccd78be6664d79ab964b4","href":"https://static.observableusercontent.com/files/26c51596ed238118969ab608b0b39edf56b66778a154c78557ab71ba3cfa38573762350765b591c9813e6d2e9ab20b2a8a02023bd6eccd78be6664d79ab964b4","name":"Frame7777 160.png","type":"image/png","lastModified":1702386346196.496,"size":4978413},{"id":"a30afb27018567f66be4009581d09b073bc56b7ba1334f9f06d920ed0c5ee3bccd9c4d4451df63f5abb72a07222b840877e55b04a1bb9f7e23644ba8e096060a","href":"https://static.observableusercontent.com/files/a30afb27018567f66be4009581d09b073bc56b7ba1334f9f06d920ed0c5ee3bccd9c4d4451df63f5abb72a07222b840877e55b04a1bb9f7e23644ba8e096060a","name":"Frame 123.png","type":"image/png","lastModified":1702386371690.803,"size":2546474}] 2f:{"id":"fa9629472ef83ff9","slug":null,"title":"A Fast Colored Stipple Generator (blank no BG)","thumbnail":"6770d76a2ef26ddf361566c283ea89caf502bd8bf3aa83d860c06be9a5db164c","access_level":"public","create_time":"$D2023-12-12T13:05:46.196Z","update_time":"$D2023-12-20T18:54:40.930Z","view_time":null,"first_public_time":"$D2023-12-12T13:05:46.196Z","has_unpublished_edits":null,"fork":{"id":"fd5f5bcca7bb09b8","slug":null,"title":"A Fast Colored Stipple Generator","owner":{"id":"0ddb7fa83db1aeec","login":"dimtyl","name":"DANIAUD Dimitri"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0ddb7fa83db1aeec","login":"dimtyl","name":"DANIAUD Dimitri","avatar_url":"https://avatars-next.observableusercontent.com/11ddf742cdf8d3e62545d32485ff0014a5673770cd1cfadc6c8fc11b934ab356","tier":"starter_2024"},"version":1436,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dab385917f7efa24","login":"dimtyl","name":"DANIAUD Dimitri","avatar_url":"https://avatars-next.observableusercontent.com/11ddf742cdf8d3e62545d32485ff0014a5673770cd1cfadc6c8fc11b934ab356","tier":null}],"members":[{"type":"individual","id":"dab385917f7efa24","login":"dimtyl","name":"DANIAUD Dimitri","avatar_url":"https://avatars-next.observableusercontent.com/11ddf742cdf8d3e62545d32485ff0014a5673770cd1cfadc6c8fc11b934ab356","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"A Fast Colored Stipple Generator (blank no BG)","cells":[{"id":0,"value":"title = md`# A Fast Colored Stipple Generator (blank no BG)\n\n\n\n[*(Wait, what is this?)*](#description)\n\n

${iterationMessage}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"viewof lensEffectMode = Radio(\n [\"Nah, I'm good\", \"Fake Vignetting\", \"Fake Tilt-Shift\"],\n { label: \"Some Lens-Effects?\", value: \"Nah, I'm good\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1293,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"viewof inkDensity = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"viewof stippleOpacity = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"md`### Pick your own input image:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"viewof fileImg = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: await FileAttachment(\n \"Frame 123.png\"\n ).url(),\n accept: \"image/*\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"fileImg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1212,"value":"md`*default image credit:* a cropped of [a photo of *Starry Night Over the Rhone*](https://commons.wikimedia.org/wiki/File:Starry_Night_Over_the_Rhone.jpg) by Vincent van Gogh, uploaded to WikiMedia commons by Carl Fredrik Sjöland (presumed to be the photographer)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"delayedUpdate = {\n const button = html``;\n button.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 return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"html`

Implementation

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"function initGrids(sobelFactor, data, w, h) {\n const grid = {\n width: w,\n height: h,\n values: new Float64Array(w*h), // lightness\n saturation: new Float64Array(w*h),\n hue: new Float64Array(w*h),\n };\n for(let i = 0; i < w*h; i++) {\n const [h, s, l] = rgbToHsl(data[i*4], data[i*4 + 1], data[i*4 + 2]);\n grid.hue[i] = h\n grid.values[i] = l;\n grid.saturation[i] = s;\n }\n\n const gridSobel = {\n width: w,\n height: h,\n values: toSobel(w, h, sobelFactor, data, grid.values),\n }\n return [grid, gridSobel];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"workerScript = {\n const script = `\nimportScripts(\"${await require.resolve(\"d3@5\")}\", \"${await require.resolve(\n \"d3-delaunay@5\"\n )}\");\n\n${Stippling.toString()}\n\n${rgbToHsl.toString()}\n\n${hslToRgb.toString()}\n\n${colorDelta.toString()}\n\n${toSobel.toString()}\n\n${initGrids.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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"{\n await imgData;\n\n return startWorker(\n Object.assign({}, options, {\n imgData: imgData.data,\n width: imgData.width,\n height: imgData.height\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"defaultSettings = {\n return {\n showProgress: true,\n channel: \"0\",\n minRadius: 2,\n maxRadius: 3,\n sobelFactor: 0.05,\n inkDensity: 0.8,\n maxIterations: 20,\n totalRelaxations: 20,\n stippleOpacity: 1\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"mutable points = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"mutable iterationMessage = \"Awaiting first iteration\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":"opacity = stippleOpacity.stippleOpacity < 0\n ? 0\n : stippleOpacity.stippleOpacity < 1\n ? stippleOpacity.stippleOpacity\n : 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"import {Radio} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1","titling":"auto"}} 30:"$2f:body"