I’ve been playing around with HTML5’s new Canvas tag and trying to convert some of my old Flash particle and proximity experiments. My favorite of these trials has always been the web spinning art (which unfortunately is no longer working on the blog).
By using a grid-based proximity manager, you click and drag your mouse across the canvas. As you drag, particles are created at your point of contact. They have a random direction and velocity. Particles are slightly attracted to each other, so depending on how much velocity they have, they will turn inward towards each other. There is also friction in the environment that cause the particles to slow down and eventually disappear.
While the code (especially the proximity manager) is pretty ugly, I do take advantage of some new features of the canvas tag, as well as use object-pooling to speed up object creation.
If you are unfamiliar with object-pooling its pretty simple. When I create a particle, it runs it course and is no longer needed, rather than wait for garbage collection to clean up the particle, I move it to a dead-particles array. When a new particle is requested, rather than instantiating a new particle (and thus using more memory), I first check if there are any dead particles that can be reused and grab one of those.
I have two versions of the web spinner, a mouse-only desktop version and an multi-touch version for tablets & phones. The multi-touch version does not use the ‘lighter’ blend mode or multiple random colors to help speed up performance. Also note, that since these are experiments, I’ve done no testing on browsers outside of Chrome or optimized to make touch/mouse events interchangeable.