2e:null 2f:["$","title",null,{"children":"Building a buildings' matrix | Michael Bricknell | Observable"}] 34:T4bc3,GridGraph = { // GridGraph.js // Agnostic spatial model for VerNac DSL // L → B → A / B → R // - prefix on any token = disabled (parsed, not stamped) // // Position field: x,y,z,r — r = rotation in degrees, ground plane (Y axis) // Dimension field: wxhxz,r — r = rotation in degrees, ground plane (Y axis) // r is parsed from whichever field carries it; position r takes precedence if both present. class Node { constructor({ type, x, y, z = 0, w, h, disabled = false, params = {} }) { this.type = type; // L B A R this.x = x; // resolved absolute origin x this.y = y; // resolved absolute origin y this.z = z; // floor layer index (R: rf layer) this.w = w; this.h = h; this.disabled = disabled; // - prefix — parsed but not stamped this.params = params; // type-specific payload — includes rot (degrees) when declared this.parent = null; this.children = []; } addChild(node) { node.parent = this; this.children.push(node); return node; } } class Cell { constructor(symbol = "-") { this.symbol = symbol; // L B A R - this.visible = true; this.node = null; // owning Node (single occupant) this.nodes = []; // additive stack — R tokens only } } const RF_LAYER = "rf"; // dedicated layer index label for all R nodes // ── Facing vocabulary (Component 2) ──────────────────────────────────────── // NSEW hip — all four sides fall to eaves // NS gable — ridge runs E-W, gable ends N and S // EW gable — ridge runs N-S, gable ends E and W // N shed — single plane, high side north // S shed — single plane, high side south // E shed — single plane, high side east // W shed — single plane, high side west // C cone — circular peak, w = diameter, h = rise // F flat — solid lid, z in dimension = thickness const VALID_FACING = new Set([ "NSEW", "NS", "EW", "N", "S", "E", "W", "C", "F" ]); class GridGraph { constructor(blueprint, architect = null) { this.architect = architect; // { position: {x,y,z}, direction: {x,y,z} } this.root = null; // L node this.nodes = []; // flat list — all nodes including disabled this.grid = []; // 3D array [z][y][x] of Cell this.width = 0; this.height = 0; this.depth = 0; // number of z layers this.layers = {}; // label → z index if (blueprint) this._parse(blueprint); } // ── Parser ────────────────────────────────────────────────────────────── _parse(str) { const lines = str .trim() .split("\n") .map((l) => l.trim()) .filter(Boolean); // First line must be L const firstParts = lines[0].split(";"); if (firstParts[0] !== "L") throw new Error("Blueprint must start with L"); const posRaw0 = firstParts[1] ? firstParts[1].split(",").map(Number) : [0, 0]; const lx = posRaw0[0] ?? 0; const ly = posRaw0[1] ?? 0; // Dimension field: wxhxz,r const lotDimStr = firstParts[2] ?? ""; const lotDimCommaIdx = lotDimStr.indexOf(","); const lotDimWHZ = lotDimCommaIdx !== -1 ? lotDimStr.slice(0, lotDimCommaIdx) : lotDimStr; const lotDimR = lotDimCommaIdx !== -1 ? Number(lotDimStr.slice(lotDimCommaIdx + 1)) : null; const lotDimParts = lotDimWHZ ? lotDimWHZ.split("x").map(Number) : [0]; const lw = lotDimParts[0]; const lh = lotDimParts[1] ?? lotDimParts[0]; // rotation: position r (index 3) takes precedence over dimension r const lotPosR = posRaw0[3] != null && !isNaN(posRaw0[3]) ? posRaw0[3] : null; const lotRot = lotPosR ?? lotDimR ?? null; this.width = lw; this.height = lh; this.depth = 2; this._initLayer(0); this.layers[RF_LAYER] = 1; this._initLayer(1); const lotNode = new Node({ type: "L", x: lx, y: ly, z: 0, w: lw, h: lh, disabled: false, params: { rot: lotRot } }); this.root = lotNode; this.nodes.push(lotNode); this._stamp(lotNode); let currentZ = 0; let currentB = null; // nearest preceding B let currentA = null; // nearest preceding A for (let i = 1; i < lines.length; i++) { const line = lines[i]; // ── Floor layer label — any line without ';' ────────────────────── if (!line.includes(";")) { const label = line; if (this.layers[label] === undefined) { const nextZ = Object.keys(this.layers).length + 1; this.layers[label] = nextZ; this._initLayer(nextZ); if (nextZ >= this.depth) this.depth = nextZ + 1; } currentZ = this.layers[label]; currentB = null; currentA = null; continue; } const parts = line.split(";"); const rawType = parts[0]; // - prefix = disabled const isDisabled = rawType.startsWith("-"); const mainType = isDisabled ? rawType.slice(1) : rawType; // ── Position field: x,y,z,r ─────────────────────────────────────── const posRaw = parts[1] ? parts[1].split(",").map(Number) : [0, 0, null, null]; const posX = posRaw[0] ?? 0; const posY = posRaw[1] ?? 0; const posZ = posRaw[2] != null && !isNaN(posRaw[2]) ? posRaw[2] : null; const posR = posRaw[3] != null && !isNaN(posRaw[3]) ? posRaw[3] : null; // ── Dimension field: wxhxz,r ────────────────────────────────────── const dimStr = parts[2] ?? null; const dimCommaIdx = dimStr ? dimStr.indexOf(",") : -1; const dimWHZ = dimStr && dimCommaIdx !== -1 ? dimStr.slice(0, dimCommaIdx) : dimStr; const dimRStr = dimStr && dimCommaIdx !== -1 ? dimStr.slice(dimCommaIdx + 1) : null; const dimR = dimRStr != null ? Number(dimRStr) : null; const dimParts = dimWHZ ? dimWHZ.split("x").map(Number) : []; let w = dimParts[0] ?? 0; let h = dimParts[1] ?? w; // square shorthand: single value = wxw const dimZ = dimParts[2] ?? null; // z component of dimension (rise for R, wall height for B) // rotation: position r takes precedence over dimension r const rot = posR ?? dimR ?? null; // ── Per-type origin resolution and param extraction ─────────────── let originX, originY, nodeZ, params; if (mainType === "L") { originX = posX; originY = posY; nodeZ = 0; params = { rot }; } else if (mainType === "B") { originX = lx + posX; originY = ly + posY; nodeZ = currentZ; params = { wallH: dimZ ?? null, rot }; } else if (mainType === "A") { const base = currentB ?? lotNode; originX = base.x + posX; originY = base.y + posY; nodeZ = currentZ; params = { label: parts[3] ?? null, rot }; } else if (mainType === "R") { const base = currentB ?? lotNode; originX = base.x + posX; originY = base.y + posY; nodeZ = this.layers[RF_LAYER]; const facingRaw = parts[3]?.trim() ?? null; const facing = !facingRaw ? "NSEW" : VALID_FACING.has(facingRaw) ? facingRaw : null; const rise = facing === "C" ? h : dimZ; params = { facing, facingRaw, rise, floorZ: currentZ, vertZ: posZ ?? 0, rot }; } else { continue; } const node = new Node({ type: mainType, x: originX, y: originY, z: nodeZ, w, h, disabled: isDisabled, params }); this.nodes.push(node); // ── Tree attachment ─────────────────────────────────────────────── if (mainType === "B") { lotNode.addChild(node); currentB = node; currentA = null; } else if (mainType === "A") { const bParent = currentB ?? lotNode; bParent.addChild(node); currentA = node; } else if (mainType === "R") { const rParent = currentB ?? lotNode; rParent.addChild(node); } if (!isDisabled) this._stamp(node); } } _initLayer(z) { this.grid[z] = Array.from({ length: this.height }, () => Array.from({ length: this.width }, () => new Cell()) ); } _stamp(node) { const z = node.z; if (!this.grid[z]) this._initLayer(z); const x0 = node.x, y0 = node.y; const x1 = x0 + (node.w || 0); const y1 = y0 + (node.h || 0); for (let y = y0; y < y1 && y < this.height; y++) { for (let x = x0; x < x1 && x < this.width; x++) { if (y < 0 || x < 0) continue; const cell = this.grid[z][y][x]; if (node.type === "R") { cell.nodes.push(node); cell.symbol = "R"; } else { cell.symbol = node.type; cell.node = node; } } } } // ── Spatial queries ────────────────────────────────────────────────────── at(x, y, z = 0) { if (!this.grid[z]?.[y]?.[x]) return null; return this.grid[z][y][x]; } neighbors(x, y, z = 0, connected = 8) { const dirs4 = [ [-1, 0], [1, 0], [0, -1], [0, 1] ]; const dirs8 = [...dirs4, [-1, -1], [-1, 1], [1, -1], [1, 1]]; const dirs = connected === 8 ? dirs8 : dirs4; return dirs .map(([dy, dx]) => ({ x: x + dx, y: y + dy, cell: this.at(x + dx, y + dy, z) })) .filter((n) => n.cell !== null); } where(symbol, z = null) { const results = []; const layers = z !== null ? [z] : this.grid.map((_, i) => i); for (const zi of layers) { if (!this.grid[zi]) continue; for (let y = 0; y < this.height; y++) for (let x = 0; x < this.width; x++) if (this.grid[zi][y][x].symbol === symbol) results.push({ x, y, z: zi, cell: this.grid[zi][y][x] }); } return results; } nodesOf(type) { return this.nodes.filter((n) => n.type === type && !n.disabled); } neighborsOf(node) { const seen = new Set(); const result = []; const z = node.z; for (let y = node.y; y < node.y + node.h; y++) { for (let x = node.x; x < node.x + node.w; x++) { this.neighbors(x, y, z).forEach(({ cell }) => { if (cell.node && cell.node !== node) { const key = `${cell.node.type}:${cell.node.x},${cell.node.y}`; if (!seen.has(key)) { seen.add(key); result.push(cell.node); } } }); } } return result; } adjacent(typeX, typeY) { return this.nodesOf(typeX).filter((node) => this.neighborsOf(node).some((n) => n.type === typeY) ); } // ── Roof layer helpers ─────────────────────────────────────────────────── get rfZ() { return this.layers[RF_LAYER] ?? null; } roofNodes() { return this.nodesOf("R"); } roofMatrix(flip = false) { const z = this.rfZ; if (z === null) return null; return this.toMatrix(z, flip); } // ── Cell meta ──────────────────────────────────────────────────────────── static _faceType(sym) { if (!sym || sym === "-") return "exterior"; if (sym === "L") return "lot"; if (sym === "B") return "wall"; if (sym === "A") return "room"; return "exterior"; } static CARDINAL_TO_ZDOG_FACE = { N: "rearFace", S: "frontFace", E: "rightFace", W: "leftFace" }; static _outwardDirs(c, r, bNode) { const bcx = bNode.x + bNode.w / 2; const bcy = bNode.y + bNode.h / 2; const dx = c - bcx, dy = r - bcy; const adx = Math.abs(dx), ady = Math.abs(dy); const dirs = []; if (adx >= ady) dirs.push(dx > 0 ? "E" : "W"); if (ady >= adx) dirs.push(dy > 0 ? "S" : "N"); return dirs; } cellMeta(z = 0) { if (!this.grid[z]) return null; const get = (r, c) => { if (r < 0 || c < 0 || r >= this.height || c >= this.width) return null; return this.grid[z][r][c].symbol; }; return this.grid[z].map((row, r) => row.map((cell, c) => { if (cell.symbol !== "B") return null; const N = get(r - 1, c), S = get(r + 1, c); const E = get(r, c + 1), W = get(r, c - 1); const faces = { N: GridGraph._faceType(N), S: GridGraph._faceType(S), E: GridGraph._faceType(E), W: GridGraph._faceType(W) }; const exterior = Object.values(faces).some( (f) => f === "exterior" || f === "lot" ); const bNode = cell.node; const outward = bNode ? GridGraph._outwardDirs(c, r, bNode) : []; const outwardFaces = outward.map( (d) => GridGraph.CARDINAL_TO_ZDOG_FACE[d] ); const exteriorDirs = outward.filter((d) => { const f = faces[d]; return f === "exterior" || f === "lot"; }); return { exterior, exteriorDirs, outward, outwardFaces, faces }; }) ); } // ── Visible faces ──────────────────────────────────────────────────────── static visibleFaces(rotate) { const cosX = Math.cos(rotate.x), sinX = Math.sin(rotate.x); const cosY = Math.cos(rotate.y), sinY = Math.sin(rotate.y); function rotateNormal(nx, ny, nz) { const ny1 = ny * cosX - nz * sinX; const nz1 = ny * sinX + nz * cosX; const nx2 = nx * cosY + nz1 * sinY; return { x: nx2, y: ny1, z: -nx * sinY + nz1 * cosY }; } const normals = { top: rotateNormal(0, 1, 0), bottom: rotateNormal(0, -1, 0), south: rotateNormal(0, 0, 1), north: rotateNormal(0, 0, -1), east: rotateNormal(1, 0, 0), west: rotateNormal(-1, 0, 0) }; const visible = {}; for (const [face, n] of Object.entries(normals)) visible[face] = n.z > 0; return visible; } // ── Culling ────────────────────────────────────────────────────────────── cull(rotate) { this.resetVisibility(); const vf = GridGraph.visibleFaces(rotate); for (let zi = 0; zi < this.depth; zi++) { if (!this.grid[zi]) continue; const meta = this.cellMeta(zi); for (let y = 0; y < this.height; y++) { for (let x = 0; x < this.width; x++) { const cell = this.grid[zi][y][x]; const m = meta?.[y]?.[x]; if (cell.symbol === "B") { if (!m) { cell.visible = false; continue; } cell.visible = !!( (vf.south && m.faces.S !== "wall") || (vf.north && m.faces.N !== "wall") || (vf.east && m.faces.E !== "wall") || (vf.west && m.faces.W !== "wall") || vf.top ); } else { const nbrs = this.neighbors(x, y, zi, 4); if (nbrs.length === 4 && nbrs.every((n) => !n.cell.visible)) cell.visible = false; } } } } } // ── Visibility ─────────────────────────────────────────────────────────── resetVisibility() { for (const layer of this.grid) { if (!layer) continue; for (const row of layer) for (const cell of row) cell.visible = true; } } applyVisibility(visibilityMap) { for (const { x, y, z, visible } of visibilityMap) { const cell = this.at(x, y, z); if (cell) cell.visible = visible; } } visibleWhere(symbol, z = null) { return this.where(symbol, z).filter(({ cell }) => cell.visible); } // ── Matrix export ──────────────────────────────────────────────────────── toMatrix(z = 0, flip = false) { if (!this.grid[z]) return null; const rows = this.grid[z].map((row, y) => row.map((cell, x) => ({ x, y, z, symbol: cell.symbol, visible: cell.visible, node: cell.node, nodes: cell.nodes })) ); return flip ? rows.slice().reverse() : rows; } toMatrices(flip = false) { return this.grid.map((_, z) => this.toMatrix(z, flip)).filter(Boolean); } // ── Serialization ──────────────────────────────────────────────────────── print(z = 0) { if (!this.grid[z]) return `no layer at z=${z}`; return this.grid[z] .map((row) => row.map((cell) => (cell.visible ? cell.symbol : "·")).join("") ) .join("\n"); } toJSON() { function nodeToObj(n) { return { type: n.type, x: n.x, y: n.y, z: n.z, w: n.w, h: n.h, disabled: n.disabled, params: n.params, children: n.children.map(nodeToObj) }; } return { architect: this.architect, width: this.width, height: this.height, depth: this.depth, layers: this.layers, tree: nodeToObj(this.root) }; } } return GridGraph; }35:T507e,zRender = (graph, opts = {}) => { const CELL = opts.cell ?? 12; const WALL_H = opts.wall ?? 54 * 3; const ISO = opts.iso ?? { x: -1, y: 0.6, z: 0 }; const W = opts.w ?? 560 * 2; const H = opts.h ?? 420 * 2; const annotate = opts.annotate ?? []; // array of symbol strings — e.g. ["L","B","A"] const coords = opts.coords ?? false; // show coordinate text alongside dots const _t = { lot: "#3a5a3a", wall: "#2d4a6a", interior: "#c8b89a", floor: "#b8a88a", roof: "#4a3a2a", stroke: "#000000", ...opts.theme }; const roofNodes = graph.roofNodes(); const cellHasRoof = (col, row) => roofNodes.some( (r) => col >= r.x && col < r.x + r.w && row >= r.y && row < r.y + r.h ); const theme = { ..._t, lotSide: opts.theme?.lotSide ?? d3.color(_t.lot).darker(0.5).formatHex(), wallInterior: opts.theme?.wallInterior ?? d3.color(_t.wall).darker(0.4).formatHex(), roofSide: opts.theme?.roofSide ?? d3.color(_t.roof).darker(0.5).formatHex() }; // Default rise when not declared — renderer's choice (Component 2: "renderer decides") const DEFAULT_RISE_RATIO = 0.4; // rise = 40% of the shorter plan dimension const lotW = graph.width; const lotH = graph.height; const offX = -(lotW * CELL) / 2; const offZ = -(lotH * CELL) / 2; // World-space helpers const cx = (col) => offX + col * CELL + CELL / 2; const cz = (row) => offZ + (lotH - 1 - row) * CELL + CELL / 2; const floorBaseY = (fi) => -(fi * WALL_H); // Degrees → radians const deg2rad = (d) => (d * Math.PI) / 180; const svg = DOM.svg(W, H); const illo = new Zdog.Illustration({ element: svg, dragRotate: false, rotate: ISO }); // ── Root anchor — carries optional lot-level rotation ─────────────────── const lotRot = graph.root?.params?.rot ?? null; const root = new Zdog.Anchor({ addTo: illo, rotate: lotRot != null ? { y: deg2rad(lotRot) } : {} }); // Floor z-indices in ascending order, rf excluded const floorZIndices = [ 0, ...Object.entries(graph.layers) .filter(([label]) => label !== "rf") .sort((a, b) => a[1] - b[1]) .map(([, z]) => z) ]; // ── Build per-node wall height map ────────────────────────────────────── const wallHOf = new Map(); for (const bNode of graph.nodesOf("B")) { wallHOf.set( bNode, bNode.params.wallH != null ? bNode.params.wallH * CELL : WALL_H ); } // ── Build per-B anchor map — each B gets its own Anchor for rotation ──── // Anchor is centered on the B footprint center, at ground level. // All geometry belonging to that B (walls + roof) is added to its anchor. const bAnchorOf = new Map(); for (const bNode of graph.nodesOf("B")) { const bRot = bNode.params?.rot ?? null; const bcx = offX + (bNode.x + bNode.w / 2) * CELL; const bcz = offZ + (lotH - (bNode.y + bNode.h / 2)) * CELL; const anchor = new Zdog.Anchor({ addTo: root, translate: { x: bcx, y: 0, z: bcz }, rotate: bRot != null ? { y: deg2rad(bRot) } : {} }); bAnchorOf.set(bNode, anchor); } // Resolve the Zdog parent for a cell — B anchor if available, else root const anchorFor = (node) => { if (node?.type === "B") return bAnchorOf.get(node) ?? root; return root; }; // cx/cz relative to a B anchor's local origin const lcx = (col, bNode) => (col - (bNode.x + bNode.w / 2) + 0.5) * CELL; const lcz = (row, bNode) => -(row - (bNode.y + bNode.h / 2) + 0.5) * CELL; // ── Floor / wall cell loop ─────────────────────────────────────────────── for (const zi of floorZIndices) { const matrix = graph.toMatrix(zi, false); const meta = graph.cellMeta(zi); if (!matrix) continue; const floorIndex = floorZIndices.indexOf(zi); const baseY = floorBaseY(floorIndex); for (let row = 0; row < lotH; row++) { for (let col = 0; col < lotW; col++) { const cellData = matrix[row][col]; if (!cellData) continue; const { symbol, node } = cellData; if (symbol === "-") continue; const m = meta?.[row]?.[col]; if (symbol === "B") { const wh = wallHOf.get(node) ?? WALL_H; const base = d3.color(m?.exterior ? theme.wall : theme.wallInterior); const anchor = anchorFor(node); new Zdog.Box({ addTo: anchor, width: CELL, depth: CELL, height: wh, translate: { x: lcx(col, node), y: baseY - wh / 2, z: lcz(row, node) }, color: base.formatHex(), frontFace: base.formatHex(), rearFace: base.formatHex(), leftFace: base.formatHex(), rightFace: base.darker(0.5).formatHex(), topFace: cellHasRoof(col, row) ? false : base.brighter(0.5).formatHex(), bottomFace: base.formatHex() }); } else if (symbol === "A") { continue; } else { // Lot tile — no rotation, added to root new Zdog.Box({ addTo: root, width: CELL, depth: CELL, height: 1, translate: { x: cx(col), y: 1, z: cz(row) }, color: theme.lot, topFace: theme.lotSide, frontFace: false, rearFace: false, leftFace: false, rightFace: false, bottomFace: false }); } } } } // ── Roof pass — Component 2 facing vocabulary ──────────────────────────── for (const rNode of graph.nodesOf("R")) { const { facing, rise: riseRaw, floorZ, vertZ } = rNode.params ?? {}; if (!facing) { console.warn( `R at ${rNode.x},${rNode.y}: unrecognized facing "${rNode.params.facingRaw}" — skipped` ); continue; } const fi = floorZIndices.indexOf(floorZ ?? 0); const parentB = rNode.parent?.type === "B" ? rNode.parent : null; const eaveH = parentB?.params?.wallH != null ? parentB.params.wallH * CELL : WALL_H; const baseY = -((fi >= 0 ? fi : 0) * WALL_H) - eaveH - (vertZ ?? 0) * CELL; // Determine which anchor this roof belongs to const rAnchor = parentB ? bAnchorOf.get(parentB) ?? root : root; const wx0 = offX + rNode.x * CELL; const wx1 = offX + (rNode.x + rNode.w) * CELL; const wz0 = offZ + (lotH - rNode.y - 1) * CELL + CELL; const wz1 = offZ + (lotH - (rNode.y + rNode.h) - 1) * CELL + CELL; let x0, x1, z0, z1; if (parentB) { const bcx = offX + (parentB.x + parentB.w / 2) * CELL; const bcz = offZ + (lotH - (parentB.y + parentB.h / 2)) * CELL; x0 = wx0 - bcx; x1 = wx1 - bcx; z0 = wz0 - bcz; z1 = wz1 - bcz; } else { x0 = wx0; x1 = wx1; z0 = wz0; z1 = wz1; } // ── Rise resolution ────────────────────────────────────────────────── let riseWorld; if (facing === "C") { riseWorld = rNode.h * CELL; } else if (riseRaw === 0) { riseWorld = 0; } else if (riseRaw != null) { riseWorld = riseRaw * CELL; } else { riseWorld = Math.min(rNode.w, rNode.h) * CELL * DEFAULT_RISE_RATIO; } // ── Shape dispatch ─────────────────────────────────────────────────── if (facing === "NSEW") { _renderHip(rAnchor, theme, x0, x1, z0, z1, baseY, riseWorld); } else if (facing === "NS") { _renderGable(rAnchor, theme, x0, x1, z0, z1, baseY, riseWorld, "NS"); } else if (facing === "EW") { _renderGable(rAnchor, theme, x0, x1, z0, z1, baseY, riseWorld, "EW"); } else if ( facing === "N" || facing === "S" || facing === "E" || facing === "W" ) { _renderShed(rAnchor, theme, x0, x1, z0, z1, baseY, riseWorld, facing); } else if (facing === "C") { _renderCone(rAnchor, theme, x0, x1, z0, z1, baseY, riseWorld, rNode.w); } else if (facing === "F") { _renderFlat(rAnchor, theme, x0, x1, z0, z1, baseY, riseWorld); } } // ── Annotation pass ───────────────────────────────────────────────────── if (annotate.length > 0) { const NS = "http://www.w3.org/2000/svg"; const dotColor = { L: "#ffffff", B: "#ffdd44", A: "#44ddff", R: "#aaffaa" }; const project = (gx, gy) => { const wx = offX + gx * CELL; const wz = offZ + (lotH - gy) * CELL; const wy = 0; const cosX = Math.cos(ISO.x), sinX = Math.sin(ISO.x); const cosY = Math.cos(ISO.y), sinY = Math.sin(ISO.y); const wy1 = wy * cosX - wz * sinX; const wz1 = wy * sinX + wz * cosX; const wx2 = wx * cosY + wz1 * sinY; return { x: W / 2 + wx2, y: H / 2 + wy1 }; }; const toAnnotate = []; if (annotate.includes("L") && graph.root) toAnnotate.push(graph.root); for (const sym of ["B", "A", "R"]) { if (annotate.includes(sym)) graph.nodesOf(sym).forEach((n) => toAnnotate.push(n)); } const overlay = document.createElementNS(NS, "g"); overlay.setAttribute("class", "annotation"); for (const node of toAnnotate) { const { x: sx, y: sy } = project(node.x, node.y); const color = dotColor[node.type] ?? "#ffffff"; const circle = document.createElementNS(NS, "circle"); circle.setAttribute("cx", sx); circle.setAttribute("cy", sy); circle.setAttribute("r", 5); circle.setAttribute("fill", color); circle.setAttribute("stroke", theme.stroke); circle.setAttribute("stroke-width", 1); overlay.appendChild(circle); if (coords) { const label = document.createElementNS(NS, "text"); label.setAttribute("x", sx + 8); label.setAttribute("y", sy + 4); label.setAttribute("fill", color); label.setAttribute("font-size", "18"); label.setAttribute("font-family", "monospace"); label.setAttribute("stroke", theme.stroke); label.setAttribute("stroke-width", "3"); label.setAttribute("paint-order", "stroke"); label.textContent = `${node.type} ${node.x},${node.y}`; overlay.appendChild(label); } } svg.appendChild(overlay); } illo.updateRenderGraph(); return svg; // ── Roof shape helpers ─────────────────────────────────────────────────── function _roofFace(addTo, pts, fillColor, stroke = true) { new Zdog.Shape({ addTo, fill: true, color: fillColor, path: pts }); if (stroke) new Zdog.Shape({ addTo, fill: false, color: theme.stroke, path: pts }); } // ── Hip (NSEW) ─────────────────────────────────────────────────────────── function _renderHip(addTo, theme, x0, x1, z0, z1, baseY, riseWorld) { const ax = (x0 + x1) / 2; const az = (z0 + z1) / 2; const peak = baseY - riseWorld; _roofFace( addTo, [ { x: x0, y: baseY, z: z0 }, { x: x1, y: baseY, z: z0 }, { x: ax, y: peak, z: az } ], d3.color(theme.roof).brighter(0.3).formatHex() ); _roofFace( addTo, [ { x: x0, y: baseY, z: z1 }, { x: x1, y: baseY, z: z1 }, { x: ax, y: peak, z: az } ], d3.color(theme.roof).darker(0.5).formatHex() ); _roofFace( addTo, [ { x: x1, y: baseY, z: z0 }, { x: x1, y: baseY, z: z1 }, { x: ax, y: peak, z: az } ], d3.color(theme.roof).brighter(0.6).formatHex() ); _roofFace( addTo, [ { x: x0, y: baseY, z: z0 }, { x: x0, y: baseY, z: z1 }, { x: ax, y: peak, z: az } ], theme.roof ); } // ── Gable ──────────────────────────────────────────────────────────────── function _renderGable( addTo, theme, x0, x1, z0, z1, baseY, riseWorld, orient ) { const peak = baseY - riseWorld; if (orient === "NS") { const mz = (z0 + z1) / 2; _roofFace( addTo, [ { x: x0, y: baseY, z: z0 }, { x: x1, y: baseY, z: z0 }, { x: x1, y: peak, z: mz }, { x: x0, y: peak, z: mz } ], d3.color(theme.roof).brighter(0.3).formatHex() ); _roofFace( addTo, [ { x: x0, y: baseY, z: z1 }, { x: x1, y: baseY, z: z1 }, { x: x1, y: peak, z: mz }, { x: x0, y: peak, z: mz } ], d3.color(theme.roof).darker(0.3).formatHex() ); _roofFace( addTo, [ { x: x1, y: baseY, z: z0 }, { x: x1, y: baseY, z: z1 }, { x: x1, y: peak, z: mz } ], d3.color(theme.roof).brighter(0.6).formatHex() ); _roofFace( addTo, [ { x: x0, y: baseY, z: z0 }, { x: x0, y: baseY, z: z1 }, { x: x0, y: peak, z: mz } ], theme.roofSide ); } else { const mx = (x0 + x1) / 2; _roofFace( addTo, [ { x: x0, y: baseY, z: z0 }, { x: x0, y: baseY, z: z1 }, { x: mx, y: peak, z: z1 }, { x: mx, y: peak, z: z0 } ], theme.roofSide ); _roofFace( addTo, [ { x: x1, y: baseY, z: z0 }, { x: x1, y: baseY, z: z1 }, { x: mx, y: peak, z: z1 }, { x: mx, y: peak, z: z0 } ], d3.color(theme.roof).brighter(0.6).formatHex() ); _roofFace( addTo, [ { x: x0, y: baseY, z: z0 }, { x: x1, y: baseY, z: z0 }, { x: mx, y: peak, z: z0 } ], d3.color(theme.roof).brighter(0.3).formatHex() ); _roofFace( addTo, [ { x: x0, y: baseY, z: z1 }, { x: x1, y: baseY, z: z1 }, { x: mx, y: peak, z: z1 } ], d3.color(theme.roof).darker(0.3).formatHex() ); } } // ── Shed ───────────────────────────────────────────────────────────────── function _renderShed(addTo, theme, x0, x1, z0, z1, baseY, riseWorld, facing) { const peak = baseY - riseWorld; let mainPts, highEndPts, lowEndPts, highWallPts; switch (facing) { case "N": { mainPts = [ { x: x0, y: peak, z: z1 }, { x: x1, y: peak, z: z1 }, { x: x1, y: baseY, z: z0 }, { x: x0, y: baseY, z: z0 } ]; highEndPts = [ { x: x1, y: peak, z: z1 }, { x: x1, y: baseY, z: z1 }, { x: x1, y: baseY, z: z0 } ]; lowEndPts = [ { x: x0, y: peak, z: z1 }, { x: x0, y: baseY, z: z1 }, { x: x0, y: baseY, z: z0 } ]; highWallPts = { cx: (x0 + x1) / 2, cy: baseY - riseWorld / 2, cz: z1, w: x1 - x0, h: riseWorld, rotY: 0 }; break; } case "S": { mainPts = [ { x: x0, y: baseY, z: z1 }, { x: x1, y: baseY, z: z1 }, { x: x1, y: peak, z: z0 }, { x: x0, y: peak, z: z0 } ]; highEndPts = [ { x: x1, y: peak, z: z0 }, { x: x1, y: baseY, z: z0 }, { x: x1, y: baseY, z: z1 } ]; lowEndPts = [ { x: x0, y: peak, z: z0 }, { x: x0, y: baseY, z: z0 }, { x: x0, y: baseY, z: z1 } ]; highWallPts = { cx: (x0 + x1) / 2, cy: baseY - riseWorld / 2, cz: z0, w: x1 - x0, h: riseWorld, rotY: 0 }; break; } case "E": { mainPts = [ { x: x0, y: baseY, z: z0 }, { x: x1, y: peak, z: z0 }, { x: x1, y: peak, z: z1 }, { x: x0, y: baseY, z: z1 } ]; highEndPts = [ { x: x1, y: peak, z: z0 }, { x: x0, y: baseY, z: z0 }, { x: x1, y: baseY, z: z0 } ]; lowEndPts = [ { x: x1, y: peak, z: z1 }, { x: x0, y: baseY, z: z1 }, { x: x1, y: baseY, z: z1 } ]; highWallPts = { cx: x1, cy: baseY - riseWorld / 2, cz: (z0 + z1) / 2, w: Math.abs(z1 - z0), h: riseWorld, rotY: Zdog.TAU / 4 }; break; } case "W": { mainPts = [ { x: x0, y: peak, z: z0 }, { x: x1, y: baseY, z: z0 }, { x: x1, y: baseY, z: z1 }, { x: x0, y: peak, z: z1 } ]; highEndPts = [ { x: x0, y: peak, z: z0 }, { x: x1, y: baseY, z: z0 }, { x: x0, y: baseY, z: z0 } ]; lowEndPts = [ { x: x0, y: peak, z: z1 }, { x: x1, y: baseY, z: z1 }, { x: x0, y: baseY, z: z1 } ]; highWallPts = { cx: x0, cy: baseY - riseWorld / 2, cz: (z0 + z1) / 2, w: Math.abs(z1 - z0), h: riseWorld, rotY: Zdog.TAU / 4 }; break; } } _roofFace(addTo, mainPts, theme.roof); _roofFace(addTo, highEndPts, theme.roofSide); _roofFace(addTo, lowEndPts, theme.roofSide); if (highWallPts && riseWorld > 0) { const r = highWallPts; new Zdog.Rect({ addTo, fill: true, stroke: false, color: theme.roofSide, backface: theme.roofSide, width: r.w, height: r.h, translate: { x: r.cx, y: r.cy, z: r.cz }, rotate: r.rotY ? { y: r.rotY } : {} }); new Zdog.Rect({ addTo, fill: false, color: theme.stroke, width: r.w, height: r.h, translate: { x: r.cx, y: r.cy, z: r.cz }, rotate: r.rotY ? { y: r.rotY } : {} }); } } // ── Cone ───────────────────────────────────────────────────────────────── function _renderCone(addTo, theme, x0, x1, z0, z1, baseY, riseWorld, nodeW) { const diameter = nodeW * CELL; const ccx = (x0 + x1) / 2; const ccz = (z0 + z1) / 2; new Zdog.Cone({ addTo, diameter, length: riseWorld, stroke: false, color: theme.roof, backface: theme.roofSide, translate: { x: ccx, y: baseY - riseWorld / 2, z: ccz }, rotate: { x: Zdog.TAU / 4 } }); } // ── Flat ────────────────────────────────────────────────────────────────── function _renderFlat(addTo, theme, x0, x1, z0, z1, baseY, riseWorld) { const thickness = riseWorld > 0 ? riseWorld : CELL * 0.5; const tx = (x0 + x1) / 2; const ty = baseY - thickness / 2; const tz = (z0 + z1) / 2; const bw = x1 - x0; const bd = Math.abs(z1 - z0); new Zdog.Box({ addTo, width: bw, depth: bd, height: thickness, translate: { x: tx, y: ty, z: tz }, color: theme.roof, leftFace: theme.roofSide, rightFace: theme.roofSide, frontFace: theme.roofSide, rearFace: theme.roofSide, topFace: theme.roof, bottomFace: false }); new Zdog.Box({ addTo, width: bw, depth: bd, height: thickness, translate: { x: tx, y: ty, z: tz }, color: theme.stroke, fill: false, stroke: true }); } }36:T2ef9,{ /* zRender = (graph) => { const CELL = 12; const WALL_H = 54 * 3; const ISO = { x: -1, y: 0.6, z: 0 }; const W = 560 * 2; const H = 420 * 2; const theme = { lot: "#3a5a3a", lotSide: "#2a4a2a", wall: "#2d4a6a", wallInterior: "#1a2f48", interior: "#c8b89a", floor: "#b8a88a", roof: "#4a3a2a", roofSide: "#3a2a1a" }; const lotW = graph.width; const lotH = graph.height; const offX = -(lotW * CELL) / 2; const offZ = -(lotH * CELL) / 2; const cx = (col) => offX + col * CELL + CELL / 2; const cz = (row) => offZ + (lotH - 1 - row) * CELL + CELL / 2; const floorBaseY = (fi) => -(fi * WALL_H); const svg = DOM.svg(W, H); const illo = new Zdog.Illustration({ element: svg, dragRotate: false, rotate: ISO }); const root = new Zdog.Anchor({ addTo: illo }); const floorZIndices = [ 0, ...Object.entries(graph.layers) .filter(([label]) => label !== "rf") .sort((a, b) => a[1] - b[1]) .map(([, z]) => z) ]; // ── Floor / wall cell loop ────────────────────────────────────────────── for (const zi of floorZIndices) { const matrix = graph.toMatrix(zi, false); const meta = graph.cellMeta(zi); if (!matrix) continue; const floorIndex = floorZIndices.indexOf(zi); const baseY = floorBaseY(floorIndex); for (let row = 0; row < lotH; row++) { for (let col = 0; col < lotW; col++) { const cellData = matrix[row][col]; if (!cellData) continue; const { symbol, node } = cellData; if (symbol === "-") continue; const m = meta?.[row]?.[col]; if (symbol === "B") { const base = d3.color(m?.exterior ? theme.wall : theme.wallInterior); new Zdog.Box({ addTo: root, width: CELL, depth: CELL, height: WALL_H, translate: { x: cx(col), y: baseY - WALL_H / 2, z: cz(row) }, color: base.formatHex(), frontFace: base.formatHex(), rearFace: base.formatHex(), leftFace: base.formatHex(), rightFace: base.darker(0.5).formatHex(), topFace: false, bottomFace: base.formatHex() }); } else { const isInterior = symbol === "A"; if (isInterior) continue; const tileY = isInterior ? baseY - WALL_H + 1 : 1; new Zdog.Box({ addTo: root, width: CELL, depth: CELL, height: 1, translate: { x: cx(col), y: tileY, z: cz(row) }, color: isInterior ? theme.interior : theme.lot, topFace: isInterior ? theme.floor : theme.lotSide, frontFace: false, rearFace: false, leftFace: false, rightFace: false, bottomFace: false }); } } } } // ── Roof pass ─────────────────────────────────────────────────────────── const moveToFront = (svg, sel) => { const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); Array.from(svg.querySelectorAll(sel)).forEach((p) => g.appendChild(p)); svg.appendChild(g); }; const moveToBack = (svg, sel) => { const g = document.createElementNS("http://www.w3.org/2000/svg", "g"); Array.from(svg.querySelectorAll(sel)).forEach((p) => g.appendChild(p)); svg.insertBefore(g, svg.firstChild); }; for (const rNode of graph.nodesOf("R")) { const shape = rNode.params?.shape; if (shape !== "P" && shape !== "T" && shape !== "C") continue; const [rise, run] = (rNode.params.slope ?? "1:1").split(":").map(Number); const ratio = rise / run; const fi = floorZIndices.indexOf(rNode.params.floorZ ?? 0); const baseY = -((fi >= 0 ? fi + 1 : 1) * WALL_H); const x0 = offX + rNode.x * CELL; const x1 = offX + (rNode.x + rNode.w) * CELL; const z0 = offZ + (lotH - rNode.y - 1) * CELL + CELL; const z1 = offZ + (lotH - (rNode.y + rNode.h) - 1) * CELL + CELL; if (shape === "P") { // ── Pyramid ──────────────────────────────────────────────────────── const ax = (x0 + x1) / 2; const az = (z0 + z1) / 2; const peak = baseY - (Math.min(rNode.w, rNode.h) / 2) * ratio * CELL; const faces = [ { pts: [ { x: x0, y: baseY, z: z1 }, { x: x1, y: baseY, z: z1 }, { x: ax, y: peak, z: az } ], color: theme.roof }, { pts: [ { x: x0, y: baseY, z: z0 }, { x: x1, y: baseY, z: z0 }, { x: ax, y: peak, z: az } ], color: d3.color(theme.roof).darker(1).formatHex() }, { pts: [ { x: x1, y: baseY, z: z0 }, { x: x1, y: baseY, z: z1 }, { x: ax, y: peak, z: az } ], color: d3.color(theme.roof).brighter(0.5).formatHex() }, { pts: [ { x: x0, y: baseY, z: z0 }, { x: x0, y: baseY, z: z1 }, { x: ax, y: peak, z: az } ], color: theme.roof } ]; for (const { pts, color } of faces) { new Zdog.Shape({ addTo: root, fill: true, color, path: pts, className: "roof" }); new Zdog.Shape({ addTo: root, fill: false, color: "#000000", path: pts, className: "roof" }); } } else if (shape === "C") { // ── Cone ─────────────────────────────────────────────────────────── const diameter = rNode.w * CELL; const length = rNode.h * CELL; const ccx = (x0 + x1) / 2; const ccz = (z0 + z1) / 2; new Zdog.Cone({ addTo: root, diameter: diameter, length: length, stroke: false, color: theme.roof, backface: theme.roofSide, translate: { x: x0 + diameter / 2, y: baseY - length / 2, z: z0 - diameter / 2 }, rotate: { x: Zdog.TAU / 4 }, className: "roof" }); } else if (shape === "T") { // ── Shed ─────────────────────────────────────────────────────────── const aspect = rNode.params.aspect ?? "S"; let pts; switch (aspect) { case "S": { const drop = rNode.h * ratio * CELL; pts = [ { x: x0, y: baseY - drop, z: z0 }, { x: x1, y: baseY - drop, z: z0 }, { x: x1, y: baseY, z: z1 }, { x: x0, y: baseY, z: z1 } ]; break; } case "N": { const drop = rNode.h * ratio * CELL; pts = [ { x: x0, y: baseY, z: z0 }, { x: x1, y: baseY, z: z0 }, { x: x1, y: baseY - drop, z: z1 }, { x: x0, y: baseY - drop, z: z1 } ]; break; } case "E": { const drop = rNode.w * ratio * CELL; pts = [ { x: x0, y: baseY - drop, z: z0 }, { x: x1, y: baseY, z: z0 }, { x: x1, y: baseY, z: z1 }, { x: x0, y: baseY - drop, z: z1 } ]; break; } case "W": { const drop = rNode.w * ratio * CELL; pts = [ { x: x0, y: baseY, z: z0 }, { x: x1, y: baseY - drop, z: z0 }, { x: x1, y: baseY - drop, z: z1 }, { x: x0, y: baseY, z: z1 } ]; break; } } new Zdog.Shape({ addTo: root, fill: true, color: theme.roof, path: pts, className: "roof" }); new Zdog.Shape({ addTo: root, fill: false, color: "#000000", path: pts, className: "roof" }); // ── Closing end triangles ───────────────────────────────────────── const drop = aspect === "S" || aspect === "N" ? rNode.h * ratio * CELL : rNode.w * ratio * CELL; const highY = baseY; const lowY = baseY - drop; let endPts1, endPts2; if (aspect === "S") { endPts1 = [ { x: x1, y: highY, z: z1 }, { x: x1, y: highY, z: z0 }, { x: x1, y: lowY, z: z0 } ]; endPts2 = [ { x: x0, y: highY, z: z1 }, { x: x0, y: highY, z: z0 }, { x: x0, y: lowY, z: z0 } ]; } else if (aspect === "N") { endPts1 = [ { x: x1, y: highY, z: z0 }, { x: x1, y: highY, z: z1 }, { x: x1, y: lowY, z: z1 } ]; endPts2 = [ { x: x0, y: highY, z: z0 }, { x: x0, y: highY, z: z1 }, { x: x0, y: lowY, z: z1 } ]; } else if (aspect === "E") { endPts1 = [ { x: x0, y: highY, z: z0 }, { x: x1, y: highY, z: z0 }, { x: x1, y: lowY, z: z0 } ]; endPts2 = [ { x: x0, y: highY, z: z1 }, { x: x1, y: highY, z: z1 }, { x: x1, y: lowY, z: z1 } ]; } else if (aspect === "W") { endPts1 = [ { x: x1, y: highY, z: z0 }, { x: x0, y: highY, z: z0 }, { x: x0, y: lowY, z: z0 } ]; endPts2 = [ { x: x1, y: highY, z: z1 }, { x: x0, y: highY, z: z1 }, { x: x0, y: lowY, z: z1 } ]; } // ── High end vertical rect ──────────────────────────────────────── const hrW = aspect === "S" || aspect === "N" ? x1 - x0 : Math.abs(z1 - z0); const hrH = drop; const hrTranslate = aspect === "S" ? { x: (x0 + x1) / 2, y: baseY - drop / 2, z: z0 } : aspect === "N" ? { x: (x0 + x1) / 2, y: baseY - drop / 2, z: z1 } : aspect === "E" ? { x: x1, y: baseY - drop / 2, z: (z0 + z1) / 2 } : { x: x0, y: baseY - drop / 2, z: (z0 + z1) / 2 }; const hrRotate = aspect === "E" || aspect === "W" ? { y: Zdog.TAU / 4 } : {}; new Zdog.Rect({ addTo: root, fill: true, stroke: false, color: theme.roofSide, backface: theme.roofSide, className: "roof", width: hrW, height: Math.abs(hrH), translate: hrTranslate, rotate: hrRotate }); new Zdog.Shape({ addTo: root, fill: true, color: theme.roofSide, path: endPts1, className: "roof" }); new Zdog.Shape({ addTo: root, fill: false, color: "#000000", path: endPts1, className: "roof" }); new Zdog.Shape({ addTo: root, fill: true, color: theme.roofSide, path: endPts2, className: "roof" }); new Zdog.Shape({ addTo: root, fill: false, color: "#000000", path: endPts2, className: "roof" }); new Zdog.Rect({ addTo: root, fill: false, color: "#000000", className: "roof", width: hrW, height: Math.abs(hrH), translate: hrTranslate, rotate: hrRotate }); } } illo.updateRenderGraph(); moveToFront(svg, '[class^="roof"]'); return svg; }*/ }37:T45cd,{ } /* OLD VERSION GridGraph = { // GridGraph.js Claude Slop // Agnostic spatial model for Blueprint DSL // Architect → Blueprint → L → B → A / R → R // - prefix on any token = disabled (not stamped, not in tree) class Node { constructor({ type, x, y, z = 0, w, h, relative, disabled = false, params = {} }) { this.type = type; // L B A R this.x = x; // resolved absolute origin this.y = y; this.z = z; // floor level / layer index this.w = w; this.h = h; this.relative = relative; // was + used this.disabled = disabled; // was - used — parsed but not stamped this.params = params; // type-specific: { shape, slope, aspect } for R this.parent = null; this.children = []; } addChild(node) { node.parent = this; this.children.push(node); return node; } } class Cell { constructor(symbol = "-") { this.symbol = symbol; // base type char: L B A R - this.visible = true; // kill switch — cull() or external ray trace writes here this.node = null; // reference to owning Node this.nodes = []; // stack of R nodes (additive) } } // ── Roof glyph → canonical shape ───────────────────────────────────────── // P = pyramid (hip), T = triangle (shed/gable face) // Glyphs are easter egg aliases const ROOF_GLYPH_MAP = { P: "P", "△": "P" }; const RF_LAYER = "rf"; // named layer for all roof cells class GridGraph { constructor(blueprint, architect = null) { this.architect = architect; // { position: {x,y,z}, direction: {x,y,z} } this.root = null; // L node this.nodes = []; // flat list of all nodes (including disabled) this.grid = []; // 3D array [z][y][x] of Cell this.width = 0; this.height = 0; this.depth = 0; // number of z layers this.layers = {}; // label → z index if (blueprint) this._parse(blueprint); } // ── Parser ──────────────────────────────────────────────────────────────── _parse(str) { const lines = str .trim() .split("\n") .map((l) => l.trim()) .filter(Boolean); // First line must be L const [lotType, lotPos, lotDim] = lines[0].split(";"); if (lotType !== "L") throw new Error("Blueprint must start with L"); const [lx, ly] = lotPos.split(",").map(Number); const [lw, lh] = lotDim.split("x").map(Number); this.width = lw; this.height = lh; this.depth = 2; this._initLayer(0); this.layers[RF_LAYER] = 1; this._initLayer(1); const lotNode = new Node({ type: "L", x: lx, y: ly, z: 0, w: lw, h: lh, relative: false }); this.root = lotNode; this.nodes.push(lotNode); this._stamp(lotNode); let currentZ = 0; let currentB = null; let currentParent = null; let prevNode = lotNode; for (let i = 1; i < lines.length; i++) { const line = lines[i]; // Layer label — any line without ';' if (!line.includes(";")) { const label = line; if (this.layers[label] === undefined) { const nextZ = Object.keys(this.layers).length + 1; this.layers[label] = nextZ; this._initLayer(nextZ); if (nextZ >= this.depth) this.depth = nextZ + 1; } currentZ = this.layers[label]; currentB = null; currentParent = null; continue; } const parts = line.split(";"); const rawType = parts[0]; // - prefix = disabled token const isDisabled = rawType.startsWith("-"); const afterDash = isDisabled ? rawType.slice(1) : rawType; // + suffix = relative origin const isRelative = afterDash.endsWith("+"); const baseType = isRelative ? afterDash.slice(0, -1) : afterDash; // Skip O tokens entirely if (/^O/.test(baseType)) continue; const mainType = baseType; const pos = parts[1] ? parts[1].split(",").map(Number) : [0, 0]; const dimStr = parts[2]; // ── Origin resolution ───────────────────────────────────────────── let resolveFrom = null; if (mainType === "R") { if (isRelative) { resolveFrom = prevNode?.type === "R" || prevNode?.type === "A" ? prevNode : currentB; } else { resolveFrom = currentB; } } else if (mainType === "A") { resolveFrom = currentB; } else if (isRelative) { resolveFrom = currentParent; } const originX = resolveFrom ? pos[0] + resolveFrom.x : pos[0]; const originY = resolveFrom ? pos[1] + resolveFrom.y : pos[1]; let w = 0, h = 0; if (dimStr && dimStr.includes("x")) { [w, h] = dimStr.split("x").map(Number); } else if (dimStr) { w = Number(dimStr); } // ── R params ────────────────────────────────────────────────────── let params = {}; if (mainType === "R") { const rawShape = parts[3] || null; const shape = rawShape ? ROOF_GLYPH_MAP[rawShape] ?? rawShape : null; const slope = parts[4] || null; const aspect = parts[5] || null; const mode = parts[6] || "V"; params = { shape, slope, aspect, mode, floorZ: currentZ }; } // ── Z assignment ────────────────────────────────────────────────── let nodeZ = currentZ; if (mainType === "R") { nodeZ = this.layers[RF_LAYER]; } const node = new Node({ type: mainType, x: originX, y: originY, z: nodeZ, w, h, relative: isRelative, disabled: isDisabled, params }); this.nodes.push(node); // ── Tree attachment ─────────────────────────────────────────────── if (mainType === "B") { if (isRelative && currentB) { currentB.addChild(node); } else { lotNode.addChild(node); } currentB = node; currentParent = node; } else if (mainType === "R") { if ( isRelative && (prevNode?.type === "R" || prevNode?.type === "A") ) { prevNode.addChild(node); } else if (currentB) { currentB.addChild(node); } else { lotNode.addChild(node); } } else if (currentB) { currentB.addChild(node); if (mainType !== "A") currentParent = node; } if (!isDisabled) this._stamp(node); prevNode = node; } } _initLayer(z) { this.grid[z] = Array.from({ length: this.height }, () => Array.from({ length: this.width }, () => new Cell()) ); } _stamp(node) { const z = node.z; if (!this.grid[z]) this._initLayer(z); const x0 = node.x, y0 = node.y; const x1 = x0 + (node.w || 0); const y1 = y0 + (node.h || 0); for (let y = y0; y < y1 && y < this.height; y++) { for (let x = x0; x < x1 && x < this.width; x++) { if (y < 0 || x < 0) continue; const cell = this.grid[z][y][x]; if (node.type === "R") { cell.nodes.push(node); cell.symbol = "R"; } else { cell.symbol = node.type; cell.node = node; } } } } // ── Spatial queries ─────────────────────────────────────────────────────── at(x, y, z = 0) { if (!this.grid[z]?.[y]?.[x]) return null; return this.grid[z][y][x]; } neighbors(x, y, z = 0, connected = 8) { const dirs4 = [ [-1, 0], [1, 0], [0, -1], [0, 1] ]; const dirs8 = [...dirs4, [-1, -1], [-1, 1], [1, -1], [1, 1]]; const dirs = connected === 8 ? dirs8 : dirs4; return dirs .map(([dy, dx]) => ({ x: x + dx, y: y + dy, cell: this.at(x + dx, y + dy, z) })) .filter((n) => n.cell !== null); } where(symbol, z = null) { const results = []; const layers = z !== null ? [z] : this.grid.map((_, i) => i); for (const zi of layers) { if (!this.grid[zi]) continue; for (let y = 0; y < this.height; y++) for (let x = 0; x < this.width; x++) if (this.grid[zi][y][x].symbol === symbol) results.push({ x, y, z: zi, cell: this.grid[zi][y][x] }); } return results; } nodesOf(type) { return this.nodes.filter((n) => n.type === type && !n.disabled); } neighborsOf(node) { const seen = new Set(); const result = []; const z = node.z; for (let y = node.y; y < node.y + node.h; y++) { for (let x = node.x; x < node.x + node.w; x++) { this.neighbors(x, y, z).forEach(({ cell }) => { if (cell.node && cell.node !== node) { const key = `${cell.node.type}:${cell.node.x},${cell.node.y}`; if (!seen.has(key)) { seen.add(key); result.push(cell.node); } } }); } } return result; } adjacent(typeX, typeY) { return this.nodesOf(typeX).filter((node) => this.neighborsOf(node).some((n) => n.type === typeY) ); } // ── Roof layer helpers ──────────────────────────────────────────────────── get rfZ() { return this.layers[RF_LAYER] ?? null; } roofNodes() { return this.nodesOf("R"); } roofMatrix(flip = false) { const z = this.rfZ; if (z === null) return null; return this.toMatrix(z, flip); } // ── Cell meta ───────────────────────────────────────────────────────────── static _faceType(sym) { if (!sym || sym === "-") return "exterior"; if (sym === "L") return "lot"; if (sym === "B") return "wall"; if (sym === "A") return "room"; return "exterior"; } static CARDINAL_TO_ZDOG_FACE = { N: "rearFace", S: "frontFace", E: "rightFace", W: "leftFace" }; static _outwardDirs(c, r, bNode) { const bcx = bNode.x + bNode.w / 2; const bcy = bNode.y + bNode.h / 2; const dx = c - bcx; const dy = r - bcy; const adx = Math.abs(dx); const ady = Math.abs(dy); const dirs = []; if (adx >= ady) dirs.push(dx > 0 ? "E" : "W"); if (ady >= adx) dirs.push(dy > 0 ? "S" : "N"); return dirs; } cellMeta(z = 0) { if (!this.grid[z]) return null; const get = (r, c) => { if (r < 0 || c < 0 || r >= this.height || c >= this.width) return null; return this.grid[z][r][c].symbol; }; return this.grid[z].map((row, r) => row.map((cell, c) => { if (cell.symbol !== "B") return null; const N = get(r - 1, c), S = get(r + 1, c); const E = get(r, c + 1), W = get(r, c - 1); const faces = { N: GridGraph._faceType(N), S: GridGraph._faceType(S), E: GridGraph._faceType(E), W: GridGraph._faceType(W) }; const exterior = Object.values(faces).some( (f) => f === "exterior" || f === "lot" ); const bNode = cell.node; const outward = bNode ? GridGraph._outwardDirs(c, r, bNode) : []; const outwardFaces = outward.map( (d) => GridGraph.CARDINAL_TO_ZDOG_FACE[d] ); const exteriorDirs = outward.filter((d) => { const f = faces[d]; return f === "exterior" || f === "lot"; }); return { exterior, exteriorDirs, outward, outwardFaces, faces }; }) ); } // ── Visible faces ───────────────────────────────────────────────────────── static visibleFaces(rotate) { const cosX = Math.cos(rotate.x), sinX = Math.sin(rotate.x); const cosY = Math.cos(rotate.y), sinY = Math.sin(rotate.y); function rotateNormal(nx, ny, nz) { const ny1 = ny * cosX - nz * sinX; const nz1 = ny * sinX + nz * cosX; const nx2 = nx * cosY + nz1 * sinY; const nz2 = -nx * sinY + nz1 * cosY; return { x: nx2, y: ny1, z: nz2 }; } const normals = { top: rotateNormal(0, 1, 0), bottom: rotateNormal(0, -1, 0), south: rotateNormal(0, 0, 1), north: rotateNormal(0, 0, -1), east: rotateNormal(1, 0, 0), west: rotateNormal(-1, 0, 0) }; const visible = {}; for (const [face, n] of Object.entries(normals)) visible[face] = n.z > 0; return visible; } // ── Culling ─────────────────────────────────────────────────────────────── cull(rotate) { this.resetVisibility(); const vf = GridGraph.visibleFaces(rotate); for (let zi = 0; zi < this.depth; zi++) { if (!this.grid[zi]) continue; const meta = this.cellMeta(zi); for (let y = 0; y < this.height; y++) { for (let x = 0; x < this.width; x++) { const cell = this.grid[zi][y][x]; const m = meta?.[y]?.[x]; if (cell.symbol === "B") { if (!m) { cell.visible = false; continue; } cell.visible = !!( (vf.south && m.faces.S !== "wall") || (vf.north && m.faces.N !== "wall") || (vf.east && m.faces.E !== "wall") || (vf.west && m.faces.W !== "wall") || vf.top ); } else { const nbrs = this.neighbors(x, y, zi, 4); if (nbrs.length === 4 && nbrs.every((n) => !n.cell.visible)) cell.visible = false; } } } } } // ── Visibility ──────────────────────────────────────────────────────────── resetVisibility() { for (const layer of this.grid) { if (!layer) continue; for (const row of layer) for (const cell of row) cell.visible = true; } } applyVisibility(visibilityMap) { for (const { x, y, z, visible } of visibilityMap) { const cell = this.at(x, y, z); if (cell) cell.visible = visible; } } visibleWhere(symbol, z = null) { return this.where(symbol, z).filter(({ cell }) => cell.visible); } // ── Matrix export ───────────────────────────────────────────────────────── toMatrix(z = 0, flip = false) { if (!this.grid[z]) return null; const rows = this.grid[z].map((row, y) => row.map((cell, x) => ({ x, y, z, symbol: cell.symbol, visible: cell.visible, node: cell.node, nodes: cell.nodes })) ); return flip ? rows.slice().reverse() : rows; } toMatrices(flip = false) { return this.grid.map((_, z) => this.toMatrix(z, flip)).filter(Boolean); } // ── Serialization ───────────────────────────────────────────────────────── print(z = 0) { if (!this.grid[z]) return `no layer at z=${z}`; return this.grid[z] .map((row) => row.map((cell) => (cell.visible ? cell.symbol : "·")).join("") ) .join("\n"); } toJSON() { function nodeToObj(n) { return { type: n.type, x: n.x, y: n.y, z: n.z, w: n.w, h: n.h, disabled: n.disabled, params: n.params, children: n.children.map(nodeToObj) }; } return { architect: this.architect, width: this.width, height: this.height, depth: this.depth, layers: this.layers, tree: nodeToObj(this.root) }; } } return GridGraph; }*/38:[] 32:{"id":"95682dec94172157","slug":"building-a-buildings-matrix","title":"Building a buildings' matrix","thumbnail":"899b95be2b8756c093bd0bec8df6abaa99686adefab98744348f78c5661a20b5","access_level":"public","create_time":"$D2026-05-03T14:10:35.478Z","update_time":"$D2026-05-09T13:07:04.852Z","view_time":null,"first_public_time":"$D2026-05-04T02:35:56.711Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":1135,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Building a buildings' matrix","cells":[{"id":0,"value":"# Building a buildings' matrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":722,"value":"v3 https://observablehq.com/@mbrickmaps/zdoggy-house","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"v2 https://observablehq.com/@mbrickmaps/refactoring-markup ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":707,"value":"v1\nhttps://observablehq.com/@mbrickmaps/make-a-house","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1009,"value":"testing = `\nL;0,0;30x60 \nB;8,5;15x15\nR;0,0,0,30;15x15\n01\nB;16,10,45;5x5x6\nR;0,0;5x5;F\n`\n// Lot/Land at 0,0 which is 30 units by 60 unit","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"import { shift } from \"@mbrickmaps/dark-mode-bookmarklet\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"examples = zRender(new GridGraph(testing), {\n w: width,\n cell: 8,\n wall: 125,\n theme: {\n roof: shift(\"#9b856b\"),\n stroke: shift(\"#584c77\"),\n wall: shift(\"#b63e36\", 1),\n lot: shift(\"#7c8635\")\n },\n iso: { x: -1, y: 0.6, z: 0 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"gambrel = `\nL;0,0;20x20\nB;2,2;16x16\nR;12,0,0;4x4x5\nR;0,0,0;4x4x5\nR;0,12,0;4x4x5\nR;12,12,0;4x4x5\nR;2,2,4;12x12x1;F\nR;2,0;12x2x5;N\nR;2,14;12x2x5;S\nR;14,2;2x12x5;W\nR;0,2;2x12x5;E\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"house = `\nL;0,0;30x60\nB;4,13;22x28\nA;1,1;9x26\nA;11,1;10x26\nR;0,0;22x28x4;NSEW\n01\nB;4,13;22x14\nA;1,1;9x12\nA;11,1;10x12\nR;0,0;22x14x4;NSEW\n02\nB;16,13;10x10\nA;1,1;8x8\n-R;0,0;10x16;C\nR;0,0;10x10x3;S\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"compound = `\nL;0,0;60x68\nB;2,2;16x16\nR;0,0;16x16x6\nB;22,2;16x16\nR;0,0;16x16x6;NS\nB;42,2;16x16\nR;0,0;16x16x6;EW\nB;2,24;16x16\nR;0,0;16x16x6;N\nB;22,24;16x16\nR;0,0;16x16x6;S\nB;42,24;16x16\nR;0,0;16x16x6;E\nB;2,46;16x16\nR;0,0;16x16x6;W\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"https://zzz.dog/#about-zdog","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":744,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"Zdog = require(\"zdog@1.1.3/dist/zdog.dist.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"Previous attempts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"