31:T576,viewof canvasTracing = { const img = new Image(); img.src = URL.createObjectURL( await fetch( `https://raw.githubusercontent.com/LingDong-/interesting-polygon-archive/master/png/${imageExample}.png` ).then(r => r.blob()) ); await img.decode(); const w = width / 2; const h = img.naturalHeight * (w / img.naturalWidth); const canvas = DOM.canvas(w, h); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, w, h); ctx.lineWidth = 20; ctx.lineJoin = "round"; ctx.lineCap = "round"; let mousedown = false; function processSkeleton() { ctx.canvas.value = TraceSkeleton.fromCanvas(ctx.canvas); ctx.canvas.dispatchEvent(new CustomEvent("input")); } ctx.canvas.addEventListener("pointerdown", e => { e.preventDefault(); mousedown = true; ctx.fillStyle = ctx.strokeStyle = ctx.getImageData(e.layerX, e.layerY, 1, 1).data[0] > 127 ? "#000" : "#fff"; ctx.beginPath(); ctx.moveTo(e.layerX, e.layerY); }); ctx.canvas.addEventListener("pointerup", e => { e.preventDefault(); mousedown = false; processSkeleton(); }); ctx.canvas.addEventListener("pointermove", e => { e.preventDefault(); if (!mousedown) return; ctx.lineTo(e.layerX, e.layerY); ctx.stroke(); processSkeleton(); }); processSkeleton(); return canvas; }32:[] 2f:{"title":"Topological Skeleton Tracing","cells":[{"id":0,"value":"md`# Topological Skeleton Tracing\n\nThis is an interesting algorithm to extract topological skeletons from binary images, a project by [Lingdong Huang](https://skeleton-tracing.netlify.app/)\n\nI've pushed the vanilla js version to a npm package [skeleton-tracing-js](https://www.npmjs.com/package/skeleton-tracing-js) and the WASM version [skeleton-tracing-wasm](https://www.npmjs.com/package/skeleton-tracing-wasm) so it's easy to use here on Observablehq. \n\n Thanks to [Fil](https://observablehq.com/@fil) for the tip on the [interesting polygon archive](https://observablehq.com/@fil/polygon-triangulation) and the code to draw svg paths with [geoJSON structure](https://observablehq.com/@fil/pointer-events-svg)\n\n#### Basic Usage\n\n\n\n\\`\\`\\`js\n\nTraceSkeleton = require('skeleton-tracing-js')\n\nconst {polylines,rects} = TraceSkeleton.fromCanvas(HTMLCANVAS)\n\\`\\`\\`\n\n**update**\n\nHere is another [notebook](https://observablehq.com/d/be83f67f3de2ea89) with an experiment with the WASM version.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"canvasTracing","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"viewof imageExample = select({\n options: [\n \"eberly-10\",\n \"eberly-14\",\n \"elgindy-1\",\n \"gray-embroidery\",\n \"held-1\",\n \"held-12\",\n \"held-3\",\n \"held-7a\",\n \"held-7b\",\n \"held-7c\",\n \"held-7d\",\n \"mapbox-building\",\n \"mapbox-dude\",\n \"matisse-alga\",\n \"matisse-blue\",\n \"matisse-icarus\",\n \"matisse-nuit\",\n \"mei-2\",\n \"mei-3\",\n \"mei-4\",\n \"mei-5\",\n \"mei-6\",\n \"meisters-3\",\n \"misc-discobolus\",\n \"misc-fu\",\n \"seidel-3\",\n \"skimage-horse\",\n \"toussaint-1a\"\n ],\n value: \"matisse-icarus\",\n description: \"Image\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"md` You can draw over the image !`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"viewof canvas = html`

Canvas

${viewof canvasTracing}

SVG

${viewof features}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof features = {\n const svg = DOM.svg(canvasTracing.width, canvasTracing.height);\n\n const features = canvasTracing.polylines.map(poly => ({\n type: \"Feature\",\n properties: { color: \"#A0F\" },\n geometry: { type: \"LineString\", coordinates: poly }\n }));\n svg.value = { type: \"FeatureCollection\", features };\n\n const path = geoCurvePath(d3.curveBasis); // d3.geoPath() with a curve\n\n d3.select(svg)\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", 2)\n .selectAll(\"path\")\n .data(features)\n .join(\"path\")\n .attr(\"stroke\", d => d.properties.color)\n .attr(\"d\", path);\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"chart = {\n const width = canvasTracing.width;\n const height = canvasTracing.height;\n const context = DOM.context2d(width, height);\n\n const voronoi = d3.Delaunay.from(positions).voronoi([\n 0.5,\n 0.5,\n width - 0.5,\n height - 0.5\n ]);\n context.lineWidth = 0.25;\n\n context.fillStyle = \"#ffffff33\";\n context.fillRect(0, 0, width, height);\n context.fillStyle = \"black\";\n\n context.beginPath();\n voronoi.update().render(context);\n voronoi.renderBounds(context);\n context.stroke();\n\n context.beginPath();\n voronoi.delaunay.renderPoints(context, 1.5);\n context.fill();\n\n yield context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"import { geoCurvePath } from \"@d3/context-to-curve\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"positions = canvasTracing.polylines.flat(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"TraceSkeleton = require('skeleton-tracing-js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}