Need private packages and team management tools?Check out npm Teams »

potpack

1.0.1 • Public • Published

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.0/index.js"></script>

Install

npm i potpack

DownloadsWeekly Downloads

211,011

Version

1.0.1

License

ISC

Unpacked Size

10.1 kB

Total Files

5

Last publish

Collaborators

  • avatar