30:T5d0,md` ![Stippled image of "The Tetons and the Snake River" by Ansel Adams, 1942](https://blindedcyclops.neocities.org/Ansel%20Adams%20river2.png) # Voronoi Stippling Experiments **DRAFT VERSION** A fork of [Mike Bostock's notebook on Voronoi Stippling](https://beta.observablehq.com/@mbostock/voronoi-stippling). It contains a few optimisations that should really improve performance. On top of that, we'll be experimenting with different variants, like variable dot sizes, white dots on black backgrounds, transparancies, and eventually more. I am also working on a [webcam version here](https://beta.observablehq.com/@jobleonard/voronoi-stippling-webcam). ## *Original description* *This notebook applies a weighted variant of [Lloyd’s algorithm](/@mbostock/lloyds-algorithm) to implement stippling. Points are initially positioned randomly using rejection sampling, then at each iteration, the Voronoi cell centroids are weighted by the lightness of the contained pixels.* *This technique is based on [Weighted Voronoi Stippling](https://www.cs.ubc.ca/labs/imager/tr/2002/secord2002b/secord.2002b.pdf) by [Adrian Secord](https://cs.nyu.edu/~ajsecord/stipples.html); see also posts by [Muhammad Firmansyah Kasim](http://sp.mfkasim.com/2016/12/06/stippling-pictures-with-lloyds-algorithm/), [Egor Larionov](https://egorlarionov.com/2015/08/12/weighted-lloyds-method-for-voronoi-tesselation/) and [Noah Veltman](https://bl.ocks.org/veltman/017a2093623e1bf3ae041dd3380578cb).* --- `31:T498,md`As you might have realized by now, each dot in a stippled image is basically a kind of "pixel". In fact, "pixel" originally was just an abbreviation for "**pic**ture **el**ement". For rasterized graphics, this happened to always be a grid. But pixels don't *have* to be square, nor in a grid! In our case, the fundamental pixel of the image is a dot. The resolution of an image is the number of pixels. In our case that is the number of available dots. But because our dots are not confined to a grid, we can have a *local* resolution: a region with many dots has fine-grained resolution, a region with few dots coarse. With the previous approaches, the dots either move to the lightest or the darkest areas of an image. Now think of which areas require the highest resolution: we probably want more pixels in areas with lots of fine detail, and don't need so many in areas without. There is no reason to assume that the brightest or darkest areas of an image contain the most detail, so that does no make a lot of sense. What we instead want is to determine which parts of the image have a lot of detail, which parts don't, and then distribute the dots based on that. `32:T5b2,md`# TODO: Many, many ideas to expand on this. And almost no time... - export to SVG - reduce memory overhead even further - see also: -[*"Webcam + WebWorker + Transferable"* notebook](https://beta.observablehq.com/@jobleonard/webcam-webworker-transferable) (reuse arrays moved back and forth between workers) - [\`Delaunator\` github: *Request: a mutable variant with an update method, for Voronoi relaxation purposes*](https://github.com/mapbox/delaunator/issues/36) - [\`d3-delaunay\` github: *Request: upgrade to Delaunator v3*](https://github.com/d3/d3-delaunay/issues/50) - [*"Lloyd’s Algorithm With Velocities"* notebook](https://beta.observablehq.com/@jobleonard/lloyds-algorithm-with-velocities) - experimenting with velocities + mutable implementations) - refactor cells so that changing options does not have to come with a simulation reset - grey background, white *or* black dots based on difference - gradient background, same idea - stippling per color channel! - Lab stippling? CMYK?- more settings to tweak - relative dot size - relative dot opacity - relative weight power - pre-Sobel blur + strength - post-Sobel blur + strength - clamping + offset to Sobel output values - do not just scale settings linearly, but also power, i.e. \`l * Math.pow(weight, t)\` - separate inputs for dot centroid location and weight, like we already do with the hybrid in the end - add other filters than Sobel to apply to input. `33:T763,md`[↩back](#nonLinearColorSpaces) As mentioned, most images are stored in sRGB color space. What does that even mean? Well, you can treat the R, G and B channels as three directions, giving each RGB combination a coordinate in a 3D "space". A color space is linear if for every two points ${tex`C1`} and ${tex`C2`} in this space, we can draw a line between them, and every color on it would be the one we expect that far along the line. So halfway along the line, or the coordinate equal to ${tex`C1+C2/2`}, would be a perfect blend of ${tex`C1`} and ${tex`C2`}. This is what is needed to do proper addition and averaging of our colors. However, the sRGB color space is *non-linear*. [This video explains it quite well](https://www.youtube.com/watch?v=LKnqECcg6Gw). Anyway, to fix that we have to convert it to a linear color space. This requires a fairly complicated function: > *Again the sRGB component values ${tex`R_\mathrm{srgb}`}, ${tex`G_\mathrm{srgb}`}, ${tex`B_\mathrm{srgb}`} are in the range 0 to 1. (A range of 0 to 255 can simply be divided by 255.0).* > > ${tex`C_\mathrm{linear}= \begin{cases}\frac{C_\mathrm{srgb}}{12.92}, & C_\mathrm{srgb}\le0.04045\\ \left(\frac{C_\mathrm{srgb}+a}{1+a}\right)^{2.4}, & C_\mathrm{srgb}>0.04045 \end{cases}`} > > *where:* > - ${tex`a = 0.055`} > - ${tex`C`} is ${tex`R`}, ${tex`G`}, or ${tex`B`} \`source:\` *[sRGB - The reverse transformation](https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation)*, Wikipedia Luckily for us people have already implemented [color space conversion libraries](https://github.com/colorjs/color-space) in JavaScript, including conversions from [sRGB to linear RGB](https://github.com/colorjs/color-space/blob/1ebfb9e20da7476365ef67a269e5553a686bc8be/xyz.js#[L129-L131]) and [back](https://github.com/colorjs/color-space/blob/1ebfb9e20da7476365ef67a269e5553a686bc8be/xyz.js#[L98-L111]): `34:T5ee,md` After applying these functions, addition, subtraction, multiplication and division of RGB values more or less works as intuition would expect. This is assuming the image was stored in sRGB in the first place, but this is a fairly safe bet. However, the conversion becomes really, *really* slow, becaues there are a ton of calls to \`Math.pow()\`, lots of divisions, and we need to use doubles for our values. A much faster approximation is to simply square the values and store them in a \`Uint16Array\`. Well, almost: // Trick to convert 8-bit value to 16-bit square value. // value between 1-256, so in range notation: [0x01,0x100] let r = (rgba[i] + 1); // convert to fit precisely in 16 bits: // [0x01 * 0x01, 0x100 * 0x100] = [0x1, 0x1000] // [0x1, 0x1000] - 1 = [0x00, 0xFFFF] r = r*r - 1; Compare the performance of [a WebCam filter with the approximate version](https://beta.observablehq.com/@jobleonard/webcam-webworker-transferable) to [one with accurate conversion](https://beta.observablehq.com/@jobleonard/webcam-webworker-transferable-proper-srgb-to-linear-color). While inaccurate, it is still "less wrong" than before: ${tex`r^2`} is closer to ${tex`r^{2.4}`} than not squaring at all. **Further reading:** [*"Gamma error in picture scaling"*](https://web.archive.org/web/20161120114420/http://www.4p8.com:80/eric.brasseur/gamma.html) (Archive.org capture from Nov. 20, 2016) by Eric Brasseur, August 30 2007 - October 2 2016 [↩back](#nonLinearColorSpaces) `35:Ta2b,selectionURLs = [ "https://i.imgur.com/9CGAfY9.jpg", "https://i.imgur.com/mnp2NNj.jpg", "https://i.imgur.com/p34x8ns.jpg", "http://i.imgur.com/xOEwGAp.jpg", "https://upload.wikimedia.org/wikipedia/commons/6/61/Ansel_Adams_-_National_Archives_79-AA-T03.jpg", "https://upload.wikimedia.org/wikipedia/commons/b/ba/Ansel_Adams_-_National_Archives_79-AA-Q01_restored.jpg", "https://upload.wikimedia.org/wikipedia/commons/a/a7/Ansel_Adams_-_National_Archives_79-AA-E23_levels_adj.jpg", "https://upload.wikimedia.org/wikipedia/commons/9/94/Ansel_Adams_-_Farm_workers_and_Mt._Williamson.jpg", "https://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg", "https://upload.wikimedia.org/wikipedia/commons/9/9d/Looking_across_lake_toward_mountains%2C_%22Evening%2C_McDonald_Lake%2C_Glacier_National_Park%2C%22_Montana.%2C_1933_-_1942_-_NARA_-_519861.jpg", "https://upload.wikimedia.org/wikipedia/commons/archive/a/a4/20170830070852%21The_Table_Mountain_and_Cape_Town.jpg", "https://upload.wikimedia.org/wikipedia/commons/0/0d/Die_Radiolarien_%28Rhizopoda_radiata%29_-_Ernst_Haeckel_-_Tafel_12.jpg", "https://upload.wikimedia.org/wikipedia/commons/a/a8/Die_Radiolarien_%28Rhizopoda_radiata%29_-_Ernst_Haeckel_-_Tafel_25.jpg", "https://upload.wikimedia.org/wikipedia/commons/4/48/Die_Radiolarien_%28Rhizopoda_radiata%29_-_Ernst_Haeckel_-_Tafel_26.jpg", "https://upload.wikimedia.org/wikipedia/commons/5/59/Haeckel_Calcispongiae.jpg", "https://upload.wikimedia.org/wikipedia/commons/4/44/Haeckel_Prosobranchia.jpg", "https://upload.wikimedia.org/wikipedia/commons/d/da/Haeckel_Ammonitida.jpg", "https://upload.wikimedia.org/wikipedia/commons/f/f8/Haeckel_Ophiodea_70.jpg", "https://upload.wikimedia.org/wikipedia/commons/0/0c/Haeckel_Spumellaria.jpg", "https://upload.wikimedia.org/wikipedia/commons/a/a9/Haeckel_Actiniae.jpg", "https://upload.wikimedia.org/wikipedia/commons/3/39/Haeckel_Lichenes.jpg", "https://gist.githubusercontent.com/mbostock/35251f06084b931dd17bbf5c9e2b3ebc/raw/6e54d7a29b35688bda4fcabfc05b80f4b2c4a5c5/obama.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/ETH-BIB-Haeckel%2C_Ernst_%281834-1919%29-Portrait-Portr_02762-RE.tif/lossy-page1-2961px-ETH-BIB-Haeckel%2C_Ernst_%281834-1919%29-Portrait-Portr_02762-RE.tif.jpg", "https://upload.wikimedia.org/wikipedia/commons/6/61/Dr._Ernst_Haeckel%2C_Professor_der_zoologie_an_der_Universit%C3%A4t_Iena_CIPB0007.jpg", "https://upload.wikimedia.org/wikipedia/commons/a/aa/Vincent_van_Gogh_-_Self-portrait_with_grey_felt_hat_-_Google_Art_Project.jpg", ]36:T6b8,selectionNames = [ 'Bela Borsodi - "VLP - Terrain" (album cover), 2011', 'David Burdeny - "Mercators Projection", Antarctica, 2007 ', '/u/S1moneyvG - "ITAP , only one", https://www.reddit.com/r/itookapicture/comments/6spujl/itap_only_one/', '/u/Gulo_gulo_ - "Four colors, one picture", University of Michigan, 2017', 'Ansel Adams - "Yellowstone Falls", 1941', 'Ansel Adams - "Church, Taos Pueblo", 1942', 'Ansel Adams - "In Glacier National Park" 1942', 'Ansel Adams - "Farm workers and Mt. Williamson", 1943', 'Ansel Adams - "The Tetons and the Snake River", 1942', 'Ansel Adams - "Evening, McDonald Lake, Glacier National Park", Montana., 1933 - 1942', 'William Hodges - "The Table Mountain and Cape Town", 1787', 'Ernst Haeckel - Tafel 12, Die Radiolarien (Rhizopeda radiata), 1862', 'Ernst Haeckel - Tafel 25.: "Rhizophaera", Die Radiolarien (Rhizopeda radiata), 1862', 'Ernst Haeckel - Tafel 26.: "Spongosphaera streptacantha", Die Radiolarien (Rhizopeda radiata), 1862', 'Ernst Haeckel - plate 5: "Calcispongiae", Kunstformen der Natur, 1904', 'Ernst Haeckel - plate 53: "Prosobranchia", Kunstformen der Natur, 1904', 'Ernst Haeckel - plate 44: "Ammonitida", Kunstformen der Natur, 1904', 'Ernst Haeckel - plate 70: "Ophiodea", Kunstformen der Natur, 1904', 'Ernst Haeckel - plate 91: "Spumellaria", Kunstformen der Natur, 1904', 'Ernst Haeckel - plate 49: "Actiniae", Kunstformen der Natur, 1904', 'Ernst Haeckel - plate 83: "Lichenes", Kunstformen der Natur, 1904', "Obama Portrait", "Portrait of Erns Haeckel, 1918", "Engraving: Dr. Ernst Haeckel, Professor der zoologie an der Universität Iena", "Vincent van Gogh - Self-portrait with grey felt hat, 1887", ]37:T48d,imageLinear = function imageLinear(rgba) { const lrgb = new Uint16Array(width * height * 3); let min = 196605 * 3; let max = 0; // Convert to linear RGB for (let i = 0; i < width*height; i++) { let idx = i<<2; // The red, green and blue channels are not in a linear color space by default. // This means that adding them up leads to incorrect outputs. One crude but fast // approximate conversion to linear color spaces is to take the square number. // Trick to convert 8-bit value to 16-bit square value. // value between 1-256, so in range notation: [0x01,0x100] let r = rgba[idx] + 1; // convert to fit precisely in 16 bits: // [0x01 * 0x01, 0x100 * 0x100] = [0x1, 0x1000] // [0x1, 0x1000] - 1 = [0x00, 0xFFFF] r = r*r - 1; let g = rgba[idx + 1] + 1; g = g*g - 1; let b = rgba[idx + 2] + 1; b = b*b - 1; idx = (i<<1)+i; lrgb[idx] = r; lrgb[idx + 1] = g; lrgb[idx + 2] = b; // Keep track of min/max values let rgb = r + g + b; if (rgb > max) max = rgb; if (rgb < min) min = rgb; } return { rgb: lrgb, min, max }; }38:T1584,imageSobel = { let { rgb } = imageLinear(sobelImageData.data); const blurredRGB = rgb.slice(0); blurLinearRGB(blurredRGB, width, height, blurStrength); const blurredRGB2 = normSobel ? rgb.slice(0) : undefined; if (normSobel){ blurLinearRGB(blurredRGB2, width, height, blurStrength2); } rgb = blurredRGB; const sobel = new Float64Array(width * height); let minSobel = 196605 * 3; let maxSobel = 0; // Convert to sobel values // theoretical maximum value: 255² * four pixel comparisons * three color channels const rgbLine = width*3; for (let y = 1; y < height-1; y++){ const sobelLineIdx = y * width; const lineIdx = sobelLineIdx + sobelLineIdx + sobelLineIdx; // We're going to re-use these variables to reduce array look ups let R = rgb[lineIdx]; let G = rgb[lineIdx + 1]; let B = rgb[lineIdx + 2]; let Rpx = rgb[lineIdx + 3]; let Gpx = rgb[lineIdx + 4]; let Bpx = rgb[lineIdx + 5]; for (let x = 1; x < width-1; x++){ const sobelIdx = x + sobelLineIdx; const rgbIdx = sobelIdx * 3; // We are scanning left to right, so we can re-use the previous x-values like this let Rmx = R; let Gmx = G; let Bmx = B; R = Rpx; G = Gpx; B = Bpx; // Get red green and blue channels, including for the pixels next to the current one // Doing it in this order should be a bit more cache friendly. let Rmy = rgb[rgbIdx - rgbLine]; let Gmy = rgb[rgbIdx - rgbLine + 1]; let Bmy = rgb[rgbIdx - rgbLine + 2]; Rpx = rgb[rgbIdx + 3]; Gpx = rgb[rgbIdx + 4]; Bpx = rgb[rgbIdx + 5]; let Rpy = rgb[rgbIdx + rgbLine]; let Gpy = rgb[rgbIdx + rgbLine + 1]; let Bpy = rgb[rgbIdx + rgbLine + 2]; // As before, we normalize to 1 (using max.sobel in this case), but don't // convert back from the linear color space let val = Math.max(0, ( Math.abs(R - Rmy) + Math.abs(R - Rmx) + Math.abs(R - Rpx) + Math.abs(R - Rpy) + Math.abs(G - Gmy) + Math.abs(G - Gmx) + Math.abs(G - Gpx) + Math.abs(G - Gpy) + Math.abs(B - Bmy) + Math.abs(B - Bmx) + Math.abs(B - Bpx) + Math.abs(B - Bpy) )); if (val > maxSobel) maxSobel = val; if (val < minSobel) minSobel = val sobel[sobelIdx] = val; } } if (!normSobel){ // normalize sobel the "plain" way if (!(maxSobel > 0)){ sobel.fill(0); } else { const norm = 100 / (clampSobel * maxSobel); for (let i = 0; i < sobel.length; i++){ sobel[i] = Math.min(1.0, sobel[i] * norm); } } } else { // Locally normalize sobel based on *other* blurred sobel image. const rgb2 = blurredRGB2; const sobel2 = new Float64Array(width * height); let minSobel2 = 196605 * 3; let maxSobel2 = 0; // Convert rgb2 to sobel values // theoretical maximum value: 255² * four pixel comparisons * three color channels const rgbLine = width*3; for (let y = 1; y < height-1; y++){ const sobelLineIdx = y * width; const lineIdx = sobelLineIdx + sobelLineIdx + sobelLineIdx; // We're going to re-use these variables to reduce array look ups let R = rgb2[lineIdx]; let G = rgb2[lineIdx + 1]; let B = rgb2[lineIdx + 2]; let Rpx = rgb2[lineIdx + 3]; let Gpx = rgb2[lineIdx + 4]; let Bpx = rgb2[lineIdx + 5]; for (let x = 1; x < width-1; x++){ const sobelIdx = x + sobelLineIdx; const rgbIdx = sobelIdx * 3; // We are scanning left to right, so we can re-use the previous x-values like this let Rmx = R; let Gmx = G; let Bmx = B; R = Rpx; G = Gpx; B = Bpx; // Get red green and blue channels, including for the pixels next to the current one // Doing it in this order should be a bit more cache friendly. let Rmy = rgb2[rgbIdx - rgbLine]; let Gmy = rgb2[rgbIdx - rgbLine + 1]; let Bmy = rgb2[rgbIdx - rgbLine + 2]; Rpx = rgb2[rgbIdx + 3]; Gpx = rgb2[rgbIdx + 4]; Bpx = rgb2[rgbIdx + 5]; let Rpy = rgb2[rgbIdx + rgbLine]; let Gpy = rgb2[rgbIdx + rgbLine + 1]; let Bpy = rgb2[rgbIdx + rgbLine + 2]; // As before, we normalize to 1 (using max.sobel in this case), but don't // convert back from the linear color space let val = Math.max(0, ( Math.abs(R - Rmy) + Math.abs(R - Rmx) + Math.abs(R - Rpx) + Math.abs(R - Rpy) + Math.abs(G - Gmy) + Math.abs(G - Gmx) + Math.abs(G - Gpx) + Math.abs(G - Gpy) + Math.abs(B - Bmy) + Math.abs(B - Bmx) + Math.abs(B - Bpx) + Math.abs(B - Bpy) )); if (val > maxSobel2) maxSobel2 = val; if (val < minSobel2) minSobel2 = val; sobel2[sobelIdx] = val; } } // normalize sobel if (!(maxSobel > 0)){ sobel.fill(0); } else { maxSobel = 0; for (let i = 0; i < sobel.length; i++){ const val = Math.max(0, (sobel[i] + 1) / (1 + sobel2[i]) - 1); sobel[i] = val; if (val > maxSobel) maxSobel = val; } const norm = 100 / (clampSobel * maxSobel); for (let i = 0; i < sobel.length; i++){ sobel[i] = Math.min(1.0, sobel[i] * norm); } } } return { sobel: Float32Array.from(sobel)}; }39:Ta55,originalScript = { const blob = new Blob([` importScripts("${await require.resolve("d3-delaunay@3")}"); onmessage = event => { const {data: {data, width, height, n, iterations}} = event; // Allocate these arrays only once, then re-use them. // This reduces allocation and GC pressure, which is // quite significant for Typed Arrays especially. // summing the weights of each pixel in voronoi cell weights = new Float32Array(n); // sum of weighted x and y positions for each voronoi cell weightedCoordinates = new Float32Array(n * 2); // x and y positions for each Voronoi centroid. points = new Float32Array(n * 2); // Initialize the points using rejection sampling. for (let i = 0; i < n; ++i) { let x = 0, y = 0; // try up to a hundred times for(let j = 0, rejected = true; j < 100 && rejected; j++) { x = Math.floor(Math.random() * width); y = Math.floor(Math.random() * height); let val = data[y * width + x] rejected = val * val < Math.random(); } points[i * 2] = x; points[i * 2 + 1] = y; } for (let k = 0; k < iterations; ++k) { const delaunay = new d3.Delaunay(points); const voronoi = delaunay.voronoi([0, 0, width, height]); // Compute the weighted centroid for each Voronoi cell. weightedCoordinates.fill(0); weights.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const w = data[y * width + x]; if (w){ i = voronoi.find(x + 0.5, y + 0.5, i); weights[i] += w; weightedCoordinates[i * 2] += w * (x + 0.5); weightedCoordinates[i * 2 + 1] += w * (y + 0.5); } } } // Relax the diagram by moving points to the weighted centroid. // Wiggle the points a little bit so they don’t get stuck. const wiggle = Math.pow(k + 1, -0.8) * 10; for (let i = 0, x0 = points[0], y0 = points[1]; i < n; ++i) { let weight = weights[i]; if (weight) { x0 = points[i * 2] * 0.0625 + 0.9375 * weightedCoordinates[i * 2] / weight; y0 = points[i * 2 + 1] * 0.0625 + 0.9375 * weightedCoordinates[i * 2 + 1] / weight; } else { x0 = points[i * 2] y0 = points[i * 2 + 1]; } points[i * 2] = x0 + (Math.random() - Math.random()) * wiggle; points[i * 2 + 1] = y0 + (Math.random() - Math.random()) * wiggle; } if (k < 80 || k%16 === 0 || k+1 === iterations) postMessage(points); } close(); }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }3a:Tbab,blackdotsScript = { const blob = new Blob([` importScripts("${await require.resolve("d3-delaunay@3")}"); onmessage = event => { const {data: {data, width, height, n, iterations}} = event; const points = new Float64Array(n * 2); const velocities = new Float64Array(n * 2); const weightedCoordinates = new Float32Array(n * 2); const weights = new Float64Array(n); const speedLimit = 2 * Math.sqrt(width * height / n)/Math.PI; // Initialize the points using rejection sampling. for (let i = 0; i < n; ++i) { let x = 0, y = 0; // try up to a hundred times for(let j = 0, rejected = true; j < 100 && rejected; j++) { x = Math.floor(Math.random() * width); y = Math.floor(Math.random() * height); rejected = Math.random() > data[y * width + x]; } points[i * 2] = x; points[i * 2 + 1] = y; } for (let k = 0; k < iterations; ++k) { const delaunay = new d3.Delaunay(points); const voronoi = delaunay.voronoi([0, 0, width, height]); // Compute the weighted centroid for each Voronoi cell. weightedCoordinates.fill(0); weights.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { let w = data[y * width + x]; if (w){ i = voronoi.find(x + 0.5, y + 0.5, i); weights[i] += w; weightedCoordinates[i * 2] += w * (x + 0.5); weightedCoordinates[i * 2 + 1] += w * (y + 0.5); } } } for (let i = 0; i < n; ++i) { let weight = weights[i]; let x0 = points[i * 2] let y0 = points[i * 2 + 1]; let x1, y1; if (weight) { x1 = weightedCoordinates[i * 2] / weight; y1 = weightedCoordinates[i * 2 + 1] / weight; } else { x1 = x0 y1 = y0 } const dx = x1 - x0; const dy = y1 - y0; let vx = velocities[i * 2]; let vy = velocities[i * 2 + 1]; vx = vx * 0.9 + dx; vy = vy * 0.9 + dy; x1 = x0 + vx; y1 = y0 + vy; if (x1 <= 1) { x1 = 1 + Math.random(); vx = 0; vy = 0; } else if (x1 >= width - 2) { x1 = width - 2 - Math.random(); vx = 0; vy = 0; } if (y1 <= 1) { y1 = 1 + Math.random(); vx = 0; vy = 0; } else if (y1 >= height - 2) { y1 = height - 2 - Math.random(); vx = 0; vy = 0; } let speed = Math.sqrt(vx*vx + vy*vy) || 0; if (speed > speedLimit) { speed = speedLimit/speed; vx *= speed; vy *= speed; } velocities[i * 2] = vx; velocities[i * 2 + 1] = vy; points[i * 2] = x1; points[i * 2 + 1] = y1; } if (k < 80 || k%16 === 0 || k+1 === iterations) postMessage({points, weights}); } close(); }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }3b:Tbec,whitedotsScript = { const blob = new Blob([` importScripts("${await require.resolve("d3-delaunay@3")}"); onmessage = event => { const {data: {data, width, height, n, iterations}} = event; const weightedCoordinates = new Float32Array(n * 2); const weights = new Float64Array(n); const points = new Float64Array(n * 2); const velocities = new Float64Array(n * 2); const speedLimit = 2 * Math.sqrt(width * height / n)/Math.PI; // Initialize the points using rejection sampling. for (let i = 0; i < n; ++i) { let x = 0, y = 0; // try up to a hundred times for(let j = 0, rejected = true; j < 100 && rejected; j++) { x = Math.floor(Math.random() * width); y = Math.floor(Math.random() * height); rejected = Math.random() > data[y * width + x]; } points[i * 2] = x; points[i * 2 + 1] = y; } for (let k = 0; k < iterations; ++k) { const delaunay = new d3.Delaunay(points); const voronoi = delaunay.voronoi([0, 0, width, height]); // Compute the weighted centroid for each Voronoi cell. weightedCoordinates.fill(0); weights.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { i = voronoi.find(x + 0.5, y + 0.5, i); let w = data[y * width + x]; if (w){ weights[i] += w; weightedCoordinates[i * 2] += w * (x + 0.5); weightedCoordinates[i * 2 + 1] += w * (y + 0.5); } } } // Relax the diagram by moving points to the weighted centroid. for (let i = 0; i < n; ++i) { let weight = weights[i]; let x0 = points[i * 2] let y0 = points[i * 2 + 1]; let x1, y1; if (weight) { x1 = weightedCoordinates[i * 2] / weight; y1 = weightedCoordinates[i * 2 + 1] / weight; } else { x1 = x0 y1 = y0 } const dx = x1 - x0; const dy = y1 - y0; let vx = velocities[i * 2]; let vy = velocities[i * 2 + 1]; vx = vx * 0.9 + dx; vy = vy * 0.9 + dy; x1 = x0 + vx; y1 = y0 + vy; if (x1 <= 1) { x1 = 1 + Math.random(); vx = 0; vy = 0; } else if (x1 >= width - 2) { x1 = width - 2 - Math.random(); vx = 0; vy = 0; } if (y1 <= 1) { y1 = 1 + Math.random(); vx = 0; vy = 0; } else if (y1 >= height - 2) { y1 = height - 2 - Math.random(); vx = 0; vy = 0; } let speed = Math.sqrt(vx*vx + vy*vy) || 0; if (speed > speedLimit) { speed = speedLimit/speed; vx *= speed; vy *= speed; } velocities[i * 2] = vx; velocities[i * 2 + 1] = vy; points[i * 2] = x1; points[i * 2 + 1] = y1; } if (k < 80 || k%16 === 0 || k+1 === iterations) postMessage({points, weights}); } close(); }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }3c:Tc84,sobeldotsScript = { const blob = new Blob([` importScripts("https://unpkg.com/d3-delaunay@3.1.7/dist/d3-delaunay.min.js"); onmessage = event => { const {data: {data, sobelData, width, height, n, iterations}} = event; const weightedCoordinates = new Float32Array(n * 2); const sobelWeights = new Float64Array(n); const points = new Float64Array(n * 2); const velocities = new Float64Array(n * 2); const speedLimit = 2 * Math.sqrt(width * height / n)/Math.PI; // Initialize the points using rejection sampling. for (let i = 0; i < n; ++i) { let x = 0, y = 0; // try up to a hundred times for(let j = 0, rejected = true; j < 100 && rejected; j++) { x = Math.random() * width; y = Math.random() * height; let val = sobelData[(y | 0) * width + (x | 0)] || 0; rejected = Math.random() >= val; } points[i * 2] = x; points[i * 2 + 1] = y; } for (let k = 0; k < iterations; ++k) { const delaunay = new d3.Delaunay(points); const voronoi = delaunay.voronoi([0, 0, width, height]); // Compute the weighted centroid for each Voronoi cell. weightedCoordinates.fill(0); sobelWeights.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { i = voronoi.find(x + 0.5, y + 0.5, i); let sw = sobelData[y * width + x]; if (sw){ sobelWeights[i] += sw; weightedCoordinates[i * 2] += sw * (x + 0.5); weightedCoordinates[i * 2 + 1] += sw * (y + 0.5); } } } // Relax the diagram by moving points to the weighted centroid. for (let i = 0; i < n; ++i) { let x0 = points[i * 2] let y0 = points[i * 2 + 1]; let x1 = x0; let y1 = y0; let weight = sobelWeights[i]; if (weight) { x1 = weightedCoordinates[i * 2] / weight; y1 = weightedCoordinates[i * 2 + 1] / weight; } const dx = x1 - x0; const dy = y1 - y0; let vx = velocities[i * 2]; let vy = velocities[i * 2 + 1]; vx = vx * 0.9 + dx; vy = vy * 0.9 + dy; x1 = x0 + vx; y1 = y0 + vy; if (x1 <= 1) { x1 = 1 + Math.random(); vx = 0; vy = 0; } else if (x1 >= width - 2) { x1 = width - 2 - Math.random(); vx = 0; vy = 0; } if (y1 <= 1) { y1 = 1 + Math.random(); vx = 0; vy = 0; } else if (y1 >= height - 2) { y1 = height - 2 - Math.random(); vx = 0; vy = 0; } let speed = Math.sqrt(vx*vx + vy*vy) || 0; if (speed > speedLimit) { speed = speedLimit/speed; vx *= speed; vy *= speed; } velocities[i * 2] = vx; velocities[i * 2 + 1] = vy; points[i * 2] = x1; points[i * 2 + 1] = y1; } // Don't render each iteration - later ones don't make much progress anyway if (k < 80 || k%16 === 0 || k+1 === iterations) { postMessage({points, weights: sobelWeights}); } } close(); }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }3d:T404,darkHybridDotsWorker = { if (renderDarkHybrid){ const context = darkHybridDotsContext; const worker = new Worker(darkHybridDotsScript); mutable darkHybridDotsRenders = 0; function messaged({data: {points, weights, sobelWeights}}) { context.fillStyle = "#FFF"; context.fillRect(0, 0, width, height); context.fillStyle = "#000"; context.beginPath(); for (let i = 0, n = points.length; i < n; i += 2) { let w = weights[i>>1]; if (w > 0.5){ w = Math.sqrt(w/3); const x = points[i] const y = points[i + 1]; context.moveTo(x, y); context.arc(x, y, w, 0, 2 * Math.PI); } } context.fill(); mutable darkHybridDotsRenders += 1; } invalidation.then(() => worker.terminate()); worker.addEventListener("message", messaged); worker.postMessage({data: imageGray.dark, sobelData: imageSobel.sobel, width, height, n, sobelRatio: hybridSobelRatioDark, iterations}); yield worker; } }3e:T122d,darkHybridDotsScript = { const blob = new Blob([`importScripts("${await require.resolve("d3-delaunay@3")}"); onmessage = event => { const {data: {data, sobelData, width, height, n, sobelRatio, iterations}} = event; const weightedCoordinates = new Float32Array(n * 2); const weights = new Float64Array(n); const points = new Float64Array(n * 2); const weightedSobelCoordinates = new Float32Array(n * 2); const sobelWeights = new Float64Array(n); const sobelPoints = new Float64Array(n * 2); const velocities = new Float64Array(n * 2); const speedLimit = 2 * Math.sqrt(width * height / n)/Math.PI; // pre-calc and re-use. const summedData = new Float64Array(sobelData.length); for(let i = 0; i < sobelData.length; i++){ const darknessWeight = data[i]; const sobelWeight = sobelData[i]; summedData[i] = darknessWeight + (sobelWeight - darknessWeight) * sobelRatio; } // Initialize the points using rejection sampling. for (let i = 0; i < n; ++i) { let x = 0, y = 0; for(let j = 0, rejected = true; j < 100 && rejected; j++) { x = Math.random() * width; y = Math.random() * height; const summedWeight = summedData[(y|0) * width + (x|0)] || 0; rejected = Math.random() > summedWeight; } sobelPoints[i * 2] = x; sobelPoints[i * 2 + 1] = y; } for (let k = 0; k < iterations; ++k) { const delaunay = new d3.Delaunay(sobelPoints); const voronoi = delaunay.voronoi([0, 0, width, height]); // Compute the weighted centroid for each Voronoi cell. weightedSobelCoordinates.fill(0) sobelWeights.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { let summedWeight = summedData[y * width + x]; if (summedWeight){ i = voronoi.find(x + 0.5, y + 0.5, i); sobelWeights[i] += summedWeight; weightedSobelCoordinates[i * 2] += summedWeight * (x + 0.5); weightedSobelCoordinates[i * 2 + 1] += summedWeight * (y + 0.5); } } } // Relax the diagram by moving points to the weighted centroid. // Wiggle the points a little bit so they don’t get stuck. const wiggle = Math.pow(k + 1, -0.8) * 10; for (let i = 0; i < n; ++i) { let weight = sobelWeights[i]; let x0 = sobelPoints[i * 2] let y0 = sobelPoints[i * 2 + 1]; let x1 = x0; let y1 = y0; if (weight) { x1 = weightedSobelCoordinates[i * 2] / weight; y1 = weightedSobelCoordinates[i * 2 + 1] / weight; } const dx = x1 - x0; const dy = y1 - y0; let vx = velocities[i * 2]; let vy = velocities[i * 2 + 1]; vx = vx * 0.9 + dx; vy = vy * 0.9 + dy; x1 = x0 + vx; y1 = y0 + vy; if (x1 <= 1) { x1 = 1 + Math.random(); vx = 0; vy = 0; } else if (x1 >= width - 2) { x1 = width - 2 - Math.random(); vx = 0; vy = 0; } if (y1 <= 1) { y1 = 1 + Math.random(); vx = 0; vy = 0; } else if (y1 >= height - 2) { y1 = height - 2 - Math.random(); vx = 0; vy = 0; } let speed = Math.sqrt(vx*vx + vy*vy) || 0; if (speed > speedLimit) { speed = speedLimit/speed; vx *= speed; vy *= speed; } velocities[i * 2] = vx; velocities[i * 2 + 1] = vy; sobelPoints[i * 2] = x1; sobelPoints[i * 2 + 1] = y1; } if (k < 80 || k%16 === 0 || k+1 === iterations) { // Only needed for rendering, so not calculated in other iterations weightedCoordinates.fill(0); weights.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const weight = data[y * width + x]; if (weight){ i = voronoi.find(x + 0.5, y + 0.5, i); weights[i] += weight; weightedCoordinates[i * 2] += weight * (x + 0.5); weightedCoordinates[i * 2 + 1] += weight * (y + 0.5); } } } for (let i = 0; i < n; ++i) { const weight = weights[i]; if (weight) { points[i * 2] = weightedCoordinates[i * 2] / weight; points[i * 2 + 1] = weightedCoordinates[i * 2 + 1] / weight } else { points[i * 2] = points[i * 2] points[i * 2 + 1] = points[i * 2 + 1]; } } postMessage({points, weights, sobelWeights}); } } close(); }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }3f:T40c,lightHybridDotsWorker = { if (renderLightHybrid){ const context = lightHybridDotsContext; const worker = new Worker(lightHybridDotsScript); mutable lightHybridDotsRenders = 0; function messaged({data: {points, weights, sobelWeights}}) { context.fillStyle = "#000"; context.fillRect(0, 0, width, height); context.fillStyle = "#FFF"; context.beginPath(); for (let i = 0, n = points.length; i < n; i += 2) { let w = weights[i>>1]; if (w > 0.5){ w = Math.sqrt(w/3); const x = points[i] const y = points[i + 1]; context.moveTo(x, y); context.arc(x, y, w, 0, 2 * Math.PI); } } context.fill(); mutable lightHybridDotsRenders += 1; } invalidation.then(() => worker.terminate()); worker.addEventListener("message", messaged); worker.postMessage({data: imageGray.light, sobelData: imageSobel.sobel, width, height, n, sobelRatio: hybridSobelRatioLight, iterations}); yield worker; } }40:T1215,lightHybridDotsScript = { const blob = new Blob([`importScripts("${await require.resolve("d3-delaunay@3")}"); onmessage = event => { const {data: {data, sobelData, width, height, n, sobelRatio, iterations}} = event; const weightedCoordinates = new Float32Array(n * 2); const weightedSobelCoordinates = new Float32Array(n * 2); const weights = new Float64Array(n); const sobelWeights = new Float64Array(n); const points = new Float64Array(n * 2); const sobelPoints = new Float64Array(n * 2); const velocities = new Float64Array(n * 2); const speedLimit = 2 * Math.sqrt(width * height / n)/Math.PI; // pre-calc and re-use. const summedData = new Float64Array(sobelData.length); for(let i = 0; i < sobelData.length; i++){ const lightnessWeight = data[i]; const sobelWeight = sobelData[i]; summedData[i] = lightnessWeight + (sobelWeight - lightnessWeight) * sobelRatio; } // Initialize the points using rejection sampling. for (let i = 0; i < n; ++i) { let x = 0, y = 0; for(let j = 0, rejected = true; j < 100 && rejected; j++) { x = Math.random() * width; y = Math.random() * height; const summedWeight = summedData[(y|0) * width + (x|0)] || 0; rejected = Math.random() > summedWeight; } sobelPoints[i * 2] = x; sobelPoints[i * 2 + 1] = y; } for (let k = 0; k < iterations; ++k) { const delaunay = new d3.Delaunay(sobelPoints); const voronoi = delaunay.voronoi([0, 0, width, height]); // Compute the weighted centroid for each Voronoi cell. weightedSobelCoordinates.fill(0) sobelWeights.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { let summedWeight = summedData[y * width + x]; if (summedWeight){ i = voronoi.find(x + 0.5, y + 0.5, i); sobelWeights[i] += summedWeight; weightedSobelCoordinates[i * 2] += summedWeight * (x + 0.5); weightedSobelCoordinates[i * 2 + 1] += summedWeight * (y + 0.5); } } } // Relax the diagram by moving points to the weighted centroid. // Wiggle the points a little bit so they don’t get stuck. const wiggle = Math.pow(k + 1, -0.8) * 10; for (let i = 0; i < n; ++i) { let weight = sobelWeights[i]; let x0 = sobelPoints[i * 2] let y0 = sobelPoints[i * 2 + 1]; let x1 = x0; let y1 = y0; if (weight) { x1 = weightedSobelCoordinates[i * 2] / weight; y1 = weightedSobelCoordinates[i * 2 + 1] / weight; } const dx = x1 - x0; const dy = y1 - y0; let vx = velocities[i * 2]; let vy = velocities[i * 2 + 1]; vx = vx * 0.9 + dx; vy = vy * 0.9 + dy; x1 = x0 + vx; y1 = y0 + vy; if (x1 <= 1) { x1 = 1 + Math.random(); vx = 0; vy = 0; } else if (x1 >= width - 2) { x1 = width - 2 - Math.random(); vx = 0; vy = 0; } if (y1 <= 1) { y1 = 1 + Math.random(); vx = 0; vy = 0; } else if (y1 >= height - 2) { y1 = height - 2 - Math.random(); vx = 0; vy = 0; } let speed = Math.sqrt(vx*vx + vy*vy) || 0; if (speed > speedLimit) { speed = speedLimit/speed; vx *= speed; vy *= speed; } velocities[i * 2] = vx; velocities[i * 2 + 1] = vy; sobelPoints[i * 2] = x1; sobelPoints[i * 2 + 1] = y1; } if (k < 80 || k%16 === 0 || k+1 === iterations) { weights.fill(0); weightedCoordinates.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const lightnessWeight = data[y * width + x]; if (lightnessWeight) { i = voronoi.find(x + 0.5, y + 0.5, i); weights[i] += lightnessWeight; weightedCoordinates[i * 2] += lightnessWeight * (x + 0.5); weightedCoordinates[i * 2 + 1] += lightnessWeight * (y + 0.5); } } } for (let i = 0; i < n; ++i) { const weight = weights[i]; if (weight) { points[i * 2] = weightedCoordinates[i * 2] / weight; points[i * 2 + 1] = weightedCoordinates[i * 2 + 1] / weight } else { points[i * 2] = points[i * 2] points[i * 2 + 1] = points[i * 2 + 1]; } } postMessage({points, weights, sobelWeights}); } } close(); }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }41:T892,// Gaussian approximation function blurLinearRGB(lrgb, width, height, radius) { "use strict"; if (!(radius > 0)) return lrgb; const widthMinus1 = width - 1 | 0; const heightMinus1 = height - 1 | 0; const blurWidth = radius + radius + 1| 0; const weights = new Float32Array(blurWidth); { const pyramidWidth = radius + 1 | 0; const pyramidRadius = pyramidWidth >>> 1; const pyramidWeights = new Uint32Array(pyramidWidth); for (let i = 0; i < pyramidWidth - pyramidRadius; i++){ for (let j = 0; j < pyramidRadius; j++){ pyramidWeights[i + j]++; } } for (let i = 0; i < blurWidth - pyramidWidth; i++) { for (let j = 0; j < pyramidWidth; j++){ weights[i + j] += pyramidWeights[j]; } } } let norm = 0; for(let i = 0; i < weights.length; i++){ for (let j = 0; j < weights.length; j++) { norm += weights[i] * weights[j]; } } const buffer = new Float64Array(lrgb.length); // blur columns for (let y = 0; y < height; y++) { const yIdx = y * width; for (let x = 0; x < width; x++) { const targetIdx = (x + yIdx) * 3; for (let i = -radius; i <= radius; i++) { const weight = weights[i + radius]; const xIdx = Math.min(widthMinus1, Math.max(0, x + i)); const sourceIdx = (xIdx + yIdx) * 3; buffer[targetIdx] += weight * lrgb[sourceIdx]; buffer[targetIdx+1] += weight * lrgb[sourceIdx+1]; buffer[targetIdx+2] += weight * lrgb[sourceIdx+2]; } } } // blur rows for (let x = 0; x < width; x++) { for (let y = 0; y < height; y++) { let r = 0, g = 0, b = 0; const targetIdx = (x + y * width) * 3; for (let i = -radius; i <= radius; i++) { const weight = weights[i + radius]; const yIdx = Math.min(heightMinus1, Math.max(0, (y + i))) * width; const sourceIdx = (x + yIdx) * 3; r += weight * buffer[sourceIdx]; g += weight * buffer[sourceIdx+1]; b += weight * buffer[sourceIdx+2]; } lrgb[targetIdx] = r / norm | 0; lrgb[targetIdx+1] = g / norm | 0; lrgb[targetIdx+2] = b / norm | 0; } } return lrgb; }42:[] 2e:{"title":"Voronoi Stippling Experiments","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"md`## Set-Up\n\nThis is a lot more fun if you can choose your own picture and then fiddle with the knobs to make the output look juuust right, don't you agree? So go tweak the settings to your heart's content first!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2267,"value":"viewof imageSelectionMethod = radio({\n title: 'Image Selection',\n options: [\n { label: 'Default Set', value: 'default' },\n { label: 'File Selection (local, does not upload)', value: 'file' },\n { label: 'Image URL', value: 'url' },\n ],\n value: 'default'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1459,"value":"viewof imageSelect = {\n switch(imageSelectionMethod){\n case \"default\":\n return select({\n description: 'Select Image from default set', \n options: selectionNames.map((label, value) => ({label, value})),\n value: 0\n });\n case \"file\":\n return file({\n description: \"Select an image file\",\n accept: \"image/*\",\n multiple: false,\n });\n case \"url\":\n return text({\n description: \"Select an image via URL\",\n placeholder: \"Paste URL here\", \n submit: \"Go\"\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2027,"value":"md`\n- **\\`selected image:\\`** ***${selectedImg.name}***\n- **\\`source:\\`** [${selectedImg.url.length > 50 ? selectedImg.url.substr(0, 50) + \"...\" : selectedImg.url}](${selectedImg.url})\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1548,"value":"imageElement = await new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.onerror = reject;\n image.onload = () => {\n resolve(image);\n };\n image.src = selectedImg.url;\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"viewof totalDots = slider({\n title: \"Number of dots to render\",\n description: `(The amount of dots scales with image size, up to - on average - one per 4×4 pixels)`,\n min: 0,\n max: width * height/(4*4),\n step: 1,\n value: Math.max(1, Math.round(width * height / (4*4*4))),\n format: \",\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2768,"value":"dotDensity = md`Current average density is one dot per ${Math.sqrt(width * height / totalDots).toPrecision(3)} × ${Math.sqrt(width * height / totalDots).toPrecision(3)} pixels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"// For how many iterations should we let the algorithm relax the Voronoi cells?\nviewof iterations = slider({\n title: \"Number of iterations\",\n description: \"For how many iterations should we let the algorithm relax the Voronoi cells?\",\n min: 0,\n max: 640,\n step: 1,\n value: 80,\n format: \",\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1563,"value":"md`**NOTE:** High counts and iterations take more time, processing power and memory, and may in some cases even freeze the browser. Be careful!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"startingPointMD = md`## Starting Point: Mike Bostock's Original Implementation (kind of)\n\nThe code that generates the image below should produce similar results to the original code that has been forked. \n\nSome code optimizations and refactoring have been applied to reduce memeory overhead and do less work in general for faster results. Comments were also added in an attempt to make it easier to make sense of what is happening in the code as well. All that aside, it should be functionally identical to the original implementation that we forked from in terms of aesthetic output.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"viewof renderOriginal = checkbox({\n options: [{ value: \"toggle\", label: \"render stipples\"}],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"originalDotsCanvas = originalDotsContext.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":2239,"value":"md`\nAs you can see, even with optimizations it still takes quite a few renders to converge on an image, and a *really* long time to converge on a finely detailed one. Even then the results feel quite blurry most of the time. There are a number of reasons for this.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2477,"value":"nonLinearColorSpaces = md`\n### Non-linear color spaces\n\nOriginally, the pixel values were naively added to determine lightness. However, this assumes that averaging two pixel values gives a color that is halfway between the original two. This is called a *linear* color space.\n\nThe problem is that computers typically store colors in the sRGB color space, where this does not apply (the reason has to do with data compression, making use of how our eyes react non-linearly to physical light - [see this video](https://www.youtube.com/watch?v=LKnqECcg6Gw) for an explanation). Because of that, naively adding and averaging creates errors.\n\nSo we have to (approximately) linearize our RGB values first. The formula and implementation details are kind of complicated, see the [*\\sRGB to linear RGB*](#AppendixA) appendix.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2472,"value":"md`\n### Fixed Generator Sizes\n\n**TODO:** write explanation, refer to Adrian Secord's master thesis\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2470,"value":"md`\n### Adding Momentum to Generation Motion\n\n**TODO:** write explanation why adding momentum and velocity improves convergence, how this adds \"energy\" to the system and requires damping. Figure out why 1/sqrt(2) seems to be close to critical damping factor.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2466,"value":"md`\n### Initial Guess\n\n**TODO:** implement and explain using summed area tables for more even initial distribution as an alternative to random sampling with possible better convergence rate due to smaller initial error.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"md`## Varying Generator Sizes - Black Dots On White Background\n\nLet's extend the original version by making the dots vary in size depending how dark their associated cells are in the original image.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"viewof renderBlack = checkbox({\n options: [{ value: \"toggle\", label: \"render stipples with varying generator size\"}],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"blackDotsCanvas = blackDotsContext.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"md`## Varying Generator Sizes - White Dots On Black Background\n\nWhy limit ourselves to black dots on a white background? Why not do the opposite: white dots on a black background? ~~And why not use oversized overlapping transparant dots?~~ Let's see what that looks like:\n\n*(EDIT: the part with overlapping transparent discs temporarily removed, will be coded back as an optional setting later)*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"viewof renderWhite = checkbox({\n options: [{ value: \"toggle\", label: \"render white stipples on a dark background\"}],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1221,"value":"whiteDotsCanvas = whiteDotsContext.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"md`\nA good first start, but there's room for improvement still! For starters, we are \"wasting\" a lot of dots on the empty white background. If we're interested in getting as much visual information in with as few dots as possible, it would make more sense to fill those up with big overlapping cells. That would leave of dots for the highly detailed areas, which is where we probably want a higher resolution.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"md`## Blended Dots\n\nTo easily compare the two types of images compare you can fade between them here:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1290,"value":"viewof blendRatio = slider({\n min: 0, \n max: 1,\n value: 0.5,\n precision: 4,\n description: \"Ratio between dark and light stipples\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"blendedDotsCanvas = blendedDotsContext.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"md`# Better Resolution Distribution with a Sobel Operator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1699,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1697,"value":"sobelImageOutput = {\n const context = DOM.context2d(width, height);\n const ctxData = context.createImageData(width, height);\n for(let i = 0; i < ctxData.data.length;){\n const val = Math.min(255, Math.sqrt(imageSobel.sobel[i>>2]) * 256)| 0;\n ctxData.data[i++] = val;\n ctxData.data[i++] = val;\n ctxData.data[i++] = val;\n ctxData.data[i++] = 0xFF;\n }\n context.putImageData(ctxData, 0, 0);\n yield context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2733,"value":"viewof blurStrength = slider({\n title: \"Blur Strength\",\n description: \"How much to blur the image before applying Sobel\",\n min: 0,\n max: 100,\n step: 1,\n value: 2,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3132,"value":"viewof clampSobel = slider({\n title: \"Clamp Max Sobel Value\",\n description: \"Use this to correct for high contrasts pushing away lower contrasts\",\n min: 0,\n max: 100,\n step: 1,\n value: 100,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3051,"value":"viewof normSobel = checkbox({\n options: [{ value: \"toggle\", label: \"Experimental: normalize based on second Sobel (try using a bigger blur strength)\"}],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3053,"value":"viewof blurStrength2 = slider({\n title: \"Blur Strength for second Sobel\",\n description: \"How much to blur the image before applying second Sobel\",\n min: 0,\n max: 100,\n step: 1,\n value: 2,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3142,"value":"viewof sobelSelectionMethod = radio({\n title: 'Sobel Image Source Selection (same as regular image if nothing is selected)',\n options: [\n { label: 'Image URL', value: 'url' },\n { label: 'File Selection (local, does not upload)', value: 'file' },\n ],\n value: 'url'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3138,"value":"viewof sobelImageSelect = {\n switch(sobelSelectionMethod){\n case \"file\":\n return file({\n description: \"Select an image file\",\n accept: \"image/*\",\n multiple: false,\n });\n case \"url\":\n return text({\n description: \"Alternate URL for Sobel source\",\n placeholder: selectedImg.url, \n submit: \"Go\"\n });\n default:\n return { name: selectedImg.name, url: selectedImg.url }\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1893,"value":"md`\nThe image above shows one way of doing this. It is the application of a so-called [Sobel operator](https://en.wikipedia.org/wiki/Sobel_operator) on the input image. Basically, it compares each pixel to its neighbours. The bigger the difference in value, the lighter the output pixel.\n\nWith this as an input, the stipples should converge on areas with a lot of quickly-changing pixels. Let's see what happens if we use this Sobel image as the input for our stippling algorithm:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"viewof renderSobel = checkbox({\n options: [{ value: \"toggle\", label: \"render sobel stipples\"}],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"sobelDotsCanvas = sobelDotsContext.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":1257,"value":"md`I would call this a successful failure! The image basicall looks a stippled Sobel image now, which isn't very useful. However, we can also see the principle working already: the dots are grouped around areas that we would typically consider edges. On top of that, they form contour lines, which helps readability.\n\nHowever, where things go wrong is that the *size* of the dots also depends on the Sobel values. Instead, they should grow and shrink based on the lightness/darkness of the associated voronoi cell.\n\nFurthermore, in some images the centroids no longer tile neatly.\n\nSo let's try fixing that next.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"md`## Putting it all together (WIP)\n\n**TODO: Explain in detail**\n\n- mix weight of plain lightness/darkness with sobel edges, with a variable ratio\n- keep two sets of centroids: mixed-weighted, and lightness/darkness weighted. The former are used for relaxation of cells. The latter to move the centroids to a position that tiles better.\n\n### Dark Mixed-Weight Sobel Dots\n\nLet's start with black dots on a white background again.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"viewof hybridSobelRatioDark = slider({\n title: \"Darkness weight vs Sobel weight ratio\",\n description: \"Use a mix of darkness values and Sobel values to determing cell weight\",\n min: 0,\n max: 1,\n precision: 4,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"viewof renderDarkHybrid = checkbox({\n options: [{ value: \"toggle\", label: \"render dark stipples on white background\"}],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"darkHybridDotsCanvas = darkHybridDotsContext.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":1863,"value":"md`### Light Mixed-Weight Sobel Dots\n\nAnd now for the white dots on a black background:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1157,"value":"viewof hybridSobelRatioLight = slider({\n title: \"Lightness weight vs Sobel weight ratio\",\n description: \"Use a mix of lightness values and Sobel values to determing cell weight\",\n min: 0,\n max: 1,\n precision: 4,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"viewof renderLightHybrid = checkbox({\n options: [{ value: \"toggle\", label: \"render white stipples on dark background\"}],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1776,"value":"lightHybridDotsCanvas = lightHybridDotsContext.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":1861,"value":"md`## Blended Sobel Dots\n\nAnd the fade between option:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1422,"value":"viewof blendSobelRatio = slider({\n title: \"Dark Sobel : Light Sobel blend ratio\",\n min: 0,\n max: 1,\n precision: 4,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1424,"value":"blendedSobelDotsCanvas = blendedSobelDotsContext.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":2850,"value":"md`## Renders Gallery\n\nAnd finally, a gallery so you can quickly compare all outputs:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2797,"value":"// Quickly switch between render types\nviewof rendersGallery = radio({\n title: \"Quickly switch between output renders, for easy comparison\",\n options: [\n { label: 'Original Implementation', value: 'original' },\n { label: 'Variable Black Dots', value: 'black' },\n { label: 'Variable White Dots', value: 'white' },\n { label: 'Blended Variable Dots', value: 'blend' },\n { label: 'Sobel Dots', value: 'sobel' },\n { label: 'Sobel-biased Black Dots', value: 'sobel black' },\n { label: 'Sobel-biased White Dots', value: 'sobel white' },\n { label: 'Blended Sobel-biased Dots', value: 'sobel blend' },\n ],\n value: 'original'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2801,"value":"galleryDotsCanvas = galleryDotsContext.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":1900,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2552,"value":"Appendices = md`\n\n---\n\n## Appendices\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2555,"value":"AppendixA = md`### Appendix A: sRGB to linear RGB`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2580,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2560,"value":"/**\n * Converts an sRGB value to linear color space\n * Assumes the value is in in the range [0-255]\n */\ntoLinear = function (c) {\n c /= 255;\n\tif (c > 0.04045) \n return Math.pow(((c + 0.055) / 1.055), 2.4);\n else\n return c / 12.92;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2563,"value":"/**\n * Converts a linear value to sRGB value\n * Assumes the value is in the range [0-1.0]\n */\ntosRGB = function (c) {\n if (c > 0.0031308) {\n c = (1.055 * Math.pow(c, 1.0 / 2.4)) - 0.055;\n return (c << 8) - c;\n }\n return c * 12.92 * 255;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2569,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1795,"value":"md`\n---\n*(Below are all the variables that would just interrupt the flow of the notebook)*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2265,"value":"import {select, slider, file, text, radio, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1679,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1682,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1478,"value":"selectedImg = {\n switch(imageSelectionMethod) {\n case 'default':\n return {\n name: selectionNames[imageSelect],\n url: selectionURLs[imageSelect],\n };\n case 'file':\n return {\n name: imageSelect ? imageSelect.name : selectionNames[0],\n url: imageSelect ? await Files.url(imageSelect) : selectionURLs[0],\n };\n case 'url':\n return {\n name: \"`Custom URL`\",\n url: imageSelect,\n };\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3147,"value":"selectedSobelImg = {\n switch(sobelSelectionMethod) {\n case \"file\":\n return {\n name: sobelImageSelect ? sobelImageSelect.name : selectedImg.name,\n url: sobelImageSelect ? await Files.url(sobelImageSelect) : selectedImg.name,\n };\n case \"url\":\n default:\n return {\n name: sobelImageSelect ? sobelImageSelect.name : selectedImg.name,\n url: sobelImageSelect || selectedImg.url,\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3149,"value":"sobelImageElement = await new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.onerror = reject;\n image.onload = () => {\n resolve(image);\n };\n image.src = selectedSobelImg.url;\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2694,"value":"imageData = {\n const context = DOM.context2d(width, height);\n context.drawImage(imageElement, 0, 0, width, height);\n const imageData = context.getImageData(0, 0, width, height);\n // Reset all stippling contexts to the input image as a placeholder\n originalDotsContext.putImageData(imageData, 0, 0);\n blackDotsContext.putImageData(imageData, 0, 0);\n whiteDotsContext.putImageData(imageData, 0, 0);\n blendedDotsContext.putImageData(imageData, 0, 0);\n darkHybridDotsContext.putImageData(imageData, 0, 0);\n lightHybridDotsContext.putImageData(imageData, 0, 0);\n blendedSobelDotsContext.putImageData(imageData, 0, 0);\n return imageData\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3190,"value":"sobelImageData = {\n const context = DOM.context2d(width, height);\n context.drawImage(sobelImageElement, 0, 0, width, height);\n const sobelImageData = context.getImageData(0, 0, width, height);\n sobelDotsContext.putImageData(sobelImageData, 0, 0);\n return sobelImageData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2699,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2707,"value":"imageGray = {\n const {rgb, min, max} = imageLinear(imageData.data);\n const light = new Float32Array(width * height);\n const dark = new Float32Array(width * height);\n\n // Convert to normalized light and dark values\n if ((max - min)){\n const rgbNorm = 1 / (max - min);\n for (let i = 0; i < width * height;i++) {\n let idx = i+i+i;\n const RGB = rgb[idx] + rgb[idx + 1] + rgb[idx + 2];\n\n // We clip and normalize the result to a value between 0 and 1:\n // We *skip* taking the square root, because we more often need to\n // approximate linear color space than the regular color space.\n light[i] = (RGB - min) * rgbNorm;\n dark[i] = (max - RGB) * rgbNorm;\n }\n }\n return {\n light,\n dark\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2688,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = Math.round(width * imageElement.height / imageElement.width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"// The number of dots\nn = totalDots","pinned":false,"hidden":false,"mode":"ojs"},{"id":1750,"value":"originalDotsContext = DOM.context2d(width, height, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1755,"value":"blackDotsContext = DOM.context2d(width, height, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1757,"value":"whiteDotsContext = DOM.context2d(width, height, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1762,"value":"blendedDotsContext = DOM.context2d(width, height, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1765,"value":"sobelDotsContext = DOM.context2d(width, height, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1773,"value":"darkHybridDotsContext = DOM.context2d(width, height, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1780,"value":"lightHybridDotsContext = DOM.context2d(width, height, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1790,"value":"blendedSobelDotsContext = DOM.context2d(width, height, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2846,"value":"mutable originalDotsRenders = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":2807,"value":"galleryDotsContext = DOM.context2d(width, height)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1799,"value":"originalDotsWorker = {\n if (renderOriginal){\n const context = originalDotsContext\n const worker = new Worker(originalScript);\n mutable originalDotsRenders = 0;\n function messaged({data: points}) {\n context.fillStyle = \"#FFF\";\n context.fillRect(0, 0, width, height);\n context.beginPath();\n for (let i = 0, n = points.length; i < n; i += 2) {\n const x = points[i]\n const y = points[i + 1];\n context.moveTo(x + 1.5, y);\n context.arc(x, y, 1.5, 0, 2 * Math.PI);\n }\n context.fillStyle = \"#000\";\n context.fill();\n mutable originalDotsRenders += 1;\n }\n\n invalidation.then(() => worker.terminate());\n worker.addEventListener(\"message\", messaged);\n worker.postMessage({data: imageGray.dark, width, height, n, iterations});\n yield worker;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1802,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2840,"value":"mutable blackDotsRenders = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1807,"value":"blackdotsWorker = {\n if (renderBlack) {\n const context = blackDotsContext;\n const worker = new Worker(blackdotsScript);\n mutable blackDotsRenders = 0;\n function messaged({data: {points, weights}}) {\n context.strokeWeight = 0;\n context.fillStyle = \"#FFF\";\n context.fillRect(0, 0, width, height);\n context.fillStyle = \"#000\";\n context.beginPath();\n for (let i = 0, n = points.length; i < n; i += 2) {\n let w = weights[i>>1];\n if (w > 0.5){\n w = Math.sqrt(w)*0.5 + 0.5;\n const x = points[i];\n const y = points[i + 1];\n context.moveTo(x, y);\n context.arc(x, y, w, 0, 2 * Math.PI);\n }\n }\n context.fill();\n mutable blackDotsRenders += 1;\n }\n\n invalidation.then(() => worker.terminate());\n worker.addEventListener(\"message\", messaged);\n worker.postMessage({data: imageGray.dark, width, height, n, iterations});\n yield worker;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1810,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2837,"value":"mutable whiteDotsRenders = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1815,"value":"whiteDotsWorker = {\n if (renderWhite){\n const context = whiteDotsContext;\n const worker = new Worker(whitedotsScript);\n mutable whiteDotsRenders = 0;\n function messaged({data: {points, weights}}) {\n context.fillStyle = \"#000\";\n context.fillRect(0, 0, width, height);\n context.fillStyle = \"#FFF\";\n context.beginPath();\n for (let i = 0, n = points.length; i < n; i += 2) {\n let w = weights[i>>1];\n if (w > 0.5){\n w = Math.sqrt(w/3);\n const x = points[i];\n const y = points[i + 1];\n context.moveTo(x + w, y + w);\n context.arc(x, y, w, 0, 2 * Math.PI);\n }\n }\n context.fill();\n mutable whiteDotsRenders += 1;\n }\n\n invalidation.then(() => worker.terminate());\n worker.addEventListener(\"message\", messaged);\n worker.postMessage({data: imageGray.light, width, height, n, iterations});\n yield worker;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1818,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1828,"value":"blendedDots = {\n // update if either of these two updates\n blackDotsRenders;\n whiteDotsRenders;\n \n const context = blendedDotsContext\n context.drawImage(blackDotsCanvas, 0, 0);\n context.globalAlpha = blendRatio;\n context.drawImage(whiteDotsCanvas, 0, 0);\n context.globalAlpha = 1.0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2829,"value":"mutable sobelDotsRenders = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1833,"value":"sobelDotsWorker = {\n if (renderSobel){\n const context = sobelDotsContext;\n const worker = new Worker(sobeldotsScript);\n mutable sobelDotsRenders = 0;\n function messaged({data: {points, weights}}) {\n context.fillStyle = \"#000\";\n context.fillRect(0, 0, width, height);\n context.fillStyle = \"#FFF\";\n context.beginPath();\n for (let i = 0, n = points.length; i < n; i += 2) {\n const w = Math.max(0.5, Math.sqrt(weights[i>>1])*0.5);\n if (w > 0.25) {\n const x = points[i];\n const y = points[i + 1];\n context.moveTo(x + w, y + w);\n context.arc(x, y, w, 0, 2 * Math.PI);\n }\n }\n context.fill();\n mutable sobelDotsRenders += 1;\n }\n\n invalidation.then(() => worker.terminate());\n worker.addEventListener(\"message\", messaged);\n worker.postMessage({data: imageGray.dark, sobelData: imageSobel.sobel, width, height, n, iterations});\n yield worker;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":2825,"value":"mutable darkHybridDotsRenders = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1842,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1845,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":2822,"value":"mutable lightHybridDotsRenders = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1850,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1852,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":1870,"value":"blendedSobelDots = {\n // redraw if either of these change\n darkHybridDotsRenders;\n lightHybridDotsRenders; \n const context = blendedSobelDotsContext\n context.drawImage(darkHybridDotsCanvas, 0, 0);\n context.globalAlpha = blendSobelRatio;\n context.drawImage(lightHybridDotsCanvas, 0, 0);\n context.globalAlpha = 1.0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2810,"value":"galleryDots = {\n // rerender if any of these change\n originalDotsRenders;\n blackDotsRenders;\n whiteDotsRenders;\n blendRatio;\n sobelDotsRenders;\n darkHybridDotsRenders;\n lightHybridDotsRenders;\n blendSobelRatio;\n \n const context = galleryDotsContext;\n let canvas = originalDotsCanvas;\n switch (rendersGallery){\n case 'black':\n canvas = blackDotsCanvas;\n break;\n case 'white':\n canvas = whiteDotsCanvas;\n break;\n case 'blend':\n canvas = blendedDotsCanvas;\n break;\n case 'sobel':\n canvas = sobelDotsCanvas;\n break;\n case 'sobel black':\n canvas = darkHybridDotsCanvas;\n break;\n case 'sobel white':\n canvas = lightHybridDotsCanvas;\n break;\n case 'sobel blend':\n canvas = blendedSobelDotsCanvas;\n default:\n }\n context.drawImage(canvas, 0, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3098,"value":"import {stackBlurImage, stackBlurRGBA, stackBlurRGB} from \"@jobleonard/mario-klingemans-stackblur\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3104,"value":"// mul24 is a multiplication table with constants such that for a given\n// radius r, after multiplying the sum we fill the full 32 bits as much\n// as possible. That is to say: if our sum only contains white pixels, or\n// 0xFF, then the output will be 0xFFFFFFFF. Then we shift by a constant 24\n// bits to the right to scale back to the range [0, 0xFF].\nmul24 = { \n const mul24 = new Uint32Array(256);\n for(let i = 0; i < 256; i++){\n const r = i+1;\n mul24[i] = 0xFFFFFFFF / (0xFF*r*r);\n }\n return mul24;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3249,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W42","stdlib":"1","titling":"auto"}