31:[{"id":"063cb505113b2f0b3853e73ec1bf548f2d53076fc60faf9c42d9b2a408d489efe2a89c5bf14cb0ccdd5fa2f8c55dce8388b4dbb4762167b6bfee81e8ffd29fbb","href":"https://static.observableusercontent.com/files/063cb505113b2f0b3853e73ec1bf548f2d53076fc60faf9c42d9b2a408d489efe2a89c5bf14cb0ccdd5fa2f8c55dce8388b4dbb4762167b6bfee81e8ffd29fbb","name":"video.mp4","type":"video/mp4","lastModified":1594841352645.112,"size":3540086}] 2f:{"title":"Topological Skeleton Tracing - WASM","cells":[{"id":0,"value":"md`# Topological Skeleton Tracing - WASM\n\nThis is a follow up notebook from [topological-skeleton-tracing](https://observablehq.com/@radames/topological-skeleton-tracing).\n\nNow testing [Lingdong Huang](https://skeleton-tracing.netlify.app/) WASM version.\n\nI've bundled into an easy to use package [skeleton-tracing-wasm](https://www.npmjs.com/package/skeleton-tracing-wasm).\n\n\n#### Basic Usage\n\n\n\\`\\`\\`js\nTraceSkeleton = require(\"skeleton-tracing-wasm\")\ntracer = await TraceSkeleton.load() // await WASM module to be ready\nconst {polylines,rects} = tracer.fromCanvas(HTMLCANVAS)\n\\`\\`\\`\nor a short form\n\n\\`\\`\\`js\nTraceSkeleton = await (await require(\"skeleton-tracing-wasm\")).load()// load package and wait WASM module to be ready\nconst { polylines,rects } = TraceSkeleton.fromCanvas(HTMLCANVAS)\n\\`\\`\\`\nor \n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"viewof video = {\n const el = document.createElement('div');\n const video = document.createElement('video');\n const source = document.createElement('source');\n\n video.muted = true;\n video.autoplay = false;\n video.controls = true;\n video.playsInline = true;\n video.style.width = `${width > 700 ? (2 / 3) * width : width}px`;\n video.style.display = 'block';\n video.crossOrigin = \"\";\n source.src = await FileAttachment(\"video.mp4\").url();\n video.appendChild(source);\n video.ontimeupdate = () => {\n el.value = video.currentTime;\n el.dispatchEvent(new CustomEvent(\"input\"));\n };\n const cap = html`1968 Norman McLaren, Pas De Deux from Archive.org `;\n el.appendChild(video);\n el.appendChild(cap);\n video.load();\n video.onloadeddata = () => {\n video.currentTime = 66;\n };\n\n yield new Promise(resolve => {\n video.onloadedmetadata = () => {\n resolve(el);\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"canvasTracing","pinned":true,"hidden":false,"mode":"ojs"},{"id":987,"value":"html`

Canvas

${viewof canvasTracing}

SVG

${viewof features}

`","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 const voronoi = d3.Delaunay.from(canvasTracing.polylines.flat(1)).voronoi([\n 0.5,\n 0.5,\n width - 0.5,\n height - 0.5\n ]);\n context.lineWidth = 0.25;\n context.fillStyle = \"#ffffff33\";\n context.fillRect(0, 0, width, height);\n context.fillStyle = \"black\";\n context.beginPath();\n voronoi.update().render(context);\n voronoi.renderBounds(context);\n context.stroke();\n context.beginPath();\n voronoi.delaunay.renderPoints(context, 1.5);\n context.fill();\n yield context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"viewof canvasTracing = {\n video;\n const videoEl = viewof video.querySelector(\"video\");\n\n const w = width > 700 ? width / 3 : width / 2;\n const h = videoEl.videoHeight * (w / videoEl.videoWidth);\n const canvas = DOM.canvas(w, h);\n const ctx = canvas.getContext('2d');\n\n function processSkeleton() {\n ctx.drawImage(\n videoEl,\n 0,\n 0,\n videoEl.videoWidth,\n videoEl.videoHeight,\n 0,\n 0,\n w,\n h\n );\n ctx.canvas.value = TraceSkeleton.fromCanvas(canvas);\n ctx.canvas.dispatchEvent(new CustomEvent(\"input\"));\n }\n processSkeleton();\n return ctx.canvas;\n}","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"import { geoCurvePath } from \"@d3/context-to-curve\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":646,"value":"TraceSkeleton = await (await require(\"skeleton-tracing-wasm\")).load()","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"},{"id":1002,"value":"import { View } from \"@mbostock/synchronized-views\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1123,"value":"await FileAttachment(\"video.mp4\").url()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}