31:[] 2f:{"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"},{"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"},{"id":18,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":276,"value":"viewof roundDownSide = Inputs.toggle({ label: \"Round down side\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`Actual number of squares: **${squares.count}**`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":83,"value":"squares = squaresInRectangle(width, height, approxNumOfSquares, roundDownSide)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":44,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":258,"value":"width","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"palette = ({\n background: \"hsl(0deg,0%, 95%)\",\n foreground: \"hsla(0deg,50%, 50%, 50%)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":261,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":263,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}