2a:null 2b:["$","title",null,{"children":"image outline expand art | Forrest O. | Observable"}] 30:T42c,forrestoPathExpandArt = { const { width, height } = image; const paths = []; mutable percentDone = 0; yield html` `; await Promises.tick(1000); for (const path of pathExpansions(makerModel, colors)) { paths.push(path); mutable percentDone = Math.round((paths.length / colors.length) * 100); yield html` `; await Promises.tick(1000); } }31:[] 2e:{"id":"ba95e66c34f1dbcc","slug":"image-outline-expand-art","title":"image outline expand art","thumbnail":"859041423de05b32b856d545a96187a84c01a85006a453bb518b18f31cd89151","access_level":"public","create_time":"$D2019-10-08T18:09:11.025Z","update_time":"$D2019-11-10T08:32:13.746Z","view_time":null,"first_public_time":"$D2019-10-09T15:36:42.933Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":"starter_2024"},"version":291,"publish_version":291,"role":null,"authored":false,"authors":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null}],"members":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"image outline expand art","cells":[{"id":0,"value":"md`# image outline expand art\n\nSelect a transparent PNG/GIF image to get a vector polyline of the outline, expanded out with colors of your choosing. Hint: use https://www.remove.bg/\n\n![baby koala rainbow](https://i.imgur.com/0TGbecU.jpg)\n\nNote: not all image hosts allow us to see the pixels of the image. Locally-chosen images usually work. They are not uploaded:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof image = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: 'https://i.imgur.com/zvPaOqc.png'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"image","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"viewof simplifyThreshold = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"outlinePolyline = new Promise(function(resolve, reject) {\n if (!image) {\n reject('Waiting for image...');\n }\n getImageOutline(image.src, { simplifyThreshold }, function(err, outline) {\n if (err) {\n reject(err);\n return;\n }\n resolve(outline);\n });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"outlinePathData = 'M ' +\n outlinePolyline.map(p => p.x + ' ' + p.y).join(' L ') +\n ' Z '","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"outlinePreview = html`\n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"colors = ['#750787', '#004dff', '#008026', '#ffed00', '#ff8c00', '#e40303']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"expandWidth = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"mutable percentDone = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"function* pathExpansions(makerModel, colors) {\n for (let i = 0, len = colors.length; i < len; i++) {\n const color = colors[i];\n const expandBy = (len - i) * expandWidth + 0.0001;\n const d = expandPath(makerModel, expandBy);\n yield svg``;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"makerModel = {\n const m = makerjs.model.mirror(\n new makerjs.models.ConnectTheDots(\n true, // is closed\n outlinePolyline.map(point => [point.x, point.y])\n ),\n false, // Don't flip x\n true // Flip y\n );\n // makerjs.model.originate(m);\n makerjs.model.simplify(m);\n return m;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"expandPath = (makerModel, expandBy = 2) => {\n // IDK why we need + 0.001 here\n const expanded = makerjs.model.outline(makerModel, expandBy);\n // makerjs.model.simplify(expanded);\n const svg = html`${makerjs.exporter.toSVG(expanded, {\n // viewbox: false,\n origin: [0, 0]\n })}`;\n return svg.querySelector('path').getAttribute('d');\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Libraries\n\nUses:\n* https://www.npmjs.com/package/image-outline (there are some marching squares in there)\n* https://maker.js.org/docs/advanced-drawing/#Outlining%20a%20model\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"getImageOutline = require('https://bundle.run/image-outline@0.1.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"makerjs = require(\"https://bundle.run/makerjs@0.17.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"