2d:null 2e:["$","title",null,{"children":"Pivot format for plotter experiments | Philippe Deschaseaux | Observable"}] 33:Te6a,const Plot = (p) => { const cmds = []; const stack = []; let pos = [0, 0]; const movePos = (dx, dy) => (pos = V2.add(pos, [dx, dy])); const move = (dx, dy) => { movePos(dx, dy); const last = cmds.at(-1); if (last?.mv) last.mv = V2.add(last.mv, [dx, dy]); else cmds.push({ mv: [dx, dy] }); }; const draw = (dx, dy, angle) => ( movePos(dx, dy), cmds.push({ dr: angle ? [dx, dy, angle] : [dx, dy] }) ); const push = () => stack.push(pos); const pop = () => cmds.push({ mv: V2.vec(pos, (pos = stack.pop())) }); //const pop = () => move(...V2.vec(pos, (pos = stack.pop()))); const chain = (plot) => { for (const cmd of plot) { if (cmd.mv) move(...cmd.mv); else draw(...cmd.dr); } }; const ellipse = (rx, ry) => { move(rx, 0); draw(-rx, -ry, "+"); draw(-rx, ry, "+"); draw(rx, ry, "+"); draw(rx, -ry, "+"); move(-rx, 0); }; const plot = { move: (dx, dy) => ((dx != 0 || dy != 0) && move(dx, dy), plot), draw: (dx, dy, angle) => ( (dx != 0 || dy != 0) && draw(dx, dy, angle), plot ), rect: (w, h) => { move(-w / 2, -h / 2); draw(w, 0); draw(0, h); draw(-w, 0); draw(0, -h); move(w / 2, h / 2); return plot; }, circle: (radius) => (ellipse(radius, radius), plot), ellipse: (rx, ry) => (ellipse(rx, ry), plot), text: (lines, options) => { const defaults = { halign: "center", valign: "middle", inter: 0, scale: [1, 1], rotation: 0 }; const { halign, valign, inter, scale, rotation, expand: exp } = Object.assign(defaults, options); const LINE_HEIGHT = 32; const ht = LINE_HEIGHT * scale[1]; const it = inter * scale[1]; const nb = lines.length; const h = ht * nb + it * (nb - 1); const dys = { top: 0, middle: -h / 2, bottom: -h }; const dy = dys[valign]; const angle = deg2rad(rotation); push(); move(...V2.rot([0, dy + ht / 2], angle)); for (const str of lines) { const { x: xt, width: wt } = bounds(str, options); const dxs = { left: 0, center: -wt / 2, right: -wt }; const dx = dxs[halign]; push(); move(...V2.rot([dx - xt, 0], angle)); let [cx, cy] = [0, 0]; let paths = str2paths(str, options); if (exp) { paths = expand( [...paths], exp.precision || 100, exp.dist || 2, exp.simplification ); if (exp.hatching) { const { spacing = 5, angle = 45 } = exp.hatching; paths = [...paths, ...hatch(paths, spacing, angle)]; } } for (const path of paths) { if (path.length > 0) { const [px, py] = path[0]; move(...V2.rot([-cx + (cx = px), -cy + (cy = py)], angle)); for (const [px, py] of path.slice(1)) { draw(...V2.rot([-cx + (cx = px), -cy + (cy = py)], angle)); } } } pop(); move(...V2.rot([0, ht], angle)); } pop(); return plot; }, apply: (func, ...args) => (func(plot, ...args), plot), push: () => (push(), plot), pop: () => (pop(), plot), chain: (p) => (chain(p), plot), insert: (...plots) => (plots.map((p) => plot.push().chain(p).pop()), plot), insertOne: (plot, options = {}) => { const { halign = "center", valign = "middle", dims = [0, 0] } = options; const bbox = getBbox(plot); }, [Symbol.iterator]: () => cmds[Symbol.iterator]() }; if (p) chain(p); return plot; }34:T841,const dash = (plot, param) => { const [down, up] = param || [4, 6]; const dp = Plot(); const dash = (() => { let [remainD, remainU] = [down, 0]; return (dist, draw, move) => { let remain = dist; while (remain > 0) { if (remainD > 0) { const d = Math.min(remain, remainD); draw(d), (remain -= d), (remainD -= d); if (remainD == 0) remainU = up; } else { const d = Math.min(remain, remainU); move(d), (remain -= d), (remainU -= d); if (remainU == 0) remainD = down; } } }; })(); const draw = (dx, dy, angle) => { const drawSegment = (vec) => { const dist = V2.norm(vec); if (dist < Number.EPSILON) return; const draw = (d) => dp.draw(...V2.mul(vec, d / dist)); const move = (d) => dp.move(...V2.mul(vec, d / dist)); dash(dist, draw, move); }; const drawCurve = (center, radii, angle) => { const startAngle = -V2.atan(center) - Math.PI; const range = [startAngle, startAngle + angle]; const nbSegments = 20; let current = [0, 0]; const pts = ellipseArc(center, radii, range, nbSegments); for (const pt of pts) drawSegment(V2.vec(current, (current = pt))); }; // segments are dashed with a simple algorithm // circular/elliptic arcs are converted to segments, then dashed with the same algo if (angle == "+" || angle == "-") { const center = (dx * dy > 0 && angle == "+") || (dx * dy < 0 && angle == "-") ? [dx, 0] : [0, dy]; const rads = deg2rad(angle == "+" ? 90 : -90); drawCurve(center, [Math.abs(dx), Math.abs(dy)], rads); } else if (!isNaN(angle)) { const rads = deg2rad(angle); const [center, radius] = V2.arcCenter([dx, dy], rads); drawCurve(center, [radius, radius], rads); } else drawSegment([dx, dy]); }; // we "replay" the plot, replacing drawing commands by dashed segments (successive draws & moves) for (const cmd of plot) { if (cmd.dr) draw(...cmd.dr); else dp.move(...cmd.mv); } return dp; }35:T60f,const crop = (plot, [xmin, xmax], [ymin, ymax], epsilon = 1e-6) => { const intersect = intersectRect( [(xmin + xmax) / 2, (ymin + ymax) / 2], [xmax - xmin, ymax - ymin], 1e-10 // Number.EPSILON is too small ); let [x1, y1] = [0, 0]; let x2, y2; const cp = Plot(); for (const cmd of plot) { const [dx, dy] = cmd.mv || cmd.dr; [x2, y2] = V2.add([x1, y1], [dx, dy]); if (cmd.dr) { const [pt1, pt2] = [ [x1, y1], [x2, y2] ]; const [pta, ptb] = intersect([pt1, pt2]); if (pta && ptb) { const [xa, ya] = pta; const [xb, yb] = ptb; const t = ([x, y]) => Math.abs(ya - yb) < 1e-10 // Number.EPSILON is too small ? (x - xa) / (xb - xa) : (y - ya) / (yb - ya); const [t1, t2] = [t(pt1), t(pt2)]; const dr = (pts, pte) => { if (pts != pt1) cp.move(...V2.vec(pt1, pts)); cp.draw(...V2.vec(pts, pte)); if (pte != pt2) cp.move(...V2.vec(pte, pt2)); }; if (t1 < 0 && t2 < 0) cp.move(dx, dy); else if (t1 > 1 && t2 > 1) cp.move(dx, dy); else if (t1 < 0 && t2 > 1) dr(pta, ptb); else if (t1 < 0 && t2 >= 0) dr(pta, pt2); else if (t1 <= 1 && t2 > 1) dr(pt1, ptb); else if (t2 < 0 && t1 > 1) dr(pta, ptb); else if (t2 < 0 && t1 >= 0) dr(pt1, pta); else if (t2 <= 1 && t1 > 1) dr(ptb, pt2); else dr(pt1, pt2); } else cp.move(dx, dy); } else cp.move(dx, dy); [x1, y1] = [x2, y2]; } return cp; }36:Tc70,const toGcode = (plot) => { const gcode = Gcode(); const { min, cos, sin, tan, abs, floor } = Math; const r = (val) => round(val, 4); const XY = (x, y) => ({ X: r(x), Y: r(y) }); const IJ = ([dx, dy]) => ({ I: r(dx), J: r(dy) }); const up = () => gcode.move({ F: 10000, Z: r(zDown - 4.5) }); const down = () => gcode.move({ F: 5000, Z: zDown }); gcode.millimeters(); // and thus speeds are in mm/minute gcode.abs(); let [x, y] = [0, 0]; gcode.setCurrentCoords({ X: x, Y: y, Z: 0 }); let lastDown = [x, y]; for (const cmd of plot) { const { mv, dr, st } = cmd; if (mv) { if (!lastDown) (lastDown = [x, y]), up(); [x, y] = V2.add([x, y], mv); } else if (dr) { if (lastDown) { // finally perform pending move gcode.move({ F: 8000, ...XY(x, y) }); // fast when moving down(); gcode.move({ F: 2000 }); // slow when drawing lastDown = null; } const [dx, dy, curve] = dr; if (curve == "+" || curve == "-") { const [adx, ady] = [abs(dx), abs(dy)]; // no ellipse arc primitive in gCODE // approx with segments of variable length // approx with arcs (https://paulbourke.net/geometry/ellipsecirc) const arc = (center, [deg1, deg2]) => { const range = [deg2rad(deg1), deg2rad(deg2)]; const pts = ellipseArc(center, [adx, ady], range); for (const pt of pts) gcode.move(XY(...([x, y] = pt))); }; if (curve == "+") { if (adx == ady) { const [center] = V2.arcCenter([dx, dy], Math.PI / 2); const params = { ...IJ(center), ...XY((x += dx), (y += dy)) }; // rotation is inversed because plotter coordinate system is upside down gcode.arc_cw(params); } else { if (dx < 0 && dy < 0) arc([x + dx, y], [0, 90]); else if (dx < 0 && dy > 0) arc([x, y + dy], [90, 180]); else if (dx > 0 && dy > 0) arc([x + dx, y], [180, 270]); else if (dx > 0 && dy < 0) arc([x, y + dy], [270, 360]); else gcode.move(XY((x += dx), (y += dy))); } } else { if (adx == ady) { const [center] = V2.arcCenter([dx, dy], -Math.PI / 2); const params = { ...IJ(center), ...XY((x += dx), (y += dy)) }; // rotation is inversed because plotter coordinate system is upside down gcode.arc_ccw(params); } else { if (dx < 0 && dy > 0) arc([x + dx, y], [360, 270]); else if (dx < 0 && dy < 0) arc([x, y + dy], [270, 180]); else if (dx > 0 && dy < 0) arc([x + dx, y], [180, 90]); else if (dx > 0 && dy > 0) arc([x, y + dy], [90, 0]); else gcode.move(XY((x += dx), (y += dy))); } } } else if (curve) { const [center] = V2.arcCenter([dx, dy], deg2rad(curve)); const params = { ...IJ(center), ...XY((x += dx), (y += dy)) }; (curve > 0 ? gcode.arc_cw : gcode.arc_ccw)(params); } else gcode.move(XY((x += dx), (y += dy))); } } if (!lastDown) up(); gcode.move({ F: 8000, X: 0, Y: 0, Z: 0 }); return gcode; }37:T7cb,const viewer = (dims = [width, 500], gCode) => { const attrs = { fill: "none", stroke: "#000", "stroke-linecap": "round", "stroke-linejoin": "round" }; const toggle = (e) => { const display = gcodeView.style.display; gcodeView.style.display = display == "none" ? "block" : "none"; if (wrapper.plot) { // update gCode viewer if plot has changed gcodeView.firstChild.replaceWith(gcodeViewer(wrapper.plot)); wrapper.plot = null; } }; const plotView = html`

`; const gcodeView = html`

`; const button = htl.html`

G-code

`; const gcodeZone = htl.html`

${button}${gcodeView}

`; const wrapper = html`

${plotView}${ gCode ? gcodeZone : "" }

`; plotView.append(SVG.svg(dims, SVG.group())); wrapper.update = (plot) => { wrapper.plot = plot; plotView.firstChild.firstChild.replaceWith(toSVG(plot)); return wrapper; }; let bounds; wrapper.view = (plot, options = {}) => { wrapper.plot = plot; if (!options.viewBox) { let { x, y, width: w, height: h } = getBbox(plot); if (w != -Infinity && h != -Infinity) { if (w == 0) x -= (w = h / 10) / 2; else if (h == 0) y -= (h = w / 10) / 2; attrs.viewBox = SVG.viewbox(x, y, w, h); if (!options["stroke-width"]) { const ratio = Math.min(w, h) / Math.min(dims[0], dims[1]); options["stroke-width"] = ratio; } } } const svg = SVG.svg(dims, toSVG(plot), Object.assign({}, attrs, options)); const opts = Object.assign( { onChange: (bnds) => (bounds = bnds) }, bounds ? { bounds } : { margin: options.margin ?? 0.05 } ); plotView.firstChild.replaceWith(gCode ? zoomAndPanSvg(svg, opts) : svg); return wrapper; }; return wrapper; }38:Taf1,const gcodeViewer = (plot) => { const viewer = html`

`; const { x: xmin, y: ymin, width: w, height: h } = getBbox(plot); const formats = { A3: [297, 420], A4: [210, 297], A5: [148.5, 210], "160x160": [160, 160], C6: [110, 155] }; // "format" parameter const formatOptions = { label: "format", value: "A4" }; const format = Inputs.radio([...Object.keys(formats)], formatOptions); // "orientation" parameter const orientOptions = { label: "orientation", value: "landscape" }; const orient = Inputs.radio(["portrait", "landscape"], orientOptions); // "margin" parameter const marginOptions = { label: "margin", value: 10, step: 1 }; const margin = Inputs.range([0, 100], marginOptions); // "scale" parameter const scaleOptions = { label: "scale", value: "fit2page" }; const scaleMode = Inputs.radio(["fit2page", "custom ratio"], scaleOptions); const scaleCustom = Inputs.text({ value: "1", width: 10 }); // "x offset" parameter const xaligns = ["left", "center", "right"]; const xalign = Inputs.radio(xaligns, { label: "x-alignment", value: "center", format: (x) => html`${{ left: "⇤", center: "↔", right: "⇥" }[x]}` }); // "y offset" parameter const yaligns = ["top", "center", "bottom"]; const yalign = Inputs.radio(yaligns, { label: "y-alignment", value: "center", format: (x) => html`${{ top: "⤒", center: "↕", bottom: "⤓" }[x]}` }); const update = () => { const [W, H] = formats[format.value]; const transf = (W, H) => { const M = margin.value; const [WW, HH] = [W - M - M, H - M - M]; const customScale = +scaleCustom.value || 1; const fit2page = scaleMode.value == "fit2page"; const ratio = fit2page ? Math.min(WW / w, HH / h) : customScale; const fx = { left: 0, center: 0.5, right: 1 }[xalign.value]; const dx = fx * (WW - w * ratio) + M - xmin * ratio; const fy = { top: 0, center: 0.5, bottom: 1 }[yalign.value]; const dy = fy * (HH - h * ratio) + M - ymin * ratio; return translate(scale(plot, ratio), [dx, dy]); }; const vplot = () => { if (orient.value == "landscape") return transf(H, W); const trfn = ([x, y]) => [y, -x]; return translate(transform(transf(W, H), trfn), [0, W]); }; const view = gcodeViewer_(toGcode(vplot()), { dims: [W, H], zDown }); viewer.firstChild.replaceWith(view); }; [format, orient, margin, scaleMode, scaleCustom, xalign, yalign].forEach( (input) => input.addEventListener("input", update) ); update(); const scaleDiv = html`

${scaleMode}${scaleCustom}

`; return html`${format}${orient}${margin}${scaleDiv}${xalign}${yalign}${viewer}`; }39:T4a3,const V2 = (() => { const mul = ([u, v], f) => [u * f, v * f]; const norm = ([u, v]) => Math.hypot(u, v); const unit = (angle) => [Math.cos(angle), Math.sin(angle)]; return { vec: ([x1, y1], [x2, y2]) => [x2 - x1, y2 - y1], add: ([u1, v1], [u2, v2]) => [u1 + u2, v1 + v2], sub: ([u1, v1], [u2, v2]) => [u1 - u2, v1 - v2], mul, norm, normalize: (v2) => mul(v2, 1 / norm(v2)), seg: (pt1, pt2) => [pt1, pt2], middle: ([x1, y1], [x2, y2]) => [(x1 + x2) / 2, (y1 + y2) / 2], hsym: ([u, v]) => [-u, v], vsym: ([u, v]) => [u, -v], atan: ([u, v]) => Math.atan2(v, u), rot: ([dx, dy], angle) => { const [cos, sin] = unit(angle); return [dx * cos + dy * sin, -dx * sin + dy * cos]; }, rotL: ([u, v]) => [-v, u], rotR: ([u, v]) => [v, -u], polar: (angle, d) => mul(unit(angle), d), dot: ([u1, v1], [u2, v2]) => u1 * u2 + v1 * v2, prod: ([u1, v1], [u2, v2]) => u1 * v2 - u2 * v1, unit, arcCenter: ([u, v], angle) => { const r = 1 / (2 * Math.tan(angle / 2)); const center = [u / 2 + r * v, v / 2 - r * u]; const radius = norm(center); return [center, radius]; } }; })()3a:[] 31:{"id":"207542ab22001d21","slug":"pivot-format-for-plotter-experiments","title":"Pivot format for plotter experiments","thumbnail":"1c8e808940e9888765b29820bdbb6c7c2ac084264152c0fa1a44575e0685abd1","access_level":"public","create_time":"$D2024-03-30T08:46:46.241Z","update_time":"$D2026-09-02T16:18:20.536Z","view_time":null,"first_public_time":"$D2024-03-30T22:07:04.583Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"cf2a83be2759e071","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":"starter_2024"},"version":1808,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null}],"members":[{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null,"role":"editor"},{"type":"team","id":"cf2a83be2759e071","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":"starter_2024","role":"editor"}],"comments":[{"id":"2189854ee0300d20","reply_to_id":null,"content":"TODOs:\n- links between rounded rects\n- improve ellipse arc approximation with segments\n- approximate ellipses with arcs\n - https://www.geometrictools.com/Documentation/ApproximateEllipse.pdf\n - https://discourse.mcneel.com/t/approximating-an-ellipse-with-4-or-8-arcs/207953\n- adjust dash params to cycle nicely\n- approximate Bézier curves with segments/arcs","create_time":"$D2025-11-10T23:17:55.009Z","update_time":"$D2025-11-27T10:05:06.492Z","resolved":false,"user":{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"43e6ecff4165448a","slug":"pen-plotter","title":"Pen plotter","owner":{"id":"cf2a83be2759e071","login":"ehouais","name":"Philippe Deschaseaux"}},"type":"notebook","body":{"title":"Pivot format for plotter experiments","cells":[{"id":0,"value":"# Pivot format for plotter experiments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":577,"value":"const zDown = 8.2","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"const translate = (plot, vector) =>\n Plot()\n .move(...vector)\n .chain(plot)","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"const polyline = (pts, closed) => {\n if (closed) pts.push(pts[0]);\n const p = Plot().move(...pts[0]);\n for (let i = 0; i < pts.length - 1; i++)\n p.draw(...V2.vec(pts[i], pts[i + 1]));\n return p;\n}","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"const transform = (plot, fn) => {\n const tp = Plot();\n for (const cmd of plot) {\n if (cmd.mv) tp.move(...fn(cmd.mv));\n else {\n const [dx, dy, angle] = cmd.dr;\n tp.draw(...fn([dx, dy]), angle);\n }\n }\n return tp;\n}","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"const scale = (plot, ratio) => {\n if (ratio == 1) return Plot().chain(plot);\n const [rx, ry] = Array.isArray(ratio) ? ratio : [ratio, ratio];\n return transform(plot, ([x, y]) => [rx * x, ry * y]);\n}","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"const vflip = (plot) => transform(plot, ([x, y]) => [x, -y])","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"$34","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"const graph = (plot, { vertices, edges }) => {\n const intersect = (vec, d) => V2.polar(V2.atan(vec), d);\n const line = (pts) => polyline(pts.map(V2.vsym));\n const { width, height } = getBbox(Plot().insert(...edges.map(line)));\n const radius = Math.min(width, height) / 50;\n const lines = edges.map(([pt1, pt2]) => {\n const vec = intersect(V2.vec(pt1, pt2), radius);\n return line([V2.add(pt1, vec), V2.sub(pt2, vec)]);\n });\n plot.insert(...lines);\n vertices.forEach(([i, j]) => plot.push().move(i, -j).circle(radius).pop());\n}","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"$35","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"import { Segments } from \"observable:@ehouais/segment-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"const optimize = (plot) => {\n const add = ([x, y], [dx, dy]) => [x + dx, y + dy];\n const vec = ([x1, y1], [x2, y2]) => [x2 - x1, y2 - y1];\n const zeroish = (val) => Math.abs(val) < 1e-5;\n const S = Segments(1e-5);\n let current = [0, 0];\n const metrics = { before: { mv: 0, dr: 0 }, after: { mv: 0, dr: 0 } };\n for (const { dr, mv } of plot) {\n metrics.before[dr ? \"dr\" : \"mv\"] += Math.hypot(...(dr || mv).slice(0, 2));\n const next = add(current, dr || mv);\n if (dr && !dr[2]) S.addSegment([current, next]);\n current = next;\n }\n const paths = S.getPaths(0.01);\n const op = Plot().push();\n current = [0, 0];\n paths.forEach((path) => {\n const v = vec(current, (current = path.shift()));\n op.move(...v);\n metrics.after.mv += Math.hypot(...v);\n path.forEach((pt) => {\n const v = vec(current, (current = pt));\n op.draw(...v);\n metrics.after.dr += Math.hypot(...v);\n });\n });\n //console.log(metrics);\n return op.pop();\n}","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"const getBbox = (plot) => {\n const bounds = MultiRange(2);\n const stack = [];\n let pos = [0, 0];\n for (const { mv, dr } of plot) {\n if (dr) {\n bounds.expand(pos);\n pos = V2.add(pos, dr);\n bounds.expand(pos);\n } else if (mv) pos = V2.add(pos, mv);\n }\n const [[xmin, xmax], [ymin, ymax]] = bounds.bounds();\n return { x: xmin, y: ymin, width: xmax - xmin, height: ymax - ymin };\n}","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"const toSVG = (plot, nbd = 4) => {\n const { sin, hypot, abs } = Math;\n const cmds = [];\n let first = true;\n let [x, y] = [0, 0];\n const r = (val) => round(val, nbd);\n for (const { mv, dr } of plot) {\n if (first) {\n if (!mv) cmds.push(`m${r(x)},${r(y)}`);\n first = false;\n }\n if (mv) {\n const [dx, dy] = mv;\n cmds.push(`m${r(dx)},${r(dy)}`);\n (x += dx), (y += dy);\n } else {\n const [dx, dy, angle] = dr;\n if (angle == \"+\" || angle == \"-\") {\n const flag = angle == \"+\" ? 0 : 1;\n cmds.push(`a${Math.abs(dx)} ${Math.abs(dy)} 0 0,${flag} ${[dx, dy]}`);\n } else if (angle) {\n const radius = hypot(dx, dy) / (2 * sin(deg2rad(angle / 2)));\n cmds.push(`a${radius} ${radius} 0 0 ${angle > 0 ? 0 : 1} ${[dx, dy]}`);\n } else cmds.push(`l${r(dx)},${r(dy)}`);\n (x += dx), (y += dy);\n }\n }\n return SVG.path(cmds.join(\"\"));\n}","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$36","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$37","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"const plot = (() => {\n const p = Plot();\n p.text([\"I\"], {\n scale: [0.76, 1],\n expand: { precision: 10, dist: 1.5, simplification: 0.1 }\n });\n return p;\n})()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"viewer([width, 500]).view(plot, { margin: 0.2 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"$38","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1357,"value":"const deg2rad = (deg) => deg * (Math.PI / 180)","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"const round = (value, nbDecimals) => {\n const pow = Math.pow(10, nbDecimals);\n return Math.round((value + Number.EPSILON) * pow) / pow;\n}","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import { SVG } from \"observable:@ehouais/svg-utility\"","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"import { zoomAndPanSvg } from \"observable:@ehouais/zoom-and-pan\"","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"import { MultiRange } from \"observable:@ehouais/utils\"","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"import { str2paths, bounds } from \"observable:@ehouais/text-to-plotter-compatible-svg\"","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"import { Gcode, viewer as gcodeViewer_ } from \"observable:@ehouais/g-code-tools\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"import { intersectRect } from \"observable:@ehouais/segment-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"$39","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"const ellipseArc = (center, [rx, ry], [startAngle, endAngle], nbSegments = 20) => {\n const step = (endAngle - startAngle) / nbSegments;\n return [...Array(nbSegments)].map((_, i) => {\n const [cos, sin] = V2.unit(startAngle + (i + 1) * step);\n return V2.add(center, [rx * cos, -ry * sin]);\n });\n}","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"import { expand } from \"observable:@ehouais/path-expansion-using-marching-squares\"","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"import { hatch } from \"observable:@ehouais/bitmap-to-lines-using-marching-squares-and-hatching\"","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"2","titling":"auto"}} 32:"$31:body"