|
download
raw
1.46 kB
# potpack
A tiny JavaScript library for packing 2D rectangles into a near-square container,
which is useful for generating CSS sprites and WebGL textures. Similar to [shelf-pack](https://github.com/mapbox/shelf-pack),
but static (you can't add items once a layout is generated), and aims for maximal space utilization.
A variation of algorithms used in
[rectpack2D](https://github.com/TeamHypersomnia/rectpack2D) and
[bin-pack](https://github.com/bryanburgers/bin-pack),
which are in turn based on
[this article by Blackpawn](http://blackpawn.com/texts/lightmaps/default.html).
## [Demo](https://mapbox.github.io/potpack/)
## Example usage
```js
import potpack from 'potpack';
const boxes = [
{w: 300, h: 50},
{w: 100, h: 200},
...
];
const {w, h, fill} = potpack(boxes);
// w and h are resulting container's width and height;
// fill is the space utilization value (0 to 1), higher is better
// potpack mutates the boxes array: it's sorted by height,
// and box objects are augmented with x, y coordinates:
boxes[0]; // {w: 300, h: 50, x: 100, y: 0}
boxes[1]; // {w: 100, h: 200, x: 0, y: 0}
```
## Install
Install with NPM (`npm install potpack`) or Yarn (`yarn add potpack`), then:
```js
// import as an ES module
import potpack from 'potpack';
// or require in Node / Browserify
const potpack = require('potpack');
```
Or use a browser build directly:
```html
<script src="https://unpkg.com/potpack@1.0.1/index.js"></script>
```

Xet Storage Details

Size:
1.46 kB
·
Xet hash:
f2001cec1eba599bf522a784a878f9a34664cadf632a7ca2d4110644d567577b

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.