potpackweighted
A tiny JavaScript library for packing 2D rectangles into a near-square container with priority based on a weight provided, 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.
Example usage
; const boxes = w: 300 h: 50 weight:9 w: 100 h: 200 weight:0 ...; const w h fill = ;// w and h are resulting container's width and height;// weight increases how close to the top left the box will be placed // fill is the space utilization value (0 to 1), higher is better // potpack mutates the boxes array: it's sorted by weight and then height,// and box objects are augmented with x, y coordinates:boxes0; // {w: 300, h: 50, weight:9, x: 100, y: 0}boxes1; // {w: 100, h: 200, weight: 0, x: 0, y: 0}
Install
Install with NPM (npm install potpackweighted
) or Yarn (yarn add potpackweighted
), then:
// import as an ES module; // or require in Node / Browserifyconst potpackweighted = ;
Or use a browser build directly: