31:Te21,function wire(x,y,t,z) { const { abs, sin, cos, PI } = Math; const round = v => typeof v === 'number' ? Math.round(v * 1000) / 1000 : v; const TwoPi = 2 * PI; const paths = [] let d, dash, dasharray, path init(x,y,t,z) function init(_x, _y, _t=0, _z) { d = ['M', x=_x, y=_y] t = _t * TwoPi dash = { z: _z ?? dash?.z ?? 0, l: 0, } dasharray = [dash] const id = Math.random() .toString(36).substring(2) paths.push(path = {id, d, dasharray}) } function dz(_z) { if (dash.l > 0) { dash = { z: dash.z, l: 0 } dasharray.push(dash) } dash.z += _z } function draw(l, ...ds) { dash.l += l d.push(...ds) } const forward = l => draw(l, 'L', (x += l * cos(t)), (y += l * sin(t)) ) function arc(frac, r, sign) { const rad = frac * TwoPi const t0 = t t += rad * sign; draw(rad * r, 'A', r, r, 0, +(frac > 0.5), +(sign === 1), x += r * (sin(t) - sin(t0)) * sign, y += r * (cos(t0) - cos(t)) * sign ) } function compose(z, path) { const classes = ['wire'] const { id, dasharray, start, end } = path if (start && dasharray.at(0).z === z) classes.push('has-start-' + start) if (end && dasharray.at(-1).z === z) classes.push('has-end-' + end) const dashes = [] let on = true; let dist = 0 for (const bit of dasharray) { const active = bit.z === z; if (active === on) { dist += bit.l } else { dashes.push(dist); dist = bit.l; on = active; } } // omit if whole path is hidden if (dashes.length <= 1 && dashes[0] === 0) return [] // account for rounding precision by extending last segment dashes.push(dist + 1) return { id, classes, dashes } } function render(color="red") { const defs = paths.map(p => ({ id: p.id, d:p.d.map(round).join(' ') })) // distinct z values, ascending const zs = Array.from(new Set( paths.flatMap(p => p.dasharray).map(d => d.z) )).sort((a, b) => a - b); // compose paths into dashes per z, // two variants each, dasharray // extended to prevent seams const composed = cross(zs, paths, compose).flat() const layers = [['shell', 0.5],['core', 1]] const dashArrays = cross( composed, layers, (it, [type, margin]) => ({ href: '#' + it.id, class: [type, ...it.classes] .join(' '), 'stroke-dasharray': extend(it.dashes, margin) .map(round) .join(' '), })) return f` ${defs.map(p => f``)} ${dashArrays.map(array => f`` )} ` } const actions = { paths, draw, startTip: () => path.start = 'tip', endTip: () => path.end = 'tip', over: () => dz(1), under: () => dz(-1), f: forward, cw: (frac,r=10) => arc(frac, r, 1), ccw:(frac,r=10) => arc(frac, r, -1), tele: init, svg: render, } const terminals = ['svg','paths'] const proxy = new Proxy({}, { get(_, prop) { if (!(prop in actions)) return undefined; const action = actions[prop] if (typeof action != 'function') return action if (terminals.includes(prop)) return action if (action.length === 0) { action() return proxy } return (...args) => { action(...args) return proxy }; } }); return proxy }32:T627,template56 = (...contents) => htl.svg``33:T503,template48 = (...contents) => htl.svg``34:[{"id":"024c1e9ac56850e761995c3a00dfa965ce93f16d66733a0d2a15b00f004f3d5efa41dc525a13c4a0d4f76b15cb02750d7709dd0540c0f0dc13a09f506b9f51ca","href":"https://static.observableusercontent.com/files/024c1e9ac56850e761995c3a00dfa965ce93f16d66733a0d2a15b00f004f3d5efa41dc525a13c4a0d4f76b15cb02750d7709dd0540c0f0dc13a09f506b9f51ca","name":"new-green-wire-x56.png","type":"image/png","lastModified":1786047437220.956,"size":1605},{"id":"94ad73e20b28fdaad7bdbe459ae01fe9306b2f38b520796c6309befe14acc56a9ccd016f989ad00577ab9e4f109b887476c758c266d6084c267387b2c3c15c50","href":"https://static.observableusercontent.com/files/94ad73e20b28fdaad7bdbe459ae01fe9306b2f38b520796c6309befe14acc56a9ccd016f989ad00577ab9e4f109b887476c758c266d6084c267387b2c3c15c50","name":"new-red-wire-x24.png","type":"image/png","lastModified":1786047437220.742,"size":1098},{"id":"1a5ad5a93fa0bc1eb81f1da41eb7d5c51db3b3ee9407702b1f7d91dd81c41397dd94da0d4145a646094ae9444d2435324e69a7def982c614d4d81618900bcaad","href":"https://static.observableusercontent.com/files/1a5ad5a93fa0bc1eb81f1da41eb7d5c51db3b3ee9407702b1f7d91dd81c41397dd94da0d4145a646094ae9444d2435324e69a7def982c614d4d81618900bcaad","name":"new-green-wire-x24.png","type":"image/png","lastModified":1786047437218.935,"size":1081},{"id":"7d768833b9b852121d788a605821f6375db7061ddbf3a9ecea22729b69e83ca3c5fd2d9d88e8d3624dc96c5e64f0c00e73d88d39b184763f6fdb3da9096996be","href":"https://static.observableusercontent.com/files/7d768833b9b852121d788a605821f6375db7061ddbf3a9ecea22729b69e83ca3c5fd2d9d88e8d3624dc96c5e64f0c00e73d88d39b184763f6fdb3da9096996be","name":"new-red-wire-x56.png","type":"image/png","lastModified":1786047437215.071,"size":1475}] 2f:{"title":"Wire Drawing Toolbox","cells":[{"id":0,"value":"# Wire Drawing Toolbox","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"beforeAfter({\n before: grid(V()),\n after: await pixelPreview(template(V()))\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"V = () =>\n wire(14,16, S)\n .startTip\n .f(20)\n .ccw(.42, 6)\n .f(19.35)\n .ccw(.08, 4)\n .under\n .ccw(1/4, 4)\n .under\n .ccw(1/2, 4)\n .endTip\n .f(10.925)\n .svg(\"green\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"xml(template(V()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"beforeAfter({\n before: originals.red[56],\n after: await pixelPreview(template(R()), 56, 56, 1),\n beforeStyle: \"image-rendering: pixelated;\",\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"{\n const el = beforeAfter({\n before: originals.red[24],\n after: await pixelPreview(template(R()), 24, 24, 1, \"#flush\"),\n beforeStyle: \"image-rendering: pixelated;\",\n })\n el.style.setProperty(\"background-image\", `url(\"${mipBg}\")`);\n el.style.setProperty(\"background-size\", \"100%\");\n return el\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"beforeAfter({\n before: originals.red[24],\n after: await pixelPreview(template(R()), 24, 24, 1, \"#xywh=6,4,48,48\"),\n beforeStyle: \"image-rendering: pixelated;\",\n })\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"R = () => wire(16,40,N)\n .startTip\n .f(16).cw(.5)\n .under.cw(.5)\n .tele(28,32,S)\n .under\n .ccw(.25)\n .endTip\n .svg(\"red\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"beforeAfter({\n before: originals.green[56],\n after: await pixelPreview(template(G()), 56, 56, 1),\n beforeStyle: \"image-rendering: pixelated;\",\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"beforeAfter({\n before: originals.green[24],\n after: await pixelPreview(template(G()), 24, 24, 1, \"#flush\"),\n beforeStyle: \"image-rendering: pixelated;\",\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"beforeAfter({\n before: originals.green[24],\n after: await pixelPreview(template(G()), 24, 24, 1, \"#xywh=4,4,48,48\"),\n beforeStyle: \"image-rendering: pixelated;\",\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"originals = ({\n red: {\n 24: await FileAttachment(\"new-red-wire-x24.png\").url(),\n 56: await FileAttachment(\"new-red-wire-x56.png\").url()\n },\n green: {\n 24: await FileAttachment(\"new-green-wire-x24.png\").url(),\n 56: await FileAttachment(\"new-green-wire-x56.png\").url()\n },\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"G = () => wire(16,42,E)\n .startTip\n .over\n .f(8).ccw(.25).f(8).ccw(.5)\n .under.ccw(.5)\n .tele(32,26,E)\n .endTip\n .ccw(.25)\n .svg(\"green\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"## Constants","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"red = \"#E20000\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"green = \"#208C00\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"black = \"#1D1D1D\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"E = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"S = 1/4","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"W = 1/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"N = 3/4","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"## Main drawing code","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"## Rendering","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"import {beforeAfter} from \"@supermikal/before-after-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"f = htl.svg.fragment","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"function sideBySideFlex(...nodes) {\n return htl.html`

${nodes.map(n => htl.html.fragment`

${n}

`)}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"async function rasterizeSVG(svgElement, width = 56, height = 56, mips = 0, fragment = \"\") {\n const svgString = xml(svgElement);\n\n const dataUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgString) + fragment;\n\n const img = new Image();\n img.crossOrigin = 'anonymous'; // Prevents canvas staining\n img.src = dataUrl;\n await img.decode()\n \n const canvas = document.createElement('canvas');\n canvas.width = extendedWidthForMips(width, mips);\n canvas.height = height;\n const ctx = canvas.getContext('2d');\n ctx.imageSmoothingEnabled = true;\n ctx.imageSmoothingQuality = 'high';\n\n let offsetX = 0;\n while (mips >= 0) {\n ctx.drawImage(img, offsetX, 0, width, height);\n offsetX += width;\n width /= 2;\n height /= 2;\n mips--;\n }\n\n return canvas.toDataURL('image/png');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"async function pixelPreview(svgElement, width = 56, height = 56, mips = 0, fragment = \"\") {\n return htl.html`

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":530,"value":"template = template56","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"grid = grid40","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"grid40 = (...contents) => template(f`\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n\n \n \n \n`, contents)","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"grid48 = (...contents) => template48(f`\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n`, contents)","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"function extend (arr, add) {\n const l = arr.length;\n if (l <= 1) return arr;\n const last = l - 1\n const out = arr.map((n,i) => n\n + (i % 2 == 0 ? add : -add)\n * ((i==0||i==last) ? 1 : 2)\n );\n if (arr[0] === 0) {\n out[0] = 0;\n out[1] += add\n };\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"cross = (xs, ys, f) =>\n xs.flatMap(x => ys.map(y => f(x, y)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"xml = el => new XMLSerializer().serializeToString(el)","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"extendedWidthForMips = (width, mips) => width * (2 - 1 / 2 ** mips)","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"[0,1,2,3].map(mips => extendedWidthForMips(56, mips))","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"mipBg = rasterizeSVG(htl.svg``, 150, 100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}