29:null 2a:["$","title",null,{"children":"KitKit | Forrest O. | Observable"}] 2f:T1004,viewof layout = { const devicePixelRatio = window.devicePixelRatio || 1; const w = width * devicePixelRatio; const h = Math.floor((w * 2) / 4); const canvas = DOM.canvas(w, h); canvas.style.width = w / devicePixelRatio + "px"; canvas.style.height = h / devicePixelRatio + "px"; const context = canvas.getContext("2d"); let pixelsPerUnit = 12 * devicePixelRatio; // Local state let mouseX = 0; let mouseY = 0; let startX = null; let startY = null; const initialState = [ [1, 1, true, 35], [1, 22, true, 35], [1, 1, false, 21], [23, 1, false, 21], [36, 1, false, 21], [23, 14, true, 13], [28, 14, false, 8], [23, 17, true, 5], [26, 14, false, 3] ]; let state = null; setState(initialState); function makeWall(startX, mouseX, startY, mouseY) { const dX = Math.abs(mouseX - startX); const dY = Math.abs(mouseY - startY); const horizontal = dX > dY; return horizontal ? [startX < mouseX ? startX : mouseX, startY, horizontal, dX] : [startX, startY < mouseY ? startY : mouseY, horizontal, dY]; } function drawWall(wall) { if (wall[HORIZONTAL]) { context.strokeRect( wall[X] * pixelsPerUnit + 0 * devicePixelRatio, wall[Y] * pixelsPerUnit + 0 * devicePixelRatio, (wall[SIZE] + 1) * pixelsPerUnit + 1 * devicePixelRatio, pixelsPerUnit + 1 * devicePixelRatio ); } else { context.strokeRect( wall[X] * pixelsPerUnit + 0 * devicePixelRatio, wall[Y] * pixelsPerUnit + 0 * devicePixelRatio, pixelsPerUnit + 1 * devicePixelRatio, (wall[SIZE] + 1) * pixelsPerUnit + 1 * devicePixelRatio ); } } function draw() { context.clearRect(0, 0, w, h); // Grid let x = 0; // Math.floor(pixelsPerUnit / 2); let y = 0; // Math.floor(pixelsPerUnit / 2); while (x < w) { while (y < h) { context.fillRect(x, y, 1 * devicePixelRatio, 1 * devicePixelRatio); y += pixelsPerUnit; } x += pixelsPerUnit; y = 0; // Math.floor(pixelsPerUnit / 2); } // Walls state.forEach(drawWall); // Mouse context.strokeRect( mouseX * pixelsPerUnit + 0 * devicePixelRatio, mouseY * pixelsPerUnit + 0 * devicePixelRatio, pixelsPerUnit + 1 * devicePixelRatio, pixelsPerUnit + 1 * devicePixelRatio ); // Preview if (startX && (mouseX !== startX || mouseY !== startY)) { context.strokeS; context.setLineDash([devicePixelRatio, devicePixelRatio]); drawWall(makeWall(startX, mouseX, startY, mouseY)); context.setLineDash([]); } } draw(); const rafDraw = () => requestAnimationFrame(draw); function setMouse(e) { const rect = canvas.getBoundingClientRect(); mouseX = Math.floor( ((e.clientX - rect.left) / pixelsPerUnit) * devicePixelRatio ); mouseY = Math.floor( ((e.clientY - rect.top) / pixelsPerUnit) * devicePixelRatio ); rafDraw(); } canvas.addEventListener("mousemove", setMouse); function pushWallToState(wall) { const existingIndex = state.findIndex( w => w[X] === wall[X] && w[Y] === wall[Y] && w[HORIZONTAL] === wall[HORIZONTAL] && w[SIZE] === wall[SIZE] ); if (existingIndex === -1) { // Add new wall const newState = state.slice(); newState.push(wall); return newState; } else { // Remove existing wall const newState = state.slice(); newState.splice(existingIndex, 1); return newState; } return state; } // Start line function click(e) { if (startX) { if (startX !== mouseX || startY !== mouseY) { setState(pushWallToState(makeWall(startX, mouseX, startY, mouseY))); } startX = null; startY = null; } else { startX = mouseX; startY = mouseY; } rafDraw(); } canvas.addEventListener("click", click); function setState(newState) { state = newState; canvas.value = state; canvas.dispatchEvent(new CustomEvent("input")); } return canvas; }30:T574,drawing = { function stick(w, h) { let s = new makerjs.models.Rectangle(unit * w, unit * h); const tab = new makerjs.models.RoundRectangle(unit, unit * 2, tabRound); const row = makerjs.layout.cloneToRow(tab, Math.ceil(h / 2) - 1); const inset = { type: "line", origin: [unit * (w + 1), (unit * 3) / 2], end: [unit * (w + 1), unit * h - (unit * 3) / 2] }; const combIn = makerjs.layout.childrenOnPath(row, inset); s = makerjs.model.combineUnion(s, combIn); // return s; const tabOut = new makerjs.models.RoundRectangle(unit, unit * 2, tabRound); const rowOut = makerjs.layout.cloneToRow(tabOut, Math.ceil(h / 2)); const lineOut = { type: "line", origin: [unit, unit / 2], end: [unit, unit * h - unit / 2] }; const combOut = makerjs.layout.childrenOnPath(rowOut, lineOut); s = makerjs.model.combineUnion(s, combOut); return s; } const model = { models: { t: makerjs.model.move(stick(24, thick), [unit, 0]), b: makerjs.model.move(stick(24, thick), [unit * 26, 0]), l: makerjs.model.move(stick(24, thick), [unit, unit * thick]), r: makerjs.model.move(stick(24, thick), [unit * 26, unit * thick]) }, units: unitType }; makerjs.model.originate(model); makerjs.model.simplify(model); const svg = makerjs.exporter.toSVG(model); return html`${svg}`; }31:[] 2d:{"id":"9a1587c3253575d7","slug":"kitkit","title":"KitKit","thumbnail":"6223e9a039e5fc9dabb4bd8a364153e97310f29d03797012767e42cd4e042b9b","access_level":"public","create_time":"$D2018-10-30T23:35:17.062Z","update_time":"$D2018-11-11T16:33:12.793Z","view_time":null,"first_public_time":"$D2018-11-02T18:21:08.098Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":"starter_2024"},"version":945,"publish_version":945,"role":null,"authored":false,"authors":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null}],"members":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"KitKit","cells":[{"id":0,"value":"md`# KitKit\n\n### ⚠️ This is WIP\n\n.\n\n.\n\n.\n\n⧉ Custom tiny shelf / case divider generator\n\n_(Testing Maker.js in Observable)_\n\nOpen design, with inspiration from [opendesk.cc](https://www.opendesk.cc/). If you sell things made from this design, may I suggest a “design royalty” or tip of 8%, to encourage future development. 🙇‍♂️\n\n---\n\n $\"Creative$
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"X = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"Y = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"HORIZONTAL = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"SIZE = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"layout","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"md`## App state ☝️\n\\`layout\\` is the simplest representation of the design. \\`derivedState\\` 👇 calculates the intersections of each piece, and is generated reactively, when \\`layout\\` changes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"derivedState = \"WIP\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"md`We're basing the default “unit” dimensions on 1/8\" cardboard or plywood, so cutting a 1 unit by 1 unit square would make a 1/8 x 1/8 x 1/8\" cube.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"makerjs.unitType","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof unitType = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"svgLengthType = {\n return { cm: 6, foot: undefined, inch: 8, m: undefined, mm: 7 }[unitType];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"unit = 1 / 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"tabRound = unit / 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"thick = 9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"md`## Laser preview 👓\nA preview of Maker.js' path simplification, for efficient cutting/plotting:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"viewof timeStart = {\n const b = html``;\n b.onclick = () => (b.value = Date.now());\n b.click();\n return b;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"timeCheck = {\n const check = Math.min(1, (now - timeStart) / 10000);\n if (progress !== check) {\n mutable progress = check;\n return true;\n }\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"mutable progress = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"laser = {\n const laser = drawing.cloneNode(true);\n const path = laser.querySelector(\"path\");\n const circle = svg``;\n laser.appendChild(circle);\n return laser;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"circle = laser.querySelector(\"circle\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"path = laser.querySelector(\"path\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"pathLength = path.getTotalLength()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"pathLengthPx = {\n const l = laser.createSVGLength();\n l.newValueSpecifiedUnits(svgLengthType, pathLength);\n l.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);\n return l.valueInSpecifiedUnits;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"laserAnimation = {\n // const percent = Math.min(1, (now - startTime) / 10000);\n const point = path.getPointAtLength(progress * pathLength);\n circle.setAttribute(\"cx\", point.x);\n circle.setAttribute(\"cy\", point.y);\n // The following stroke animation doesn't work, because pathLength is inches (??)\n // path.style.strokeDasharray = pathLengthPx;\n // path.style.strokeDashoffset = -progress * pathLengthPx;\n return progress;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"md`## Libs 📚\n* SVG: [SVGLength](https://developer.mozilla.org/en-US/docs/Web/API/SVGLength)\n* Maker.js: [docs](https://maker.js.org/docs/#content)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"makerjs = require(\"https://bundle.run/makerjs@0.12.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2e:"$2d:body"