2e:null 2f:["$","title",null,{"children":"Fit ‘N’ number of squares in a rectangle | Saneef H. Ansari | Observable"}] 34:[] 32:{"id":"d89c2e5be3d8d614","slug":"fit-n-number-of-squares-in-a-rectangle","title":"Fit ‘N’ number of squares in a rectangle","thumbnail":"15d7f767cde45ee4e69e52080b51d2142ee4f3bc2a35590e30f534379800e85f","access_level":"public","create_time":"$D2022-01-11T07:30:12.935Z","update_time":"$D2023-09-04T08:56:05.300Z","view_time":null,"first_public_time":"$D2022-01-11T09:23:04.639Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024"},"version":281,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}],"members":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"000ba008ab4b0a6d","slug":"helpers","title":"Utilities & Helpers","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"title":"Fit ‘N’ number of squares in a rectangle","cells":[{"id":0,"value":"# Fit ‘N’ number of squares in a rectangle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"## Usage\n\n### 1. Import\n\n```js\n import {squaresInRectangle} from '@saneef/fit-n-number-of-squares-in-a-rectangle'\n```\n\n### 2. Use\n\n```js\n // Try to fit approximately 3 squares in a rectangle of 200px wide and 150px tall.\n squares = squaresInRectangle(200, 150, 3)\n\n squares = {\n side: 75, /* Side of the fit-able square */\n rows: 2, /* Rows of square you can fit */\n cols: 2, /* Columns square you can fit */\n count: 4, /* Actual number of square you can fit */\n }\n```\n\nYou can use fourth argument _(optional)_ for `squaresInRectangle()`,\n`roundDownSide` (Boolean) to round down the `side`.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof approxNumOfSquares = Inputs.range([1, 250], {\n label: md`Squares to fit (approximate)`,\n step: 1,\n value: 36\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof roundDownSide = Inputs.toggle({ label: \"Round down side\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`Actual number of squares: **${squares.count}**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof aspectRatio = Inputs.range([1, 4], {\n label: md`Rectangle aspect ratio (1:x)`,\n step: 0.005,\n value: 1.6\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof orientation = Inputs.radio(\n new Map([\n [\"Landscape\", \"landscape\"],\n [\"Portrait\", \"portrait\"]\n ]),\n {\n label: \"Orientation\",\n value: \"landscape\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"squares = squaresInRectangle(width, height, approxNumOfSquares, roundDownSide)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"margin = ({\n top: (height - squares.rows * squares.side) / 2,\n left: (width - squares.cols * squares.side) / 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"squaresPositions = {\n return Array.from({ length: squares.rows })\n .map((_, i) =>\n Array.from({ length: squares.cols }).map((_, j) => [\n j * squares.side,\n i * squares.side\n ])\n )\n .flat();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"/**\n * Computes squares that can be fitted with a rectangle of\n * given width and height.\n *\n * @param {number} w Width of the rectangle\n * @param {number} h Height of the rectangle\n * @param {number} n Approximate number of squares to fit\n * @return {Object} {side, rows, cols, count}\n */\nfunction squaresInRectangle(w, h, n, roundDownSide = false) {\n let sx, sy;\n\n const px = Math.ceil(Math.sqrt((n * w) / h));\n\n if (Math.floor((px * h) / w) * px < n) {\n sx = h / Math.ceil((px * h) / w);\n } else {\n sx = w / px;\n }\n\n const py = Math.ceil(Math.sqrt((n * h) / w));\n\n if (Math.floor((py * w) / h) * py < n) {\n sy = w / Math.ceil((w * py) / h);\n } else {\n sy = h / py;\n }\n\n let side = Math.max(sx, sy);\n\n if (roundDownSide) {\n side = Math.floor(side);\n }\n const rows = Math.floor(h / side);\n const cols = Math.floor(w / side);\n const count = rows * cols;\n\n return {\n side,\n rows,\n cols,\n count\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"height = {\n const height =\n orientation === \"portrait\" ? width * aspectRatio : width / aspectRatio;\n return Math.round(height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"palette = ({\n background: \"hsl(0deg,0%, 95%)\",\n foreground: \"hsla(0deg,50%, 50%, 50%)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"## Credits\n\nThe code is based on the method narrated by [chubakueno on math.stackexchange.com](https://math.stackexchange.com/a/466248)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":269,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"