KineticJS Sand Particles

This is a cool example of what you can do with the canvas element for HTML5. I used a canvas framework called KineticJs which allows multiple canvases to be placed on top of each other and animated individually to improve performance. I used a grid and a simple pathing algorithm to prevent overlap and randomly set the speed of each 'grain'.

Visit http://yuccaberry.com/projects/sandman/ to see this in action

You can set the number of grains in the URL query string. eg: http://yuccaberry.com/projects/sandman/?num=500 will set 500 grains of sand.

The project's KineticJS JavaScript Library v3.6.2 is outdated. Visit kineticjs.com to get the updated library.