31: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); } }32:[] 2f:{"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"},{"id":18,"value":"viewof image = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: 'https://i.imgur.com/zvPaOqc.png'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"image","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"viewof simplifyThreshold = html``","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":72,"value":"outlinePathData = 'M ' +\n outlinePolyline.map(p => p.x + ' ' + p.y).join(' L ') +\n ' Z '","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"outlinePreview = html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"colors = ['#750787', '#004dff', '#008026', '#ffed00', '#ff8c00', '#e40303']","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"expandWidth = 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"mutable percentDone = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":65,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"getImageOutline = require('https://bundle.run/image-outline@0.1.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"makerjs = require(\"https://bundle.run/makerjs@0.17.0\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}