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
$ 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 with grunt.
$ grunt build
This will create three files in ./build:
- d3voronoi.js: d3 built specifically for voronoi generation
- shatter.js: Includes Shatter and d3voronoi.js
- shatter.min.js: Minified shatter.js.
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:
- shattered.images[i].image - The image segment
- shattered.images[i].x - X-offset
- shattered.images[i].y - Y-offset
See the examples for more details!
More examples and usage instructions to come.
Interactive example uses Shatter.js to split the image and jGravity To add gravity to the new images produced.
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.
Shatter.js is created and maintained by Cory Gugler