29:null 2a:["$","title",null,{"children":"Parametric Kumiko Grids | Ben Simonds | Observable"}] 2f:T530,{ const margin = 10, height = width * 0.32, w = width - 2 * margin, h = height - 2 * margin, // Find the closest whole number ratio that's a bit more extreme than w / h b = grids[bisectRatio.left(grids, w/h)], m = b.m, n = b.n, [p, x] = solve(w, h, n, m) ; const frame = htl.html` ` return frame; }30:T5ed,{ const margin = 10, height = width / 2.5, // Some non-whole number ratio p = Math.min(height / 2 - margin, padding), dp2 = d3.format('.2f'), dp0 = d3.format('.0f'), outerRatio = (width - margin * 2) / (height - margin * 2), innerRatio = (width - margin * 2 - p * 2 )/(height - margin * 2 - p * 2), close = 0.1, isRoughlyWhole = innerRatio % .5 < close || innerRatio % 1 > (1-close), squareSize = isRoughlyWhole ? (width - margin * 2 - p * 2) / innerRatio : undefined; const frame = htl.html` ` return frame; }31:T4d1,To find the _exact_ padding ${tex`p`} needed for any given panel, we just need to solve the following, for a horizontal rectangle of height ${tex`h`} and width ${tex`w`}. For example: In general:
${tex`w = 2p + nx`}
${tex`h = 2p + mx`}
Where ${tex`n \times m`} is our number of squares we want to fit and ${tex`x`} is the size of our squares. We can solve this with some iteration - narrowing in on the correct values by repeatedly plugging them into the formulas above.32:T4ae,{ const margin = 10, height = width / 1.3, w = width - 2 * margin, h = w / ratio, // Find the closest whole number ratio that's a bit more extreme than w / h b = grids[bisectRatio.left(grids, ratio)], m = b.m, n = b.n, [p, x] = solve(w, h, n, m) ; console.log(b) const frame = htl.html` ` return frame; }33:[{"id":"eef1beef61842eeeaf7e3e06505e3ce25e93b9045a56ccc28810a0495c25f3481ce74e56e4bea72fba52aecb50abe3f65cee8614cd43e8e70600729b4eabcb47","href":"https://static.observableusercontent.com/files/eef1beef61842eeeaf7e3e06505e3ce25e93b9045a56ccc28810a0495c25f3481ce74e56e4bea72fba52aecb50abe3f65cee8614cd43e8e70600729b4eabcb47","name":"IMG_0785 2.jpg","type":"image/jpeg","lastModified":1677617163250.545,"size":546177}] 2d:{"id":"097722237adcf6cb","slug":"parametric-kumiko-grids","title":"Parametric Kumiko Grids","thumbnail":"b61fa3e682a8e27e0b1eda38f84bfd978c06150d980a1fa583a40aa18845b3ab","access_level":"public","create_time":"$D2023-02-28T17:12:11.522Z","update_time":"$D2023-11-28T12:00:29.644Z","view_time":null,"first_public_time":"$D2023-02-28T17:12:11.522Z","has_unpublished_edits":null,"fork":{"id":"e57692300453779b","slug":"interactive-svg","title":"Interactive SVG","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":2,"starred":false,"owner":{"type":"team","id":"2e5e341b76bf2323","login":"bensimonds","name":"Ben Simonds","avatar_url":"https://avatars-next.observableusercontent.com/bb4a7fdf77be269eb0b697887a2808df69081986eef6aa2d96c81bb3c533528c","tier":"starter_2024"},"version":729,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01828926f5962c33","login":"bensimonds","name":"Ben Simonds","avatar_url":"https://avatars-next.observableusercontent.com/bb4a7fdf77be269eb0b697887a2808df69081986eef6aa2d96c81bb3c533528c","tier":null}],"members":[{"type":"individual","id":"01828926f5962c33","login":"bensimonds","name":"Ben Simonds","avatar_url":"https://avatars-next.observableusercontent.com/bb4a7fdf77be269eb0b697887a2808df69081986eef6aa2d96c81bb3c533528c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Parametric Kumiko Grids","cells":[{"id":0,"value":"# Parametric Kumiko Grids\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"\n\nI came across a problem recently in a woodworking project, where I wanted to fit a [kumiko](https://en.wikipedia.org/wiki/Kumiko_(woodworking) grid into a panel. Kumiko grids can be based on a variety of patterns, but for my panel I wanted to use the square asanoha pattern you see above. The issue was that my panel was a rectangle that didn't fit some whole number of squares perfectly (ie. having a whole number ratio between the width and height that wasn't too complex).\n\nBy adding some padding around the edge of the design though, I realised I could adjust the ratio between the width and height of the inner rectangle to fit a whole number of squares exactly.\n\nAdjust the padding width below - as the aspect ratio of the inner rectangle reaches a value close to a whole number the matching number of squares will appear in the grid.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof padding = Scrubber(d3.range(0,width/5,0.1), {initial:0, alternate: true, format: d3.format('.0f')})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"function solve(w, h, n, m=1, threshold=0.001) {\n var error = 1, p=0, i=0, x = w / n;\n while (error > threshold && i < 1000) {\n p = (h - x * m) / 2; // Calculate what p should be based on x.\n var newx = (w - 2 * p) / n // Calculate what x should be based on p\n error = Math.abs(newx - x); // Update the error\n x = newx; // Update x\n i++;\n }\n return [p, x];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"Now we can use our solver to fit a nice grid into a rectangle with any ratio of side length, using an even amount of padding around the edges to force the inner rectangle to have a whole number ratio in its side lengths. The process goes as follows - first we just find a whole number combination ${tex`n \\times m`} that gives a ratio just larger than that of the outer rectangle, then we solve to get the padding and square size. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"viewof ratio = Scrubber(d3.range(1.3, 4, 0.005), {initial:2, alternate: true, autoplay: true, format: d3.format('.2f')})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"Which means I can design a Kumiko grid to fit any size woodworking project.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":578,"value":"img_07852 = FileAttachment(\"IMG_0785 2.jpg\").image({width: 450})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"## Appendix\n\nI've used the following array to store a list of integer grid ratios.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":362,"value":"grids = {\n const grids = [];\n const ratios = [];\n const largest = 5;\n for (let m = 1; m < largest; ++m) {\n for (let n = m; n < largest; ++n) {\n if (!ratios.includes(n/m)) {\n grids.push({m, n, ratio: n/m})\n ratios.push(n/m)\n }\n \n } \n }\n return grids.sort((a,b) => a.ratio - b.ratio);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"And this d3 bisect function to find the closest integer ratio to any grid size.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":380,"value":"bisectRatio = d3.bisector(d => d.ratio)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"And here's a couple of little `htl` fragment generating functions for drawing the square version of the Asanoha pattern.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"function asanohaQuadrant(transform, stroke=\"black\", strokeWidth=2) {\n return htl.svg.fragment`\n \n \n \n`}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"function asanoha(x, y, size, stroke=\"black\", strokeWidth=2) {\n return htl.svg.fragment`\n ${asanohaQuadrant(\"scale(0.5)\", stroke, strokeWidth)}\n ${asanohaQuadrant(\"translate(50, 50) scale(-0.5 0.5)\", stroke, strokeWidth)}\n ${asanohaQuadrant(\"translate(50, 50) scale(0.5 -0.5)\", stroke, strokeWidth)}\n ${asanohaQuadrant(\"translate(100, 100) scale(-0.5 -0.5)\", stroke, strokeWidth)}\n`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"htl.svg`