Buckets:
20.9 GB
673,093 files
Updated about 2 months ago
Ctrl+K
| Name | Size | Uploaded | Xet hash |
|---|---|---|---|
| LICENSE | 738 Bytes xet | 42e72732 | |
| README.md | 1.46 kB xet | f2001cec | |
| index.d.ts | 808 Bytes xet | 7959036e | |
| index.js | 3.65 kB xet | 1eba2c2a | |
| index.mjs | 3.11 kB xet | b1810c3b | |
| package.json | 1.24 kB xet | 45f7188a |
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, 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 and bin-pack, which are in turn based on this article by Blackpawn.
Demo
Example usage
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:
// import as an ES module
import potpack from 'potpack';
// or require in Node / Browserify
const potpack = require('potpack');
Or use a browser build directly:
<script src="https://unpkg.com/potpack@1.0.1/index.js"></script>
- Total size
- 20.9 GB
- Files
- 673,093
- Last updated
- Mar 19
- Pre-warmed CDN
- US EU US EU