A set of javascript functions for calculating how large a set of equally sized squares or rectangles can be to fit within an arbitrary rectangular container, to cover it as fully as possible.
Useful for graphical layouts where you need to space items in a nice way. This algorithm does not allow for rotations, and is not generic bin packing.
Install from npm:
npm install rect-scaler
Pass the size of the container and the number of squares that need to be placed to largestSquare(),
resulting in an object containing the optimal solution.
import { largestSquare } from "rect-scaler";
const containerWidth = 100;
const containerHeight = 100;
const numSquares = 8;
const { rows, cols, width, height, area } = largestSquare(
containerWidth,
containerHeight,
numSquares
);Pass the size of the container and the number of rectangles that need to be placed, along with the size of an (unscaled) rectangle that needs to be placed, resulting in an object containing the optimal solution.
import { largestRect } from "rect-scaler";
const containerWidth = 100;
const containerHeight = 100;
const numRects = 8;
const rectWidth = 10;
const rectHeight = 2;
const result = largestRect(
containerWidth,
containerHeight,
numRects,
rectWidth,
rectHeight
);yarn test
- A mode to only allow for equally-sized rows, which would mean that not all rectangles could be placed, but the result would be more visually elegant.
- It might always be the case that the optimal solution is the one where the meta-rectangle's aspect ratio most closely matches that of the container? Worth investigating as an optimization
Inspired by this question on Math StackExchange.
Erich's Packing Center is also pretty interesting, for mathematical thought behind more complex versions of this.
MIT, see LICENSE.md for details.