potpack

What is potpack?

The potpack npm package is a utility for packing rectangles into a single bin. It is useful for tasks such as packing images into a texture atlas or arranging elements in a confined space efficiently.

What are potpack's main functionalities?

Rectangle Packing

This feature allows you to pack a list of rectangles into a single bin. The function returns the width and height of the bin and the fill rate. The input rectangles are modified to include their x and y positions in the bin.

const potpack = require('potpack');

const rectangles = [
  { w: 100, h: 200 },
  { w: 300, h: 100 },
  { w: 50, h: 50 }
];

const { w, h, fill } = potpack(rectangles);
console.log(`Packed width: ${w}, height: ${h}, fill: ${fill}`);
console.log('Rectangles:', rectangles);

Other packages similar to potpack

bin-pack

The bin-pack package provides similar functionality for packing rectangles into a bin. It offers a more flexible API with support for different packing algorithms. Compared to potpack, bin-pack may offer more options but could be more complex to use.

README

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.

Potpack is provided as a ES module, so it's only supported on modern browsers, excluding IE:

<script type="module">
import potpack from 'https://cdn.skypack.dev/potpack';
...
</script>

In Node, you can't use require — only import in ESM-capable versions (v12.15+):

import potpack from 'potpack';