2d:null 2e:["$","title",null,{"children":"Voronoi Stippling | John Boiles | Observable"}] 33:Te86,imageEditor = { const blackTheme = { 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png', 'common.bisize.width': '251px', 'common.bisize.height': '21px', 'common.backgroundImage': 'none', 'common.backgroundColor': '#1e1e1e', 'common.border': '0px', // header 'header.backgroundImage': 'none', 'header.backgroundColor': 'transparent', 'header.border': '0px', // load button 'loadButton.backgroundColor': '#fff', 'loadButton.border': '1px solid #ddd', 'loadButton.color': '#222', 'loadButton.fontFamily': '\'Noto Sans\', sans-serif', 'loadButton.fontSize': '12px', // download button 'downloadButton.backgroundColor': '#fdba3b', 'downloadButton.border': '1px solid #fdba3b', 'downloadButton.color': '#fff', 'downloadButton.fontFamily': '\'Noto Sans\', sans-serif', 'downloadButton.fontSize': '12px', // main icons 'menu.normalIcon.path': 'https://raw.githubusercontent.com/nhn/tui.image-editor/production/dist/svg/icon-d.svg', 'menu.normalIcon.name': 'icon-d', 'menu.activeIcon.path': 'https://raw.githubusercontent.com/nhn/tui.image-editor/production/dist/svg/icon-b.svg', 'menu.activeIcon.name': 'icon-b', 'menu.disabledIcon.path': 'https://raw.githubusercontent.com/nhn/tui.image-editor/production/dist/svg/icon-a.svg', 'menu.disabledIcon.name': 'icon-a', 'menu.hoverIcon.path': 'https://raw.githubusercontent.com/nhn/tui.image-editor/production/dist/svg/icon-c.svg', 'menu.hoverIcon.name': 'icon-c', 'menu.iconSize.width': '24px', 'menu.iconSize.height': '24px', // submenu primary color 'submenu.backgroundColor': '#1e1e1e', 'submenu.partition.color': '#3c3c3c', // submenu icons 'submenu.normalIcon.path': 'https://raw.githubusercontent.com/nhn/tui.image-editor/production/dist/svg/icon-d.svg', 'submenu.normalIcon.name': 'icon-d', 'submenu.activeIcon.path': 'https://raw.githubusercontent.com/nhn/tui.image-editor/production/dist/svg/icon-c.svg', 'submenu.activeIcon.name': 'icon-c', 'submenu.iconSize.width': '32px', 'submenu.iconSize.height': '32px', // submenu labels 'submenu.normalLabel.color': '#8a8a8a', 'submenu.normalLabel.fontWeight': 'lighter', 'submenu.activeLabel.color': '#fff', 'submenu.activeLabel.fontWeight': 'lighter', // checkbox style 'checkbox.border': '0px', 'checkbox.backgroundColor': '#fff', // range style 'range.pointer.color': '#fff', 'range.bar.color': '#666', 'range.subbar.color': '#d1d1d1', 'range.disabledPointer.color': '#414141', 'range.disabledBar.color': '#282828', 'range.disabledSubbar.color': '#414141', 'range.value.color': '#fff', 'range.value.fontWeight': 'lighter', 'range.value.fontSize': '11px', 'range.value.border': '1px solid #353535', 'range.value.backgroundColor': '#151515', 'range.title.color': '#fff', 'range.title.fontWeight': 'lighter', // colorpicker style 'colorpicker.button.border': '1px solid #1e1e1e', 'colorpicker.title.color': '#fff' }; return new tui(document.querySelector('#tui-image-editor'), { includeUI: { loadImage: { path: await file.url(), name: file.name, }, // locale: locale_ru_RU, theme: blackTheme, // or whiteTheme // initMenu: 'filter', menuBarPosition: 'bottom', menu: ['crop', 'flip', 'rotate', 'filter'], uiSize: { height: '700px' }, }, // cssMaxWidth: 500, // cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70 } }); }34:T7b6,workerScript = { const blob = new Blob([` importScripts("${await require.resolve("d3-delaunay@^5.1.1")}"); onmessage = event => { const {data: {imageData, width, height, numberOfCells, numberOfIterations}} = event; const points = new Float64Array(numberOfCells * 2); const c = new Float64Array(numberOfCells * 2); const s = new Float64Array(numberOfCells); // Initialize the points using rejection sampling. for (let i = 0; i < numberOfCells; ++i) { for (let j = 0; j < 30; ++j) { const x = points[i * 2] = Math.floor(Math.random() * width); const y = points[i * 2 + 1] = Math.floor(Math.random() * height); if (Math.random() < imageData[y * width + x]) break; } } const delaunay = new d3.Delaunay(points); const voronoi = delaunay.voronoi([0, 0, width, height]); for (let k = 0; k < numberOfIterations; ++k) { // Compute the weighted centroid for each Voronoi cell. c.fill(0); s.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const w = imageData[y * width + x]; i = delaunay.find(x + 0.5, y + 0.5, i); s[i] += w; c[i * 2] += w * (x + 0.5); c[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 w = Math.pow(k + 1, -0.8) * 10; for (let i = 0; i < numberOfCells; ++i) { const x0 = points[i * 2], y0 = points[i * 2 + 1]; const x1 = s[i] ? c[i * 2] / s[i] : x0, y1 = s[i] ? c[i * 2 + 1] / s[i] : y0; points[i * 2] = x0 + (x1 - x0) * 1.8 + (Math.random() - 0.5) * w; points[i * 2 + 1] = y0 + (y1 - y0) * 1.8 + (Math.random() - 0.5) * w; } voronoi.update(); postMessage(points); } close(); }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }35:T4ea,{ mutable done = false; const height = imageData.height const svg = d3.select(DOM.svg(width, height)); const worker = new Worker(workerScript); const numberOfCells = Math.round(width * height / cellSize) let path; let iterations = 0; // Draw the outline svg.append("rect") .attr("fill", backgroundColor) .attr("stroke", lineColor) .attr("stroke-width", borderSize*2) .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); function messaged({data: points}) { const delaunay = new d3.Delaunay(points); mutable voronoi = delaunay.voronoi([borderSize, borderSize, width-borderSize, height-borderSize]); if (path) { path.remove(); } path = svg.append("path") .attr("fill", "none") .attr("stroke", lineColor) .attr("stroke-width", strokeWidth) .attr("d", mutable voronoi.render()); // Notify the inset path render when we're done iterations++; if (iterations >= numberOfIterations) { mutable done = true; } } invalidation.then(() => worker.terminate()); worker.addEventListener("message", messaged); worker.postMessage({imageData, width, height, numberOfCells, numberOfIterations}); return svg.node(); }36:T550,{ const height = imageData.height const svg = d3.select(DOM.svg(width, height)); let path; if (done) { let backgroundFill = "none"; let polygonFill = "none"; let polygonStroke = polygonStrokePicker; if (fillPolygons) { // In this case, the background is the color of the lines in the single-path version backgroundFill = lineColor; polygonFill = backgroundColor; polygonStroke = "none"; } path = svg.append("rect") .attr("fill", backgroundFill ) .attr("stroke", outlineStroke) .attr("stroke-width", 2) .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); const polygons = voronoi.cellPolygons(); let polygon = polygons.next(); while (!polygon.done) { let points = polygon.value // var newPoints = geometric.polygonScale(points, 0.8); // var newPoints = polygonScaleOffset(points, 2); var newPoints = polygonInsetStroke(points, polygonInset, fixArtifacts); const flat = newPoints.reduce((acc, cur) => { return acc.concat(cur); }, []); path = svg.append("path") .attr("fill", polygonFill) .attr("stroke", polygonStroke) .attr("stroke-width", 1) .attr("d", `M${flat.join(',')}`); polygon = polygons.next(); } } return svg.node(); }37:[{"id":"3b83d0ce24f1215c5d29aaa001bb8a3b23bfe5025cd573e075da3ec5baa23c1b3efc678b47af458ffccc0a8a02c0c9ede2f536cdc8f13be567d36d0aa115071f","href":"https://static.observableusercontent.com/files/3b83d0ce24f1215c5d29aaa001bb8a3b23bfe5025cd573e075da3ec5baa23c1b3efc678b47af458ffccc0a8a02c0c9ede2f536cdc8f13be567d36d0aa115071f","name":"IMG_0853@1.jpg","type":"image/jpeg","lastModified":1581227259175.666,"size":47274}] 31:{"id":"ee4fb33ea23f2363","slug":"voronoi-stippling","title":"Voronoi Stippling","thumbnail":"f2ee30e556eec8b8647eea070768f746725b32db705d1796ce6b14a39d732071","access_level":"public","create_time":"$D2020-02-09T05:47:47.101Z","update_time":"$D2020-02-14T01:28:25.131Z","view_time":null,"first_public_time":"$D2020-02-09T07:44:19.574Z","has_unpublished_edits":null,"fork":{"id":"3485825c256a1e6f","slug":"voronoi-stippling","title":"Voronoi Stippling","owner":{"id":"450c2de4bc1c9431","login":"iamjoetaylor","name":"Joe Taylor"}},"stars":2,"starred":false,"owner":{"type":"team","id":"38577e937a1cf9d2","login":"johnboiles","name":"John Boiles","avatar_url":"https://avatars-next.observableusercontent.com/5219c8798434a4e6a48cbd828f95274a6482d0a2cf45690520bf2a67fe7e5d64","tier":"starter_2024"},"version":1229,"publish_version":1229,"role":null,"authored":false,"authors":[{"type":"individual","id":"438e30968a321daa","login":"johnboiles","name":"John Boiles","avatar_url":"https://avatars-next.observableusercontent.com/5219c8798434a4e6a48cbd828f95274a6482d0a2cf45690520bf2a67fe7e5d64","tier":null}],"members":[{"type":"individual","id":"438e30968a321daa","login":"johnboiles","name":"John Boiles","avatar_url":"https://avatars-next.observableusercontent.com/5219c8798434a4e6a48cbd828f95274a6482d0a2cf45690520bf2a67fe7e5d64","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Voronoi Stippling","cells":[{"id":0,"value":"md`# Voronoi Stippling\n\nThis 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.\n\nThis 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](https://mfkasim91.github.io/2016/12/06/stippling-pictures-with-lloyds-algorithm/), [Egor Larionov](https://elrnv.com/blog/weighted-lloyds-method-for-voronoi-tesselation/) and [Noah Veltman](https://bl.ocks.org/veltman/017a2093623e1bf3ae041dd3380578cb).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"file = FileAttachment(\"IMG_0853@1.jpg\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"md`## Image setup and tweaking`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"tui = require(\"tui-image-editor\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"html`\n\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"viewof exportImage = button({value: \"Export image\", description: \"Export the image and run the Voronoi stippling.\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"image = {\n exportImage;\n const img = new Image()\n img.src = imageEditor.toDataURL();\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"imageData = {\n const height = Math.round(width * image.height / image.width);\n const context = DOM.context2d(width, height, 1);\n context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);\n const {data: rgba} = context.getImageData(0, 0, width, height);\n\n let c = (contrast/100) + 1; //convert to decimal & shift range: [0..2]\n var intercept = 128 * (1 - c);\n for(var i=0;i