"Broken Mirror" is an html5 experiment that combines vornoi-based space partitioning and Verlet physics.
Originally I implemented the rigid body physics for another project and wanted to play with it in a different context. I also wanted to gain experience in using the webcam within an html canvas.
The Voronoi diagram is generated using Raymond Hill's implementation and the physics is based on Thomas Jakobsen's algorithm.
Process
When the user clicks the image, a Voronoi diagram is generated. The sites used to determine the cells are arranged with more density around the mouse so that the fragments are smaller where the user clicked.
The rigid bodies' structure is based on this diagram, each vertex is a Verlet particle linked to each other particle of the cell. In the experiment you can see the underlying structure by activating the "wireframe" option.
At this point a canvas element is created for each cell and the corresponding part of the current frame copied to this element with a mask applied to it. This operation is very slow in javascript and this is why the image is no longer animated once it is split, webGL does a better job at this.
Then during the animation the gravity and the constraints are applied to each vertex. The cell's transform is computed by comparing two vertices' current and initial positions so that the corresponding canvas can be drawn at the right place on the output canvas.
You can launch the experiment by clicking on the image below.
