Shatter.js

JavaScript Canvas Image Shattering

Download as .zip Download as .tar.gz View on GitHub

Shatter.js

Shatter.js provides simple image shattering by dividing a given image with a Voronoi diagram.

Uses a custom build of D3.js to generate the Voronoi diagram used to split up the given image.

"JUST TAKE ME TO THE EXAMPLES ALREADY" - Everyone

Install

Get dependencies:

$ bower install && npm install

This will install d3.js (required for Voronoi generation) and smash (to build custom d3.js with Voronoi specific functions only).

Build

Build with grunt.

$ grunt build

This will create three files in ./build:

Documentation

Include shatter.min.js in your project.

Create a new Shatter object. Pass in the image to shatter and the number of segments to split it into.

var image = new Image();
image.src = "aPictureOfSomethingCool.png";
var shattered = new Shatter(image, 10);

Your new shattered object will contain images and x, y coordinates for each segment. shattered.images will be an array of objects (10 in this example) containing each segment and the x, y offsets.

Each segment (i) will contain these useful properties:

See the examples for more details!

Examples

More examples and usage instructions to come.

DOM Example

Interactive example uses Shatter.js to split the image and jGravity To add gravity to the new images produced.

Phaser Example

Uses Shatter.js to split the image and adds each new image to a Phaser game sprite group.

See /examples for a DOM and Phaser.js example.

License

Credits

Shatter.js is created and maintained by Cory Gugler