2b:null 2c:["$","title",null,{"children":"Hilbert Curve SVG for Laser Cut | Peter Hartmann | Observable"}] 31:T5be,download = { let button1 = html``; button1.onclick = function () { var file_content = new XMLSerializer().serializeToString(hilbert); const uri = `data:image/svg+xml;base64,${btoa(file_content)}`; const dl = document.createElement('a'); dl.setAttribute('href', uri); dl.setAttribute('download', `hilbert-curve-${_.recursions}-${_.size}-${line_width}-${_.fill}.svg`); dl.dispatchEvent(new MouseEvent('click')); return true; } let button2 = html``; button2.onclick = function () { const dim = 2 * _.size; var file_content = new XMLSerializer().serializeToString(hilbert); const uri = `data:image/svg+xml;base64,${btoa(file_content)}`; var canvas = Object.assign(document.createElement("canvas"), { width: dim, height: dim }); var ctx = canvas.getContext("2d"); var img = new Image(dim, dim); img.src = uri; img.onload = () => { ctx.drawImage(img, 0, 0, dim, dim); const data_url = canvas.toDataURL("image/png"); const dl = document.createElement('a'); dl.setAttribute('href', data_url); dl.setAttribute('download', `hilbert-curve-${_.recursions}-${_.size}-${line_width}-${_.fill}.png`); dl.dispatchEvent(new MouseEvent('click')); return true; }; } const div = html`

`; div.append(button1); div.append(html` `); div.append(button2); return div; }32:T523,pts = { const len = 1 << (2 * _.recursions); // 4 ** r const svg_path = generate_path(_.recursions, line_width, x); const pts = []; if (_.rounded) { for (let i = 0; i < svg_path.length; i += _.step) { //pts.push(`L ${padding + svg_path[i].a.x} ${padding + svg_path[i].a.y}`); pts.push(`Q ${padding + svg_path[i].b.x} ${padding + svg_path[i].b.y} ${padding + svg_path[i].c.x} ${padding + svg_path[i].c.y}`); } if (line_width < 0.5) { // curve has no width, path is the pure curve pts.unshift(`M ${padding + svg_path[0].b.x} 0`); pts.push(`V ${svg_size}`); } else { // curve has some width, path is the stroke of the curve pts.unshift(`M ${padding + svg_path[0].a.x} ${padding + svg_path[0].a.y}`); pts.push(`Z`); } } else { for (let i = 0; i < svg_path.length; i += _.step) { pts.push(`L ${padding + svg_path[i].b.x} ${padding + svg_path[i].b.y}`); } if (line_width < 0.5) { // curve has no width, path is the pure curve pts.unshift(`M ${padding + svg_path[0].b.x} 0`); pts.push(`V ${svg_size}`); } else { // curve has some width, path is the stroke of the curve pts.unshift(`M ${padding + svg_path[0].b.x} ${padding + svg_path[0].b.y}`); pts.push(`Z`); } } return pts.join(' '); }33:[] 2f:{"id":"cf0826502ba49512","slug":"hilbert-curve-svg-for-lazer-cut","title":"Hilbert Curve SVG for Laser Cut","thumbnail":"a9f013a8622a4e38ce98bfc9142607440bc53ea99792662e63fc880cac4026e2","access_level":"public","create_time":"$D2018-11-18T05:32:06.363Z","update_time":"$D2020-01-12T07:08:11.704Z","view_time":null,"first_public_time":"$D2018-11-18T07:01:32.228Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"5c0a52d3e83418d1","login":"peter-hartmann","name":"Peter Hartmann","avatar_url":"https://avatars-next.observableusercontent.com/74843a9536569440e53295206b417c4ad0f4e8bc8e7e6a1719652c56973a3456","tier":"starter_2024"},"version":286,"publish_version":286,"role":null,"authored":false,"authors":[{"type":"individual","id":"66e2f9d5104ea5d6","login":"peter-hartmann","name":"Peter Hartmann","avatar_url":"https://avatars-next.observableusercontent.com/74843a9536569440e53295206b417c4ad0f4e8bc8e7e6a1719652c56973a3456","tier":null}],"members":[{"type":"individual","id":"66e2f9d5104ea5d6","login":"peter-hartmann","name":"Peter Hartmann","avatar_url":"https://avatars-next.observableusercontent.com/74843a9536569440e53295206b417c4ad0f4e8bc8e7e6a1719652c56973a3456","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Hilbert Curve SVG for Laser Cut","cells":[{"id":0,"value":"md`# Hilbert Curve SVG for Laser Cut`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"hilbert = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"viewof _ = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"_","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"padding = line_width / 2 + 0.05 * _.size","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"svg_size = _.size + 2 * padding","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"x = _.size / ((1 << _.recursions) - 1) // calculating the segment length x for the given recursion","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"line_width = x * _.line_width_ratio / 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"svg_path = generate_path(_.recursions, line_width, x)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"function generate_path(r, lw, w) {\n let w2 = w / 2, lw2 = lw / 2;\n let a, b, c;\n const len = 1 << (2 * r); // 4 ** r\n const path = [];\n for (let i = len; i--;) {\n let { y, x, co } = hilbertToXY(i, r);\n let { right, back } = line_offset(co, lw2 / w2);\n ({ a, b, c } = right);\n path.unshift({\n a: {\n y: y * w + a.dy * w2,\n x: x * w + a.dx * w2,\n },\n b: {\n y: y * w + b.dy * w2,\n x: x * w + b.dx * w2,\n },\n c: {\n y: y * w + c.dy * w2,\n x: x * w + c.dx * w2,\n },\n co: { a, b, c },\n });\n if (lw <= 0.5) continue;\n ({ a, b, c } = back);\n path.push({\n a: {\n y: y * w + a.dy * w2,\n x: x * w + a.dx * w2,\n },\n b: {\n y: y * w + b.dy * w2,\n x: x * w + b.dx * w2,\n },\n c: {\n y: y * w + c.dy * w2,\n x: x * w + c.dx * w2,\n },\n co: { a, b, c },\n });\n }\n return path;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"line_offset = {\n const norm = n => n > 0 ? 1 : n < 0 ? -1 : n;\n return function line_offset(co, lw2) {\n let a = co.a || { dy: 0, dx: 0 };\n let c = co.c || { dy: 0, dx: 0 };\n return {\n right: {\n a: { dy: -a.dy + lw2 * a.dx, dx: lw2 * -a.dy - a.dx },\n b: { dy: lw2 * norm(a.dx + c.dx), dx: lw2 * -norm(a.dy + c.dy) },\n c: { dy: c.dy + lw2 * c.dx, dx: lw2 * -c.dy + c.dx },\n },\n back: {\n a: { dy: c.dy - lw2 * c.dx, dx: lw2 * c.dy + c.dx },\n b: { dy: lw2 * -norm(a.dx + c.dx), dx: lw2 * norm(a.dy + c.dy) },\n c: { dy: -a.dy - lw2 * a.dx, dx: lw2 * a.dy - a.dx },\n },\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"function hilbertToXY(n, depth) {\n depth = depth - 1;\n let YX_pos = 2 * depth;\n let YX = n >> YX_pos;\n let [Y, X] = [YX >> 1, YX & 1];\n let [y, x, co, o] = [0, 0, get_origin(YX), YX];\n if (depth > 0) {\n let YX_mask = (1 << YX_pos) - 1;\n let yx_mask = (1 << depth) - 1;\n ({ y, x, co, o } = hilbertToXY(n & YX_mask, depth));\n if (false) { }\n else if (YX === 0) [y, x] = [x, y];\n else if (YX === 3) [y, x] = [x ^ yx_mask, y ^ yx_mask];\n co = calc_corner(co, YX);\n }\n y |= Y << depth;\n x |= (X ^ Y) << depth;\n return {\n y, // y coordinate\n x, // x coordinate\n co, // corner kind {a: incomming line, c: outgoing line} \n o, // orign quadrant 0-3\n };\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"get_origin = {\n const R = { dy: 0, dx: 1 }; // line right\n const D = { dy: 1, dx: 0 }; // line down\n const L = { dy: 0, dx: -1 }; // line left\n //const U = { dy: -1, dx: 0 }; // line up\n\n // a - incoming line, c: outgoing line\n const orig = [\n { a: null, c: R },\n { a: R, c: D },\n { a: D, c: L },\n { a: L, c: null },\n ];\n return function get_origin(YX) { return Object.assign({}, orig[YX]); }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"function calc_corner(c, YX) {\n if (false) { }\n else if (YX === 0) Object.entries(c).forEach(([k, v]) => v && (c[k] = { dy: v.dx, dx: v.dy }));\n else if (YX === 3) Object.entries(c).forEach(([k, v]) => v && (c[k] = { dy: -v.dx, dx: -v.dy }));\n c.a = c.a || get_origin(YX).a;\n c.c = c.c || get_origin(YX).c;\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"import { pageAnalytics } from '@peter-hartmann/page-analytics'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"pageAnalytics","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"