25:["$","title",null,{"children":"Voronoi + smoothing | Степан Гребнев | Observable"}] 49:T486,voronoiImage = function (w, h, cells, getPixel, strokeColor = null) { let ctx = DOM.context2d(w, h, 1); line.context(ctx); const curve = d3.curveCatmullRom(ctx); for (let [center, poly] of cells) { let points = []; let small_points = []; if (!poly) continue; let [cx, cy] = center; let { r, g, b, a } = getPixel(~~cx, ~~cy); ctx.fillStyle = ctx.strokeStyle = `rgba(${r},${g},${b},${a})`; // if (Math.random() < 0.9) { const centroid = d3.polygonCentroid(poly); let caryon = contractDistance(poly, centroid, Math.random() * 4 + 3); let [x1, y1] = caryon[0]; ctx.moveTo(x1, y1); ctx.beginPath(); for (let [x, y] of caryon) { small_points.push([x, y]); line(resample(cleanPoints(small_points))); // ctx.lineTo(x, y); } ctx.fill(); // } let [x, y] = poly[0]; ctx.moveTo(x, y); for (let [x, y] of poly) { points.push([x, y]); ctx.beginPath(); line(resample(cleanPoints(points))); // ctx.lineTo(x, y); } // if (strokeColor) ctx.strokeStyle = strokeColor; ctx.stroke(); } return ctx.canvas; }4a:T51f,voronoiImageGL = function (w, h, cells, getPixel = null) { let canvas = DOM.canvas(w,h); let gl = canvas.getContext("webgl", { antialias: getPixel != null, preserveDrawingBuffer: true }); let regl = createRegl(gl); let posBuffer = [], colorBuffer = []; let i = 0; for (let [center, poly] of cells) { if (!poly) continue; let [cx, cy] = center; let { r, g, b } = getPixel ? getPixel(~~cx, ~~cy) : { r: i % 256, g: ~~(i / 256), b: 255 }; let [v0, v1] = [poly[0], poly[1]]; for (let v2 of poly.slice(2)) { for (let [x, y] of [v0, v1, v2]) { posBuffer.push((x / w) * 2 - 1, 1 - (y / h) * 2); colorBuffer.push(r / 255, g / 255, b / 255); } v1 = v2; } i++; } let draw = regl({ frag: ` precision mediump float; varying vec3 vcolor; void main () { gl_FragColor = vec4(vcolor,1.0); }`, vert: ` attribute vec2 position; attribute vec3 color; varying vec3 vcolor; void main () { gl_Position = vec4(position, 0, 1); vcolor = color; }`, attributes: { position: posBuffer, color: colorBuffer }, count: posBuffer.length / 2 }); regl.clear({ color: [0, 0, 0, 1] }); draw(); return canvas; }4b:T81a,optimizeCenters = function (points,imgdata,steps = 1) { let data = imgdata.data; let [w,h] = [imgdata.width,imgdata.height] //let points = voronoiCenters(w,h,cellSize,jitter) for (let step = 0; step < steps; step++) { let cells = voronoiCells(w,h,points) let vimage = voronoiImageGL(w,h,cells); let vdata = imageData(vimage).data; function index(x,y) { return (y*w+x)*4; } function center(x,y) { let i = index(x,y); return vdata[i]+vdata[i+1]*256; } function getPixel(x,y) { let i = index(~~x,~~y); return [data[i],data[i+1],data[i+1]] } function pixelError (rgb1,rgb2) { return (rgb1[0]-rgb2[0])**2+(rgb1[1]-rgb2[1])**2+(rgb1[2]-rgb2[2])**2 } let error = points.map (p => ({ rgb : getPixel(p[0],p[1]), dir : [0,0,0,0,0,0,0,0] })); let totalError = 0; let dir = [[1,0],[-1,0],[1,1],[-1,-1],[0,1],[0,-1],[1,-1],[-1,1]]; for (let x = 1; x+1 < w; x++) { for (let y = 1; y+1 < h; y++) { let c = center(x,y); let rgb = getPixel(x,y); let curError = pixelError (error[c].rgb, rgb); totalError += curError; let count = 0; for (let idir = 0; idir < 8; idir++) { let [dx,dy] = dir [idir]; let neighbor = center(x+dx,y+dy); let opposite = center(x-dx,y-dy); if (neighbor == opposite) continue; let dError = pixelError(error[opposite].rgb,rgb)-curError error[neighbor].dir[idir] += dError error[opposite].dir[idir] += dError } } } for (let i = 0; i < points.length; i++) { let bestdir = -1; let besterror = 0; let errdir = error[i].dir; for (let j = 0; j < 8; j++) { if (errdir [j] < besterror) { bestdir = j; besterror = errdir[j] } } if (bestdir >= 0) { points [i][0] = Math.min(w-1, Math.max(0, points [i][0] + dir[bestdir][0])); points [i][1] = Math.min(h-1, Math.max(0, points [i][1] + dir[bestdir][1])); } } } return points; } 4c:[{"id":"0152512a0f757277561c6592a912b63f9d6ee1a916e34218db57f3192245534ea37c1cf138fe05d2a3add9380c262c15df5692e62b04b2e431bad2888e88b6a0","href":"https://static.observableusercontent.com/files/0152512a0f757277561c6592a912b63f9d6ee1a916e34218db57f3192245534ea37c1cf138fe05d2a3add9380c262c15df5692e62b04b2e431bad2888e88b6a0","name":"leaf-panorama-small2.png","type":"image/png","lastModified":1690242185035.864,"size":3602194},{"id":"19a5690e9198743753b96a3e0048e4e02c88cf3a8534510c2ef1271181e9d5fee37364f6fd9ab1b145155b0f71bc9406c1ae3db07b1503ae8438fb67a5223358","href":"https://static.observableusercontent.com/files/19a5690e9198743753b96a3e0048e4e02c88cf3a8534510c2ef1271181e9d5fee37364f6fd9ab1b145155b0f71bc9406c1ae3db07b1503ae8438fb67a5223358","name":"leaf-section3.png","type":"image/png","lastModified":1690242185035.864,"size":970735},{"id":"6633e156444dfe4259cd14c51c40795ff04cdc68784898ef8b716cc916f0247a5d80b5a714585bbd4a3f9c0224a4b6ba41f60126da41d1de67621bf8449c171a","href":"https://static.observableusercontent.com/files/6633e156444dfe4259cd14c51c40795ff04cdc68784898ef8b716cc916f0247a5d80b5a714585bbd4a3f9c0224a4b6ba41f60126da41d1de67621bf8449c171a","name":"640x480.jpg","type":"image/jpeg","lastModified":1690242185035.864,"size":55952},{"id":"470ebdb89e1749e3c9c42f9ef8d3d511afe5d7b7b4911511604658f26de6ccee465710ac139859b58c4423a54e12cc1d30ada5420b78f5d627b48464c0e0fbd7","href":"https://static.observableusercontent.com/files/470ebdb89e1749e3c9c42f9ef8d3d511afe5d7b7b4911511604658f26de6ccee465710ac139859b58c4423a54e12cc1d30ada5420b78f5d627b48464c0e0fbd7","name":"800x600.jpg","type":"image/jpeg","lastModified":1690242185035.864,"size":96454},{"id":"8ad5a29da08e5bc04af9f145fa0dfc0d73dab2b8c5339104736722fbd0f6cefcf93f07d080da84797c6102cba969a39142ee1442fbeb0f87810ef04d13a384a1","href":"https://static.observableusercontent.com/files/8ad5a29da08e5bc04af9f145fa0dfc0d73dab2b8c5339104736722fbd0f6cefcf93f07d080da84797c6102cba969a39142ee1442fbeb0f87810ef04d13a384a1","name":"1024x768.jpg","type":"image/jpeg","lastModified":1690242185035.864,"size":105702}] 29:{"id":"6ffacf9f7f624094","slug":null,"title":"Voronoi + smoothing","thumbnail":"2991e4303ac4f56aa4adf9d734d6d915e4aeec623d8382494385e549583f85e7","access_level":"public","create_time":"$D2023-07-24T23:43:05.035Z","update_time":"$D2023-07-24T23:43:05.035Z","view_time":null,"first_public_time":"$D2023-07-24T23:43:05.035Z","has_unpublished_edits":null,"fork":{"id":"1b5888d13fc470fe","slug":null,"title":"Voronoi + smoothing","owner":{"id":"b34c988451399e98","login":"wenrazhao2","name":"KarlieDoesNotExist"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a77e3d98d736999b","login":"76ca7f05a63c88cb","name":"Степан Гребнев","avatar_url":"https://avatars-next.observableusercontent.com/d182fd2954f237a9992945306347e2ceb86da632484e40adc07e0d5099572e7a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":801,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"76ca7f05a63c88cb","login":"76ca7f05a63c88cb","name":"Степан Гребнев","avatar_url":"https://avatars-next.observableusercontent.com/d182fd2954f237a9992945306347e2ceb86da632484e40adc07e0d5099572e7a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"76ca7f05a63c88cb","login":"76ca7f05a63c88cb","name":"Степан Гребнев","avatar_url":"https://avatars-next.observableusercontent.com/d182fd2954f237a9992945306347e2ceb86da632484e40adc07e0d5099572e7a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Voronoi + smoothing","cells":[{"id":0,"value":"md`# Voronoi + smoothing\n\nA sample implementation of the paper [A Method for Creating Mosaic Images Using Voronoi Diagrams](https://diglib.eg.org/handle/10.2312/egs20021036?show=full) by Yoshinori Dobashi and Toshiyuki Haga, Henry Johan, and Tomoyuki Nishita (Eurographics Short Presentations, 2002, DOI: \n10.2312/egs.20021036). \n\nThe idea is to start with a semi-regular Voronoi diagram, where each cell is painted with the color of the pixel at the site center. In the GUI below, jitter controls the amount of noise initially added to the site centers, whereas cellSize is the average diameter of each cell. After this, all cell centers are moved one pixel at a time in the direction that minimizes color error. This is repeated a number of times (parameter steps below). \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"Smoothing algorithm from [Kemper Smith](https://observablehq.com/@kemper/voronoi-polygon-smoothing).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"viewof imageConfig = combo({\n imgSize: select({\n title: \"Image size\",\n options: [\"640x480\", \"800x600\", \"2000 × 1128\"]\n }),\n subject: text({ title: \"Subject\", value: \"butterfly\" }),\n reload: button({ value: \"Pick new image\" })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"image = {\n let { imgSize, subject } = imageConfig;\n let [w, h] = imgSize.split(\"x\").map((x) => +x);\n let img;\n try {\n img = await FileAttachment(\"leaf-panorama-small2.png\").image();\n //await loadImage(await randomImage(w, h, subject));\n } catch (error) {\n img = defaultImage[imgSize];\n }\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"voronoiCenters = function (w, h, cellSize, jitter) {\n let dx = cellSize,\n dy = cellSize / Math.sqrt(3);\n let nx = Math.ceil(w / dx),\n ny = Math.ceil(h / dy);\n let points = [];\n let flag = false;\n for (let y = cellSize; y < h - cellSize; y += dy) {\n let x0 = flag ? cellSize : dx;\n flag = !flag;\n for (let x = x0; x < w - cellSize; x += dx) {\n points.push([\n x + Math.random() * jitter - jitter / 2,\n y + Math.random() * jitter - jitter / 2\n ]);\n }\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"voronoiCells = function (w,h,points) {\n let delaunay = d3.Delaunay.from(points)\n let voronoi = delaunay.voronoi([-1, -1, w + 1, h + 1])\n return points.map((d, i) => [d, voronoi.cellPolygon(i)]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"line = d3.line().curve(d3.curveBasisClosed)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"function displacement(a, b) {\n return [b[0] - a[0], b[1] - a[1]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"function distance(a, b) {\n if (b === undefined) {\n return Math.abs(Math.sqrt(a[0]**2 + a[1]**2));\n } else {\n return distance(displacement(a, b))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"viewof mosaicConfig = combo({\n cellSize: number({ title: \"Cell size\", value: 14, min: 4, max: 40, step: 1 }),\n jitter: number({\n title: \"Jitter amount\",\n value: 4,\n min: 0,\n max: 20,\n step: 1\n }),\n steps: number({\n title: \"Optimization steps\",\n value: 10,\n min: 1,\n max: 100,\n step: 1\n }),\n stroke: checkbox({ title: \"Cell outlines?\", options: [\"Yes\"], value: \"Yes\" }),\n strokeColor: color({ title: \"Outline color\", value: \"#000\" })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"mosaic = {\n let { cellSize, margin, jitter, steps, stroke, strokeColor } = mosaicConfig;\n\n let imgdata = imageData(image);\n let [w, h] = [image.width, image.height];\n let ctx = DOM.context2d(w, h, 1);\n\n let data = imgdata.data;\n\n function getPixel(x, y) {\n let i = (y * w + x) * 4;\n return { r: data[i], g: data[i + 1], b: data[i + 2], a: data[i + 3] };\n }\n\n let points = voronoiCenters(w, h, cellSize, jitter);\n for (let i = 0; i < steps; i++) {\n points = optimizeCenters(points, imgdata, 1);\n let cells = voronoiCells(w, h, points);\n yield voronoiImage(w, h, cells, getPixel, stroke ? strokeColor : null);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"viewof isCornerRadiusAbsolute = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"viewof cleanCornerRadius = makeSliderWithValue(\n \"cleanCornerRadius\",\n 0,\n 30,\n 1,\n 5,\n \"pixels\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"viewof cornerRadius = isCornerRadiusAbsolute\n ? makeSliderWithValue(\"cornerRadius\", 0, 100, 1, 10, \"pixels\")\n : makeSliderWithValue(\"cornerRadius\", 0, 0.5, 0.01, 0.4, \"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"// Cleaning polygon vertices using js-clipper requires converting points in {X:0,Y:0} format\nfunction cleanPoints(points) {\n return cleanPoly(\n points.map((d) => {\n return { X: d[0], Y: d[1] };\n })\n ).map((d) => [d.X, d.Y]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"function cleanPoly(path) {\n let cleanedPath = clipper.JS.Clean(path, cleanCornerRadius);\n if (cleanedPath.length > 0) return cleanedPath;\n else return path;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"function resample(points) {\n let i = -1;\n let n = points.length;\n let p0 = points[n - 1];\n let x0 = p0[0];\n let y0 = p0[1];\n let p1, x1, y1;\n let points2 = [];\n\n while (++i < n) {\n p1 = points[i];\n x1 = p1[0];\n y1 = p1[1];\n\n let finalRadius = 0;\n\n if (isCornerRadiusAbsolute) {\n let distance = Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2);\n let distFromPoint = cornerRadius / distance;\n finalRadius = distFromPoint >= 0.5 ? 0.5 : distFromPoint;\n } else {\n finalRadius = cornerRadius;\n }\n\n points2.push(\n [x0 + (x1 - x0) * finalRadius, y0 + (y1 - y0) * finalRadius],\n [x0 + (x1 - x0) * (1 - finalRadius), y0 + (y1 - y0) * (1 - finalRadius)],\n p1\n );\n\n p0 = p1;\n x0 = x1;\n y0 = y1;\n }\n return points2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"function contractDistance(points, centroid, d) {\n // Move each point in a set of points a distance d closer to the centroid.\n const vec = (p) => displacement(p, centroid);\n const dist = (p) => distance(p, centroid);\n const unitVecToCentroid = (p) => {\n const v = vec(p);\n const d = dist(p);\n return [v[0] / d, v[1] / d];\n };\n // Return the point moved towards the centroid, without going past it.\n return points.map((p) =>\n distance(vec(p)) < d\n ? centroid\n : [p[0] + d * unitVecToCentroid(p)[0], p[1] + d * unitVecToCentroid(p)[1]]\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"async function randomImage(\n sizeOrWidth = null,\n height = sizeOrWidth,\n term = \"flower\"\n) {\n const size = sizeOrWidth ? `/${+sizeOrWidth}x${+height}` : \"\";\n return await FileAttachment(\"leaf-section3.png\");\n // })\n // await fetch(`https://source.unsplash.com/${+sizeOrWidth}x${+height}/?${term}`, {\n // method: 'head',\n // cache: 'no-store',\n // })).url;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"defaultImage = ({\n \"640x480\": await FileAttachment(\"640x480.jpg\").image(),\n \"800x600\": await FileAttachment(\"800x600.jpg\").image(),\n \"1024x768\": await FileAttachment(\"1024x768.jpg\").image()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"loadImage = {\n return function loadImage(src) {\n const img = DOM.element('img', {crossorigin: 'anonymous', src});\n return img.decode().then(() => img);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"function imageData (image) {\n let [w,h] = [image.width, image.height];\n let ctx = DOM.context2d(w,h,1)\n ctx.imageSmoothingEnabled = false;\n ctx.drawImage(image,0,0)\n return ctx.getImageData (0,0,w,h)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"createRegl = require('regl@1.4.2/dist/regl.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"import {select,number,radio,text,checkbox,button,color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"import {combo} from \"@esperanc/aggregated-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"import { makeSliderWithValue } from \"@kemper/code-snippets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"import { viewof polygonDrawing as resamplingDemo } from \"@kemper/polygon-smoothing-test\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"clipper = require(\"https://bundle.run/js-clipper@1.0.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null