3e:null 3f:["$","title",null,{"children":"Vector fill | Maksim Surguy | Observable"}] 45:T1737,SVG = { const svg = DOM.svg(576,576); const svgString = ` `; svg.innerHTML = svgString; return svg; }46:T7c1,svgPaths = new Promise((resolve, reject) => { let data = new XMLSerializer().serializeToString(SVG); const context = canvas.getContext('2d'); const tempContext = tempCanvas.getContext('2d'); let win = window.URL || window.webkitURL || window; let img = new Image(); let blob = new Blob([data], { type: 'image/svg+xml' }); let url = win.createObjectURL(blob); img.onload = function () { context.clearRect(0, 0, width * quality, height * quality); tempContext.clearRect(0, 0, width * quality, height * quality); tempContext.fillStyle = 'white'; tempContext.fillRect(0, 0, width*quality, height * quality); context.drawImage(img, 0, 0, width * quality, height * quality); const imgData = context.getImageData(0,0,width * quality, height * quality); const ff = new floodfill.default(imgData); ff.collectModifiedPixels = true; ff.fill('#FF0000', samplingPoint[0] * quality, samplingPoint[1] * quality, 0.2); context.putImageData(ff.imageData, 0, 0); const tempCanvasImage = tempContext.getImageData(0, 0, width * quality, height* quality); let tempCanvasImageData = tempCanvasImage.data; ff.modifiedPixels.forEach((val) => { const [x,y] = val.split('|') const off = y * (width * quality * 4) + x * 4 tempCanvasImageData[off] = 0; tempCanvasImageData[off + 1] = 0; tempCanvasImageData[off + 2] = 0; tempCanvasImageData[off + 3] = 255; }); tempContext.putImageData(tempCanvasImage, 0, 0); win.revokeObjectURL(url); // const uri = canvas.toDataURL('image/png').replace('image/png', 'octet/stream'); // const a = document.createElement('a'); // document.body.appendChild(a); // a.style = 'display: none'; // a.href = uri // a.download = 'untitled' + '.png'; // a.click(); // window.URL.revokeObjectURL(uri); // document.body.removeChild(a); resolve(potrace.traceCanvas(tempCanvas)); }; img.src = url; })47:[{"id":"d458c4f5dc9c67f38058b14026f228857dc7e4a9fad319b4a46df0c2c9f7d5bf74fba651d0be70439f9f982ced49ec96ae40c2b5fb4f6b1216861e9c071dbdf3","href":"https://static.observableusercontent.com/files/d458c4f5dc9c67f38058b14026f228857dc7e4a9fad319b4a46df0c2c9f7d5bf74fba651d0be70439f9f982ced49ec96ae40c2b5fb4f6b1216861e9c071dbdf3","name":"stack-blur.js","type":"application/javascript","lastModified":1589045732687.695,"size":3024}] 43:{"id":"da72def43f93448f","slug":null,"title":"Vector fill","thumbnail":"d442c4d987a1c33d690b4942a72d742da12529e9e55b5a87a84fd97f683cdc96","access_level":"public","create_time":"$D2020-05-09T17:35:32.687Z","update_time":"$D2020-05-09T17:41:58.043Z","view_time":null,"first_public_time":"$D2022-12-01T06:17:20.204Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"b70866d97388e132","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":"starter_2024","bio":"Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy","following":false},"version":520,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"10a57afa0a06ca21","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":null,"bio":"Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy","following":false}],"members":[{"type":"individual","id":"10a57afa0a06ca21","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vector fill","cells":[{"id":389,"value":"md`# Vector fill`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`Get the SVG, then get a point inside SVG which should be filled`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"height = 576","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"width = 576","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"quality = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"canvas = {\n const context = DOM.context2d(width * quality, height * quality);\n context.fillRect(0, 0, width * quality, height * quality);\n context.fillStyle = \"#FFFFFF\";\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"tempCanvas = {\n const context = DOM.context2d(width * quality, height * quality);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"svg`${potrace.getSVG(svgPaths, 1.0, 'curve', { width: width * quality, height: height * quality})}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md`Define the X, Y coordinates of the sampling point`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"samplingPoint = [300, 200]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"hatchesSpacing = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"hatchesAngle = Math.random() * Math.PI * 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"md`___\n## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"floodfill = require('q-floodfill')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"contours = d3.contours().size([width*quality, height*quality])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"projection = d3.geoIdentity().scale(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"StackBlur = require(await FileAttachment(\"stack-blur.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"potrace = require (\"https://cdn.jsdelivr.net/npm/potrace-js-dev@0.0.3/lib/dist/index.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"import {Polygon, pathFromPolygon} from '@makio135/utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"