2d:null 2e:["$","title",null,{"children":"Plotter sketchpad | Seph Gentle | Observable"}] 33:Ta96,chartOf = (layers, opts = {}) => { // elemStyle applies to the whole svg element. const elemStyle = opts.elemStyle || opts.style || defaultStyle // pathStyle can be a string or a function with signature path => style. const pathStyle = opts.pathStyle || defaultPathStyle // a string 'stroke: white;' or path => style function. // Add seph watermark in the corner const useWatermark = opts.watermark || false // Show download links if opts.download is missing or truthy. const showDownload = opts.download === undefined || opts.download // const styleOfPath = typeof pathStyle === 'function' ? pathStyle : () => pathStyle const optimize = opts.optimize || false // Input is either a list of layers or a list of paths. // If its a list of layers, it'll be a list of [{content:paths, clip:closedPaths}]. // Lists of paths are just lists of lists of points. // If layers contains just paths, wrap it as a list of layers. if (layers.length && Array.isArray(layers[0])) layers = [{content:layers}] // Optimize each layer if (optimize) layers.forEach(({content}) => content && content.forEach(optimizePath)) if (useWatermark) addWatermark(layers) // Flatten down to paths again. Just using fakeFlatten for now, which doesn't do occlusion culling. let paths = fakeFlatten(layers) // Trim to the window size, removing anything overlapping with the paper margin. paths = trimPaths(paths, windowBB) if (optimize) { joinPaths(paths) optimizePathOrder(paths) // paths.forEach(optimizePath) } const pathToSVG = path => { const s = [] for (let i = 0; i < path.length; i++) { const p = path[i] const base = `${roundish(p[0])} ${roundish(p[1])}` if (i === 0) s.push('M', base) else if (p.length === 2) s.push('L', base) else if (p[2] === 'Q') s.push('Q', `${roundish(p[3])} ${roundish(p[4])} `, base) // Quadratic curve else throw Error('Invalid path segment ' + JSON.stringify(p)) } return s.join('') } const svgPaths = `` // const svgPaths = paths // .map(path => ``) // .join('\n') const svgElem = html`` return showDownload ? html`

${svgElem} ${showDownload ? download(svgElem, opts.name) : null}

` : svgElem }34:T475,joinPaths = paths => { // The efficient version of this would be to use AABB trees, but eh. N^2 should be fine. outer: for (let i = 0; i < paths.length - 1; i++) { const p1 = paths[i] for (let k = i+1; k < paths.length;) { const p2 = paths[k] let join = true if (isVeryClose(p1[0], p2[0])) { p1.reverse() } else if (isVeryClose(p1[p1.length-1], p2[0])) { } else if (isVeryClose(p1[0], p2[p2.length - 1])) { // Could join them the other way but eh. p1.reverse() p2.reverse() } else if (isVeryClose(p1[p1.length-1], p2[p2.length - 1])) { p2.reverse() } else { join = false } if (join) { p1.pop() p1.push.apply(p1, p2) // Move the newly joined path to the end so other paths can still glom on to it. paths.splice(k, 1) paths.splice(i, 1) paths.push(p1) i-- continue outer // This would be faster, but less pretty when drawing. //paths[k] = paths[paths.length - 1] //paths.length-- } else { k++ } } } }35:[] 31:{"id":"abe88812ef921d90","slug":"plotter-sketchpad","title":"Plotter sketchpad","thumbnail":"d79f8b05c8431fe322033f77a72d6dbeeaebf058209e77b019d24563dea1c0fe","access_level":"public","create_time":"$D2018-07-18T04:15:38.872Z","update_time":"$D2021-10-03T02:31:45.522Z","view_time":null,"first_public_time":"$D2018-07-18T05:23:27.361Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"a0f089998233f3de","login":"josephg","name":"Seph Gentle","avatar_url":"https://avatars-next.observableusercontent.com/47eb3610746e88cd3ab7c308d8db187ae1345ffb3726fb5f8b10c709de8d8c78","tier":"starter_2024"},"version":273,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"227a0e683597b0ad","login":"josephg","name":"Seph Gentle","avatar_url":"https://avatars-next.observableusercontent.com/47eb3610746e88cd3ab7c308d8db187ae1345ffb3726fb5f8b10c709de8d8c78","tier":null}],"members":[{"type":"individual","id":"227a0e683597b0ad","login":"josephg","name":"Seph Gentle","avatar_url":"https://avatars-next.observableusercontent.com/47eb3610746e88cd3ab7c308d8db187ae1345ffb3726fb5f8b10c709de8d8c78","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Plotter sketchpad","cells":[{"id":0,"value":"md`# Plotter sketchpad\n\nThis is a simple workspace to generate SVG [images](https://twitter.com/hashtag/plottertwitter?src=hash) for my [axidraw](https://axidraw.com/) plotter.\n\nIt has some simple helpers to support layers, a watermark, trimming (so you don't draw off the page) and some simple path optimization to help the plotter draw faster.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"chart = chartOf(examplePaths, {watermark: true, optimize: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"examplePaths = [\n [[-100, -300], [100, 100]],\n [[-100, 100], [100, -100], [200, 200, 'Q', 300, 300]],\n [[-W/2, -H/2], [W/2, -H/2], [W/2, H/2], [-W/2, H/2], [-W/2, -H/2]],\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"download = (svgElem, name) => {\n if (name == null) name = 'plot'\n const a5 = 'width=\"210mm\" height=\"148mm\"'\n const a4 = 'width=\"297mm\" height=\"210mm\"'\n const a3 = 'width=\"420mm\" height=\"297mm\"'\n\n const svgStr = svgElem.innerHTML\n const style = svgElem.getAttribute('style')\n const viewBox = svgElem.getAttribute('viewBox')\n \n const downloadAtSize = (size, str) => (\n DOM.download(new Blob([`\n `\n ], {type: 'image/svg+xml'}), `plot_${str}.svg`, str)\n )\n \n return html`

\n Download plotter SVG:\n ${downloadAtSize(a5, 'A5')}\n ${downloadAtSize(a4, 'A4')}\n ${downloadAtSize(a3, 'A3')}\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"defaultStyle = 'background: black;'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"defaultPathStyle = 'stroke: white;'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"viewof seed = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"seed","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"roundish = n => Math.round(n*100)/100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"strokeWidth = 0.4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"style = 'background: black;'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"MARGIN = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"W = 1000 * Math.SQRT2 - 2*MARGIN","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"H = 1000 - 2*MARGIN","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"WMSIZE = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"windowBB = ({l: -W/2, r: W/2, t: -H/2, b: H/2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`\n## Watermark\n\nFor my own images I add a little \\`SEPH\\` watermark in the bottom corner to mark that its one of my images. Feel free to remove this or change it or whatever.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"mapPoints = (paths, fn) => paths.map(path => path.map(fn))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"addWatermark = {\n const xfwm = (paths) => mapPoints(paths, ([x, y]) => [x*WMSIZE + W/2 - WMSIZE*10, y*WMSIZE + H/2 - WMSIZE*5])\n const wm = xfwm([[[8,0],[8,3],[6,3],[6,2],[5,2],[5,3],[0,3],[0,0],[8,0]],[[1.91,0.09],[1.91,0.91],[0.91,0.91],[0.91,1.09],[1.91,1.09],[1.91,2.91],[0.09,2.91],[0.09,2.09],[1.09,2.09],[1.09,1.91],[0.09,1.91],[0.09,0.09],[1.91,0.09]],[[3.91,0.09],[3.91,0.91],[2.91,0.91],[2.91,1.09],[3.91,1.09],[3.91,1.91],[2.91,1.91],[2.91,2.09],[3.91,2.09],[3.91,2.91],[2.09,2.91],[2.09,0.09],[3.91,0.09]],[[5.91,0.09],[5.91,1.91],[4.91,1.91],[4.91,2.91],[4.09,2.91],[4.09,0.09],[5.91,0.09]],[[6.91,0.09],[6.91,1.09],[7.09,1.09],[7.09,0.09],[7.91,0.09],[7.91,2.91],[7.09,2.91],[7.09,1.91],[6.91,1.91],[6.91,2.91],[6.09,2.91],[6.09,0.09],[6.91,0.09]],\n [[4.91, 0.91],[5.09,0.91],[5.09, 1.09], [4.91, 1.09], [4.91, 0.91]]\n])\n const watermarkbounds = xfwm([[[8,0],[8,3],[0,3],[0,0],[8,0]]])\n \n return layers => {\n layers.push({\n content: wm,\n clip: watermarkbounds\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`\n## Trim paths\n\nThis is used to make sure all paths fall inside a drawable area on the SVG. In the browser this isn't important (lines outside the SVG will just be trimmed). But the axidraw will try and draw all lines in the SVG, which can result in the pen trying to draw off the page.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"trimPaths = {\n const pointInBB = ([x, y], {l, r, t, b}) => (x >= l && x <= r && y >= t && y <= b)\n return (paths, bb) => {\n const out = []\n\n paths.forEach(p => {\n for (let i = 1; i < p.length; i++) {\n const a = p[i-1], b = p[i]\n //if (i == 1) console.log(a)\n\n if (!pointInBB(a, bb) || !pointInBB(b, bb)) continue\n\n let last\n const lastPath = out.length ? out[out.length-1] : null\n if (lastPath === null || lastPath[lastPath.length-1] !== a) {\n last = [a]\n out.push(last)\n } else {\n last = lastPath\n }\n last.push(b)\n }\n })\n\n return out\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`\n---\n\n## Some maths functions\n\nThese are mostly included as helpers to image generation code\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"clamp = (x, a, b) => Math.min(Math.max(x, a), b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"vlen = (x, y) => Math.sqrt(x*x + y*y)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"dist2 = ([x0, y0], [x1, y1]) => Math.sqrt((x0-x1)*(x0-x1) + (y0-y1)*(y0-y1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"distsq = ([x0, y0], [x1, y1]) => (x0-x1)*(x0-x1) + (y0-y1)*(y0-y1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"vdot2 = (x1, y1, x2, y2) => x1*x2 + y1*y2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"lerp = (x, a, b) => (1-x)*a + x*b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`\\`split(point1, point2, num)\\` splits out a straight line into a bunch of line segments. This is useful for point-based permutations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"split = ([x1, y1], [x2, y2], num) => {\n const out = []\n for (let i = 0; i <= num; i++) {\n out.push([lerp(i/num, x1, x2), lerp(i/num, y1, y2)])\n }\n return out\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"isWithinDist = (p0, p1, dist) => distsq(p0, p1) < dist*dist","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`\n# Path Optimization\n\nThe axidraw python code is quite naive - it simply plots all the paths in the SVG, in order. The acceleration is based on the length between any two adjacent points listed in the SVG.\n\nFor that reason there's a bunch of optimization we want to do on the paths before handing the image off to the plotter:\n\n- Trim any points which fall outside the page\n- Join any paths which share starting & ending points so the plotter doesn't have to travel as far and so the pen isn't being raised & lowered unnecessarily (that adds ugly dots around the place)\n- Remove unnecessary points along a curve, if the points are so close together that you can't see them anyway\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"isVeryClose = (p0, p1) => isWithinDist(p0, p1, 0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"optimizePath = path => {\n // If a point is really close to both neighbors and the angle at the point is small, remove the point.\n for (let i = 1; i < path.length - 1; i++) {\n const p0 = path[i-1]\n const p1 = path[i]\n const p2 = path[i+1]\n \n const THRESHOLD = 2\n \n //console.log(dist2(p1, p0), dist2(p1, p2), isWithinDist(p1, p0, THRESHOLD))\n if (!isWithinDist(p1, p0, THRESHOLD) || !isWithinDist(p1, p2, THRESHOLD)\n || p0.length > 2 || p1.length > 2 || p2.length > 2) continue\n\n const v1x = p0[0]-p1[0]\n const v1y = p0[1]-p1[1]\n const v2x = p1[0]-p2[0]\n const v2y = p1[1]-p2[1]\n const dp = vdot2(v1x, v1y, v2x, v2y)\n const incidence = dp / vlen(v1x, v1y) / vlen(v2x, v2y)\n\n // console.log('incidence', incidence)\n // 1 = same direction, 0 = right angle, -1 = opposite direction.\n if (incidence > 0.7) {\n path.splice(i, 1)\n i--\n }\n //console.log(incidence)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"optimizePathOrder = paths => {\n // This doesn't do travelling salesman or anything, it just reverses the\n // order of paths if it makes sense to. This is good for when the plotter is\n // drawing a series of parallell-ish lines.\n out: for (let i = 1; i < paths.length; i++) {\n // Don't do this if the path has any curves\n for (let k = 0; k < paths[i].length; k++) if (paths[i][k].length > 2) continue out;\n \n const endpoint = paths[i-1][paths[i-1].length-1]\n\n const d1 = dist2(endpoint, paths[i][0])\n const d2 = dist2(endpoint, paths[i][paths[i].length-1])\n \n if (d2 < d1) paths[i].reverse()\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`\\`fakeFlatten\\` is used as a replacement for flatten when either flattening the layers is too slow or unnecessary.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"fakeFlatten = (layers) => layers.reduce((paths, layer) => layer.content ? paths.concat(layer.content) : paths, [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"