Here we go with the thir part of the jigsaw puzzle generator made with KineticJS. In the first step we splitted an image into pieces, in the second step we created a jigsaw piece shape, and now it’s time to cut an image into randomly generated pieces.
The code is still uncommented but the concept is:
* Any piece has four sides
* Each side can have a “hill” or a “hole”, with the exception of sides on puzzle borders which are straight
* Starting from the upper left piece, we randomly decide if left and bottom sides will be “hill” or “hole”
* Accordingly, leftmost and upper pieces (if any) will have “hole” to host “hill” or “hill” to host “hole”
This is the code:
And you can see the final result here.
Pick and drag pieces around
Is there something more you would like to see about this topic? Maybe how to rotate and join pieces?