2b:null 2c:["$","title",null,{"children":"Voronoi + smoothing | KarlieDoesNotExist | Observable"}] 31: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; }32: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; }33: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; } 34:[{"id":"159e46d516ed0843888571078ff07d990af55c2fafdf3c78dc228793827423f57ef221dba6bf9f6b3f53789772fdabb7bb7fbde7380218063b3d73c310088cb3","href":"https://static.observableusercontent.com/files/159e46d516ed0843888571078ff07d990af55c2fafdf3c78dc228793827423f57ef221dba6bf9f6b3f53789772fdabb7bb7fbde7380218063b3d73c310088cb3","name":"rose4-2.png","type":"image/png","lastModified":1671570401063.793,"size":4125173},{"id":"8ad5a29da08e5bc04af9f145fa0dfc0d73dab2b8c5339104736722fbd0f6cefcf93f07d080da84797c6102cba969a39142ee1442fbeb0f87810ef04d13a384a1","href":"https://static.observableusercontent.com/files/8ad5a29da08e5bc04af9f145fa0dfc0d73dab2b8c5339104736722fbd0f6cefcf93f07d080da84797c6102cba969a39142ee1442fbeb0f87810ef04d13a384a1","name":"1024x768.jpg","type":"image/jpeg","lastModified":1666905887219.5,"size":105702},{"id":"6633e156444dfe4259cd14c51c40795ff04cdc68784898ef8b716cc916f0247a5d80b5a714585bbd4a3f9c0224a4b6ba41f60126da41d1de67621bf8449c171a","href":"https://static.observableusercontent.com/files/6633e156444dfe4259cd14c51c40795ff04cdc68784898ef8b716cc916f0247a5d80b5a714585bbd4a3f9c0224a4b6ba41f60126da41d1de67621bf8449c171a","name":"640x480.jpg","type":"image/jpeg","lastModified":1666905887219.5,"size":55952},{"id":"470ebdb89e1749e3c9c42f9ef8d3d511afe5d7b7b4911511604658f26de6ccee465710ac139859b58c4423a54e12cc1d30ada5420b78f5d627b48464c0e0fbd7","href":"https://static.observableusercontent.com/files/470ebdb89e1749e3c9c42f9ef8d3d511afe5d7b7b4911511604658f26de6ccee465710ac139859b58c4423a54e12cc1d30ada5420b78f5d627b48464c0e0fbd7","name":"800x600.jpg","type":"image/jpeg","lastModified":1666905887219.5,"size":96454},{"id":"c697fbf5a7eddcad838ec4314f5f1fc7163561daad0022f6fa83a8781c2960a4baf51d735c4d56618863db18d7e3c38f8bef38accbe713cc7fb32c3bce7d0e4f","href":"https://static.observableusercontent.com/files/c697fbf5a7eddcad838ec4314f5f1fc7163561daad0022f6fa83a8781c2960a4baf51d735c4d56618863db18d7e3c38f8bef38accbe713cc7fb32c3bce7d0e4f","name":"l6.png","type":"image/png","lastModified":1672432815866.369,"size":2825003},{"id":"25585ba84f22cfeab589a226980ab4c12a1737d5471e2e7ef23c00a86b5091b8668fd78de1cb183cd5d9b4014cbab35133811f1be4fe384a60e2c29446aaf11c","href":"https://static.observableusercontent.com/files/25585ba84f22cfeab589a226980ab4c12a1737d5471e2e7ef23c00a86b5091b8668fd78de1cb183cd5d9b4014cbab35133811f1be4fe384a60e2c29446aaf11c","name":"l14.png","type":"image/png","lastModified":1672433862688.301,"size":725629},{"id":"beb76e88f76acf33c3a245f48e8a249887b15daa79bf43fb716d4c854fc206dc06136b24347af161f8e94ad2d23e4e989a79d6fd2d9d27604a4cca1ac2676e8f","href":"https://static.observableusercontent.com/files/beb76e88f76acf33c3a245f48e8a249887b15daa79bf43fb716d4c854fc206dc06136b24347af161f8e94ad2d23e4e989a79d6fd2d9d27604a4cca1ac2676e8f","name":"l1.png","type":"image/png","lastModified":1672433862904.41,"size":1315281},{"id":"9aae4c2d95d3b80268f763a3638a409eb09778ef285a1a50c709ce1196277b40282dbc3252e33b2285b06ebf511da5c1ba88bf9ccf89f6c33e97153e2f0da0e9","href":"https://static.observableusercontent.com/files/9aae4c2d95d3b80268f763a3638a409eb09778ef285a1a50c709ce1196277b40282dbc3252e33b2285b06ebf511da5c1ba88bf9ccf89f6c33e97153e2f0da0e9","name":"l2.png","type":"image/png","lastModified":1672433863053.777,"size":1954217},{"id":"2b8a1d4cbd4c4f18113abcc6d7627c6c11c7dd8400bbf778d809bba506f229baef87132fc96807b84dded816bf0989e78809c637d641c7c3b330cfe60662ef4c","href":"https://static.observableusercontent.com/files/2b8a1d4cbd4c4f18113abcc6d7627c6c11c7dd8400bbf778d809bba506f229baef87132fc96807b84dded816bf0989e78809c637d641c7c3b330cfe60662ef4c","name":"l5.png","type":"image/png","lastModified":1672433863061.233,"size":2255608},{"id":"a904e119df7de184287b3e825080dd5138a96fe872d2c52777083a465e2997f2d872e9d30da9488916a82f50ee3ebbc96aa890ce497cbddf36c1e0080878a7af","href":"https://static.observableusercontent.com/files/a904e119df7de184287b3e825080dd5138a96fe872d2c52777083a465e2997f2d872e9d30da9488916a82f50ee3ebbc96aa890ce497cbddf36c1e0080878a7af","name":"l7.png","type":"image/png","lastModified":1672433863231.363,"size":2885883},{"id":"bb6c1b47564580630d6238f493b81a8ac7f32c1b4dd13a21e25ff7ec0623c93ee7160c18a1efee9dc6a3c8d650789afc53d78c64ab6facfd1a621c6544eb679f","href":"https://static.observableusercontent.com/files/bb6c1b47564580630d6238f493b81a8ac7f32c1b4dd13a21e25ff7ec0623c93ee7160c18a1efee9dc6a3c8d650789afc53d78c64ab6facfd1a621c6544eb679f","name":"leaf-panorama-small@1.jpg","type":"image/jpeg","lastModified":1675104909979.927,"size":2113097},{"id":"0152512a0f757277561c6592a912b63f9d6ee1a916e34218db57f3192245534ea37c1cf138fe05d2a3add9380c262c15df5692e62b04b2e431bad2888e88b6a0","href":"https://static.observableusercontent.com/files/0152512a0f757277561c6592a912b63f9d6ee1a916e34218db57f3192245534ea37c1cf138fe05d2a3add9380c262c15df5692e62b04b2e431bad2888e88b6a0","name":"leaf-panorama-small2.png","type":"image/png","lastModified":1675107449882.956,"size":3602194},{"id":"b554acc0fe2aef9e7fd5684a508a6e848e1222777afcec1720405e222f44e7d3dfff4bcb7811ea9d341aaa34e5158c917c6fc20161473584be368b7908a8d5ae","href":"https://static.observableusercontent.com/files/b554acc0fe2aef9e7fd5684a508a6e848e1222777afcec1720405e222f44e7d3dfff4bcb7811ea9d341aaa34e5158c917c6fc20161473584be368b7908a8d5ae","name":"leaf-panorama-small.png","type":"image/png","lastModified":1675107449884.343,"size":3512138},{"id":"f56694d4ff86832b5e499a17dbd64850c862c874edccce8c028bb844c7dc32bdb0a8730076b091ac439403b11ff67f09970dc17ff2afe4f613f56b71305706ec","href":"https://static.observableusercontent.com/files/f56694d4ff86832b5e499a17dbd64850c862c874edccce8c028bb844c7dc32bdb0a8730076b091ac439403b11ff67f09970dc17ff2afe4f613f56b71305706ec","name":"leaf-panorama-small@2.jpg","type":"image/jpeg","lastModified":1675105710256.164,"size":2257433},{"id":"6030becb20745ea22915ef16f5f44cb4a0a206e8bca698a826d036339399d69b16ba93a63b3304df3d068c58a861326494e7bf9fe5aa4ef5345e2fd902d42d35","href":"https://static.observableusercontent.com/files/6030becb20745ea22915ef16f5f44cb4a0a206e8bca698a826d036339399d69b16ba93a63b3304df3d068c58a861326494e7bf9fe5aa4ef5345e2fd902d42d35","name":"leaf-panorama-small@3.jpg","type":"image/jpeg","lastModified":1675105773645.599,"size":1745736},{"id":"841f15a7c23614bdacae793dc97fc28c8529d6bb4b6684b7d828622de788b390af6cfdf9f20831c43b7ba78d9b64736ca76310a5c0be5414d2ff889c808715ed","href":"https://static.observableusercontent.com/files/841f15a7c23614bdacae793dc97fc28c8529d6bb4b6684b7d828622de788b390af6cfdf9f20831c43b7ba78d9b64736ca76310a5c0be5414d2ff889c808715ed","name":"leaf-panorama-small.jpg","type":"image/jpeg","lastModified":1675104689141.42,"size":3003818},{"id":"ca7592c8e6230236bf8bb8dc1f54c288902d260f07b8b4e9b863f3e8b6d7aa2a54f13a1614fad4b4e96f6dbad940fd3fe7b7f87df5a7c6ec82f5239471b85e37","href":"https://static.observableusercontent.com/files/ca7592c8e6230236bf8bb8dc1f54c288902d260f07b8b4e9b863f3e8b6d7aa2a54f13a1614fad4b4e96f6dbad940fd3fe7b7f87df5a7c6ec82f5239471b85e37","name":"l4.png","type":"image/png","lastModified":1672433863101.926,"size":2174056},{"id":"b23e996cbbf900b6a130a4de4a0c85b534d44d6696721ea8663880e873c287eddfc3f517b69cac81ee765ae1723d430a512cf235d1b1386859312f0119763d4e","href":"https://static.observableusercontent.com/files/b23e996cbbf900b6a130a4de4a0c85b534d44d6696721ea8663880e873c287eddfc3f517b69cac81ee765ae1723d430a512cf235d1b1386859312f0119763d4e","name":"l11.png","type":"image/png","lastModified":1672433863220.345,"size":2867805},{"id":"ba5aa5e4e350af85a3fabc670af65890d16d5c590336e59d22532ce0e7b6f99d84b0785bc1e2232e663632e2ca2f593d197758bdd8acf6da5fb4f192b85b78d8","href":"https://static.observableusercontent.com/files/ba5aa5e4e350af85a3fabc670af65890d16d5c590336e59d22532ce0e7b6f99d84b0785bc1e2232e663632e2ca2f593d197758bdd8acf6da5fb4f192b85b78d8","name":"l13.png","type":"image/png","lastModified":1672433862920.973,"size":1429612},{"id":"b732a1c9bda43077d727f0d8ca1342a7ae7fbc77a5618026b94af7686e53ca5a6d2789c614a39c13419dc4f9300b98e36e9adfe5143f35787ec1217eabf2c8e3","href":"https://static.observableusercontent.com/files/b732a1c9bda43077d727f0d8ca1342a7ae7fbc77a5618026b94af7686e53ca5a6d2789c614a39c13419dc4f9300b98e36e9adfe5143f35787ec1217eabf2c8e3","name":"l3.png","type":"image/png","lastModified":1672433863002.034,"size":1758648},{"id":"18ec7496bebff75b8dbb8d704b94dadb67cd022e3e735f9df2cd854cb767639274fc3224b58f9d43c9efddad61ba1b9e15d852915faaf10ca99eefd44a242a0d","href":"https://static.observableusercontent.com/files/18ec7496bebff75b8dbb8d704b94dadb67cd022e3e735f9df2cd854cb767639274fc3224b58f9d43c9efddad61ba1b9e15d852915faaf10ca99eefd44a242a0d","name":"l10.png","type":"image/png","lastModified":1672433863297.625,"size":3211826},{"id":"1bd3612320ea0d50569c17ae8877421e7c690597873a3c2c2d69f86d6e4ce9127f7ec6a1426db0cd9c2e9f28617aba050b67c6ad69b832d690e64689de0ed097","href":"https://static.observableusercontent.com/files/1bd3612320ea0d50569c17ae8877421e7c690597873a3c2c2d69f86d6e4ce9127f7ec6a1426db0cd9c2e9f28617aba050b67c6ad69b832d690e64689de0ed097","name":"l12.png","type":"image/png","lastModified":1672433863093.518,"size":2129423},{"id":"29152b8e6fb22939c03fc62f859e784b4699736c9af6d896225c19a6e094dc9ccb96b96798a846394b04d263fbbef49c2a9a14f4d81fd36565bdca083fb426fa","href":"https://static.observableusercontent.com/files/29152b8e6fb22939c03fc62f859e784b4699736c9af6d896225c19a6e094dc9ccb96b96798a846394b04d263fbbef49c2a9a14f4d81fd36565bdca083fb426fa","name":"l6@1.png","type":"image/png","lastModified":1672433863162.319,"size":2532618},{"id":"6ce193cdb8d696a5b8251582fc30010970a2c71c57711f379f4869f438f8a5ff26735065033154d1d9438df911c8eedceb0c9e3afcf0226b4776f56465768e1e","href":"https://static.observableusercontent.com/files/6ce193cdb8d696a5b8251582fc30010970a2c71c57711f379f4869f438f8a5ff26735065033154d1d9438df911c8eedceb0c9e3afcf0226b4776f56465768e1e","name":"l9.png","type":"image/png","lastModified":1672433863293.183,"size":3501946},{"id":"e876f14185b0ded90570c9f37f0d51d1745f2cf1f1a63dae46750eb4137a0a7f8d297a6d9d7fe3cf7b1eebeceb2c106eb6eef06eff967f3ac5f09216ee79b272","href":"https://static.observableusercontent.com/files/e876f14185b0ded90570c9f37f0d51d1745f2cf1f1a63dae46750eb4137a0a7f8d297a6d9d7fe3cf7b1eebeceb2c106eb6eef06eff967f3ac5f09216ee79b272","name":"l8.png","type":"image/png","lastModified":1672433863293.85,"size":3453598},{"id":"19a5690e9198743753b96a3e0048e4e02c88cf3a8534510c2ef1271181e9d5fee37364f6fd9ab1b145155b0f71bc9406c1ae3db07b1503ae8438fb67a5223358","href":"https://static.observableusercontent.com/files/19a5690e9198743753b96a3e0048e4e02c88cf3a8534510c2ef1271181e9d5fee37364f6fd9ab1b145155b0f71bc9406c1ae3db07b1503ae8438fb67a5223358","name":"leaf-section3.png","type":"image/png","lastModified":1666906320443.322,"size":970735}] 2f:{"id":"1b5888d13fc470fe","slug":null,"title":"Voronoi + smoothing","thumbnail":"02f907f5d98fa2ecb66d9976a1fc6f1ddf01e87a4ad6da262ff835a281b4e9cc","access_level":"public","create_time":"$D2022-10-27T21:24:47.219Z","update_time":"$D2025-04-09T02:29:47.923Z","view_time":null,"first_public_time":"$D2022-12-18T21:30:23.519Z","has_unpublished_edits":null,"fork":{"id":"3e3320f0bf779803","slug":"voronoi-mosaics","title":"Voronoi mosaics","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b34c988451399e98","login":"wenrazhao2","name":"KarlieDoesNotExist","avatar_url":"https://avatars-next.observableusercontent.com/64edd542e55cff350a7503e5050267fb1768e8cc5052184b8a8cb49162d172f3","tier":"starter_2024"},"version":802,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"302ba7635bb9b25d","login":"wenrazhao2","name":"KarlieDoesNotExist","avatar_url":"https://avatars-next.observableusercontent.com/64edd542e55cff350a7503e5050267fb1768e8cc5052184b8a8cb49162d172f3","tier":null}],"members":[{"type":"individual","id":"302ba7635bb9b25d","login":"wenrazhao2","name":"KarlieDoesNotExist","avatar_url":"https://avatars-next.observableusercontent.com/64edd542e55cff350a7503e5050267fb1768e8cc5052184b8a8cb49162d172f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","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","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","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(\"640x480.jpg\").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","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","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","output":"$undefined","database":"$undefined"},{"id":646,"value":"line = d3.line().curve(d3.curveBasisClosed)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","output":"$undefined","database":"$undefined"},{"id":588,"value":"viewof isCornerRadiusAbsolute = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":125,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":247,"value":"import {combo} from \"@esperanc/aggregated-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"import { makeSliderWithValue } from \"@kemper/code-snippets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"