2e:null 2f:["$","title",null,{"children":"Refactoring markup | Michael Bricknell | Observable"}] 34:T623,function generateRoof(type, width, depth, slope, offsetX, offsetY, aspect) { let height = slope; function calculateHeight(slope, width, depth) { // Extract rise and run from the slope ratio let [rise, run] = slope.split(":").map(Number); // Use width for gable roofs and depth for shed roofs let horizontalDistance = width; // Calculate the height using the slope triangle properties let height = (rise / run) * horizontalDistance; return height; } function createRectangle(width, depth) { // Create and return rectangle properties return { width, depth }; } function createTriangle(a, b) { // Create and return triangle properties let c = calcSide(a, b); return { a, b, c }; } let roofData = { offsetX, offsetY, aspect, width, depth }; // Apply the offsets and aspect to the roof data console.log(roofData); switch (type) { case "△" || "hipped": // Logic for pyramid roof /* ... pyramid roof properties ... */ break; /* case "◭" || "◮" || "hpy" || "halfpyamid": // Logic for half-pyramid (shed) roof roofData = { }; break; */ case "◺" || "◿" || "gabled": // console.log(type, width, depth, slope, offsetX, offsetY, aspect); // Logic for wedge (gable) roof roofData.shape = createTriangle( width, calculateHeight(slope, width, depth) ); break; // Add additional cases for other roof types if necessary default: roofData.shape = { height }; } return roofData; }35:T528,function generateRoom( name, widthInches, depthInches, wallThicknessInches, origin, anchor ) { // Convert the width, depth, and wall thickness to inches const width = widthInches; const depth = depthInches; const wallThickness = wallThicknessInches; // Calculate the inner width and depth (i.e., the size of the room without the walls) const innerWidth = width - 2 * wallThickness; const innerDepth = depth - 2 * wallThickness; // Calculate the number of cells needed in the matrix const numCols = Math.ceil(width); const numRows = Math.ceil(depth); // Generate a matrix of zeros with the calculated number of cells const matrix = Array.from(Array(numRows), () => new Array(numCols).fill(0)); // Add the outer walls to the matrix for (let row = 0; row < numRows; row++) { for (let col = 0; col < numCols; col++) { if ( row < wallThickness || row >= numRows - wallThickness || col < wallThickness || col >= numCols - wallThickness ) { matrix[row][col] = 1; } } } // Create the room object const room = { name, width, depth, innerWidth, innerDepth, wallThickness, origin: { x: origin.x, y: origin.y }, anchor: { x: anchor.x, y: anchor.y }, matrix }; return room; }36:T1bde,function parseMarkupToMatrix(inputString) { function sliceIntoChunks(arr, chunkSize) { const res = []; for (let i = 0; i < arr.length; i += chunkSize) { const chunk = arr.slice(i, i + chunkSize); res.push(chunk); } return res; } //https://stackabuse.com/how-to-split-an-array-into-even-chunks-in-javascript/ //L it Lot, B is building ,A is Area, R is roof function parseTheme(themeStr) { const themeObj = {}; themeStr.split(",").forEach((item) => { const [key, value] = item.split(":"); themeObj[key] = value; }); return themeObj; } // Initialize an empty matrix let matrix = []; let rmatrix = []; // roof matrix let buildings = []; // Array to store building objects let currentBuilding = null; // Variable to track the current building let roofs = []; //default theme let theme = { L: "#203c7f", B: "blue", A: "yellow", R: { N: "red", E: "yellow", S: "cyan", W: "blue", _: "#DDDDDD", F: "#DDDDDD" } }; let mytheme = { ...theme }; let relativeTheme = { ...theme }; let currentObjectTheme = {}; // Initialize the matrix with the size of the lot const houseArray = inputString .trim() .split("\n") .map((d) => d.split(";")); const lotSize = houseArray[0][2].split("x"); const lotWidth = parseInt(lotSize[0]); const lotHeight = parseInt(lotSize[1]); const lotOriginX = -parseInt(lotSize[0]) / 2; const lotOriginY = -parseInt(lotSize[1]) / 2; const lotOrigin = { x: lotOriginX, y: lotOriginY }; matrix = new Array(lotHeight) .fill(null) .map(() => new Array(lotWidth).fill("-")); rmatrix = new Array(lotHeight) .fill(null) .map(() => new Array(lotWidth).fill("-")); // Variables to keep track of the current building position and dimensions let currentBuildingX = 0; let currentBuildingY = 0; let currentBuildingWidth = 0; let currentBuildingHeight = 0; // Loop through each line and fill the matrix accordingly const lines = inputString.trim().split("\n"); lines.forEach((line, lineIndex) => { // Split the line into tokens const [objType, pos, dim] = line.split(";"); // Check if the object has a relative position flag const isRelative = objType.includes("+"); const objectType = isRelative ? objType.slice(0, -1) : objType; // Handle theme objects if (objectType === "T") { mytheme = parseTheme(pos); if (lineIndex === 1) { relativeTheme = { ...mytheme }; } return; } else if (objType.startsWith("T+")) { const objectTypeToModify = objType[2]; currentObjectTheme[objectTypeToModify] = parseTheme(pos); return; } const position = pos.split(","); const xNum = parseInt(position[0]) + (isRelative ? currentBuildingX : 0); const yNum = parseInt(position[1]) + (isRelative ? currentBuildingY : 0); // Handle objects with dimensions if (dim) { const dimensions = dim.split("x"); const widthNum = parseInt(dimensions[0]); const heightNum = parseInt(dimensions[1]); if (objectType === "L") { for (let i = xNum; i < xNum + widthNum && i < lotWidth; i++) { for (let j = yNum; j < yNum + heightNum && j < lotHeight; j++) { matrix[j][i] = "L"; rmatrix[j][i] = "L"; } } } else if (objectType === "B") { currentBuildingX = xNum; currentBuildingY = yNum; currentBuildingWidth = widthNum; currentBuildingHeight = heightNum; currentBuilding = { name: "Building", // Modify as needed buildingSite: { w: currentBuildingWidth, d: currentBuildingHeight, matrix: Array.from( Array(convertInches(addZero(currentBuildingWidth))), () => new Array(convertInches(addZero(currentBuildingHeight))).fill(1) ), x: currentBuildingX, y: currentBuildingY }, rooms: [], // Array to hold areas roofs: [] }; if (widthNum <= lotWidth && heightNum <= lotHeight) { for (let i = xNum; i < xNum + widthNum && i < lotWidth; i++) { for (let j = yNum; j < yNum + heightNum && j < lotHeight; j++) { matrix[j][i] = "B"; rmatrix[j][i] = "B"; } } } buildings.push(currentBuilding); } else if (objectType === "A") { let areaDetails = {}; for (let i = xNum; i < xNum + widthNum && i < lotWidth; i++) { for (let j = yNum; j < yNum + heightNum && j < lotHeight; j++) { matrix[j][i] = "A"; rmatrix[j][i] = "A"; } } areaDetails = generateRoom( "room", convertInches(addZero(widthNum)), convertInches(addZero(heightNum)), convertInches("0-6"), { x: convertInches(addZero(xNum)), y: convertInches(addZero(yNum)) }, { x: 0, y: 0 } ); currentBuilding.rooms.push(areaDetails); } else if ( objectType === "OW" || objectType === "OD" || objectType === "O" ) { const widthNum = parseInt(dim); for (let i = xNum; i < xNum + widthNum && i < lotWidth; i++) { matrix[yNum][i] = objectType; } } else if (objectType === "R") { let [type, offset, dimensions, aspect, slope, roofType] = line.split(";"); let [width, length] = dimensions.split("x").map(Number); console.log(width, length); let [rise, run] = slope.split(":").map(Number); let [x, y] = offset.split(","); let roofSegment = {}; console.log([roofType, width, length, slope, x, y, aspect]); //type, width, depth, height, slope, offsetX, offsetY, aspect roofSegment = generateRoof( roofType, width, length, slope, x, y, aspect ); currentBuilding.roofs.push({ ...roofSegment, x: xNum, y: yNum, w: width, h: length, slope, roofType }); for (let i = xNum; i < xNum + widthNum && i < lotWidth; i++) { for (let j = yNum; j < yNum + heightNum && j < lotHeight; j++) { // Check if the cell already has a roof aspect value if (rmatrix[j][i] === "-") { rmatrix[j][i] = aspect; } else { // Determine the final cell value based on your rules or priorities // For example, you can give priority to the new aspect value rmatrix[j][i] = aspect; } } } } } }); return { lot: { width: lotWidth, height: lotHeight, units: null, origin: lotOrigin }, buildings: buildings, hmatrix: matrix, rmatrix: rmatrix, hmatrix3d: matrix.slice().reverse(), rmatrix3d: rmatrix.slice().reverse(), theme, relativeTheme, currentObjectTheme }; }37:T87e,function renderMatrixOnCanvas( matrixTheme, matrixType = "house", canvasWidth, canvasHeight = null ) { const { hmatrix, rmatrix, theme, relativeTheme, currentObjectTheme } = matrixTheme; const matrix = matrixType === "roof" ? rmatrix : hmatrix; const numRows = matrix.length; const numCols = matrix[0].length; const canvas = document.createElement("canvas"); canvas.width = canvasWidth; canvas.height = canvasHeight || Math.round((canvasWidth / numCols) * numRows); const ctx = canvas.getContext("2d"); const cellWidth = canvas.width / numCols; const cellHeight = canvas.height / numRows; for (let i = 0; i < numRows; i++) { for (let j = 0; j < numCols; j++) { const cellValue = matrix[i][j]; if (cellValue === "L") { ctx.fillStyle = relativeTheme.L; } else if (cellValue === "B") { ctx.fillStyle = relativeTheme.B; } else if (cellValue === "A") { ctx.fillStyle = currentObjectTheme.A || relativeTheme.A || theme.A; } else if (cellValue === "OW") { ctx.fillStyle = relativeTheme.B; } else if (cellValue === "OD") { ctx.fillStyle = relativeTheme.B; } else if (cellValue === "O") { ctx.fillStyle = relativeTheme.L; } else if (["N", "E", "S", "W", "_", "F"].indexOf(cellValue) > -1) { //console.log(currentObjectTheme, theme, relativeTheme); ctx.fillStyle = theme.R[cellValue]; } else { ctx.fillStyle = "white"; } ctx.fillRect(j * cellWidth, i * cellHeight, cellWidth, cellHeight); ctx.strokeStyle = "#FAF5EF"; ctx.strokeRect(j * cellWidth, i * cellHeight, cellWidth, cellHeight); } } canvas.addEventListener("mousedown", (e) => { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const x = (e.clientX - rect.left) * scaleX; const y = (e.clientY - rect.top) * scaleY; const matrixX = Math.floor(x / cellWidth); const matrixY = matrix.length - 1 - Math.floor(y / cellHeight); console.log(`Building Location: (${matrixX}, ${matrixY})`); }); return canvas; }38:[] 32:{"id":"c7fb655a513fc860","slug":"refactoring-markup","title":"Refactoring markup","thumbnail":"0b0f11787449a832d867a2407d9d451ebb7c64df7d9266902f4f563067861b27","access_level":"public","create_time":"$D2023-04-10T20:33:28.824Z","update_time":"$D2026-05-06T18:00:40.171Z","view_time":null,"first_public_time":"$D2025-09-20T12:03:21.610Z","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":1136,"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":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"cedb226865779438","slug":"tools","title":"Tools","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Refactoring markup","cells":[{"id":0,"value":"# Refactoring markup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1134,"value":"renderMatrixOnCanvas(parseMarkupToMatrix(house), \"roof\", 367.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"function calcSide(a, b) {\n // Calculate c (hypotenuse) if c is unknown\n return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"function addZero(input) {\n if (!String(input).includes(\"-\")) {\n input += \"-0\";\n } else {\n return input;\n }\n return input;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"function convertInches(string) {\n let units = string.split(\"-\");\n let feet = +units[0] * 12;\n let inches = +units[1]; //inches\n let total = feet + inches; //total measurement\n let conversion = total;\n let f = Number.parseFloat(conversion);\n return f;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"function convertMeters(inches) {\n let meters = inches * 0.0254;\n let f = Number.parseFloat(meters);\n return f;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"function getNeighbors(matrix, row, col) {\n const numRows = matrix.length;\n const numCols = matrix[0].length;\n const neighbors = [];\n\n // Offsets to check all 8 neighbors plus the center\n const rowOffsets = [-1, -1, -1, 0, 0, 1, 1, 1];\n const colOffsets = [-1, 0, 1, -1, 1, -1, 0, 1];\n\n for (let i = 0; i < 8; i++) {\n const newRow = row + rowOffsets[i];\n const newCol = col + colOffsets[i];\n\n // Check if newRow and newCol are valid indices in the matrix\n if (newRow >= 0 && newRow < numRows && newCol >= 0 && newCol < numCols) {\n neighbors.push(matrix[newRow][newCol]);\n }\n }\n return neighbors;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"parseMarkupToMatrix(house)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"myRoom = generateRoom(\n \"living room\",\n convertInches(\"10-0\"),\n convertInches(\"8-0\"),\n convertInches(\"0-6\"),\n { x: convertInches(\"10-0\"), y: convertInches(\"10-0\") },\n { x: 0, y: 0 }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"mybuilding = ({\n name: \"building\",\n rooms: [myRoom],\n exteriorWallThickness: 10, // in inches\n interiorWallThickness: 6,\n buildingSite: {\n w: convertInches(\"22-0\"),\n d: convertInches(\"28-0\"),\n matrix: Array.from(Array(convertInches(\"22-0\")), () =>\n new Array(convertInches(\"28-0\")).fill(1)\n ),\n x: 0,\n y: 0\n },\n lotSize: {\n w: convertInches(\"27-0\"),\n d: convertInches(\"208-0\"),\n matrix: Array.from(Array(convertInches(\"27-0\")), () =>\n new Array(convertInches(\"208-0\")).fill(1)\n )\n } // the size of the grid in which rooms are placed\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"renderMatrixOnCanvas(parseMarkupToMatrix(house), \"house\", 365.7)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"renderMatrixOnCanvas(parseMarkupToMatrix(house), \"roof\", 367.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"- (-1, -1) - Northwest (NW)\n- (-1, 0) - North (N)\n- (-1, 1) - Northeast (NE)\n- (0, -1) - West (W)\n- (0, 1) - East (E)\n- (1, -1) - Southwest (SW)\n- (1, 0) - South (S)\n- (1, 1) - Southeast (SE)\n- (0, 0) - Flat (_|F)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":551,"value":"renderMatrixOnCanvas(parseMarkupToMatrix(house), 275, \"roof\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"△ \n◭ || ◮ \n◿ || ◺ ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"house = `\nL;0,0;30x60\nT;L:#58a776,B:#2d5f8b,A:#98c0e2\nB;4,13;22x28\nA+;1,1;9x10\nA+;11,1;10x18\nA+;1,16;9x11\nA+;11,20;10x7\nA+;1,12;9x3\nR+;0,0;11x18;W;3:4;◺\nR+;11,0;11x18;E;3:4;◺\nR+;0,18;22x10;N;3:4;◺\nB;4,47;10x10\nA+;1,1;8x8\nR+;0,0;10x10;S;4:5;◺`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"renderMatrixOnCanvas(parseMarkupToMatrix(house), \"house\", 275)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"parseMarkupToMatrix(house)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"parseMarkupToMatrix(house).buildings[0].roofs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"