Skip to content
A javascript binary tree based algorithm for 2d bin-packing suitable for generating CSS sprites. Now - Node.js compatible!
Pull request Compare This branch is even with jsmarkus:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
css
js
LICENSE
README.md
index.html
node-test.js
package.json

README.md

Binary Tree Algorithm for 2D Bin Packing

This project is a javascript experiment to write a binary tree based bin packing algorithm that is suitable for generating CSS sprites.

NPM install

npm install binpacking

NodeJS usage

var binpacking = require('binpacking');
var Packer = binpacking.Packer;
var GrowingPacker = binpacking.GrowingPacker;
var blocks = [{w:100, h:100}, {w:100, h:100}, {w:100, h:200}];
var packer = new GrowingPacker;
packer.fit(blocks);
console.log(blocks);

NodeJS demo

Clone this repository:

git clone https://github.com/jsmarkus/node-bin-packing

See usage example: https://github.com/jsmarkus/node-bin-packing/blob/master/node-test.js

Run the demo:

node node-test.js

Demo

Clone this repository

git clone https://github.com/jsmarkus/node-bin-packing

View the index.html file in your favorite browser for examples of algorithm in use with lots of configurable options.

Usage

If you want to use this in your own javascript projects, you need something like this:

<script src='packer.growing.js'></script>
<script>
  var packer = new Packer(1000, 1000);   // or:  new GrowingPacker();
  var blocks = [
    { w: 100, h: 100 },
    { w: 100, h: 100 },
    { w:  80, h:  80 },
    { w:  80, h:  80 },
    etc
    etc
  ];

  blocks.sort(function(a,b) { return (b.h < a.h); }); // sort inputs for best results
  packer.fit(blocks);

  for(var n = 0 ; n < blocks.length ; n++) {
    var block = blocks[n];
    if (block.fit) {
      DrawRectangle(block.fit.x, block.fit.y, block.w, block.h);
    }
  }
</script>

See source code comments for more details.

License

See LICENSE file.

Contact

If you have any ideas, feedback, requests or bug reports, you can reach me at jake@codeincomplete.com, or via my website: Code inComplete

Something went wrong with that request. Please try again.