Particle Cloud
This is a "semi-orbital" particle cloud animation that I've created around three years ago (2010) but have now
updated and optimized to use requestAnimationFrame etc.. It's a Canvas based animation that uses I wrote from
scratch without using any libraries (except jQuery, but it can be easilly rewritten to not require it).
The particles are randomly generated during the initialization stage (colour, size etc.) and then are non-randomly animated using quasi-physics that actually aren't similar to anything in real life.
Quasi-physics
The idea behind the "physics" over here is creating a "magnetic well" that attracts particles, and then repels them once they reach the "well". The particles accelerate until they reach their maximum velocity or until they reach the well. After reaching the well, they start deaccelerating based on the value of detraction set in the script. The particles do not travel to the well using a straight line - their path is actually curved in order to achieve a more interesting effect.
The smaller particles travel slower which creates an illusion of 3D.
Using the script
You can initialize the script by calling the following:
ParticleCloud.init(canvasID, numberOfParticles, beforeRenderCallback, afterRenderCallback)
canvasId is a string representing the id of the canvas in your HTML file, the rest of the arguments are optional
and are self-explainatory. The script expects the HTML file to only have a single canvas element as it resizes it to
fill the browser window, however this behaviour can be easily changed.
Demo
By default the particles will follow your cursor (or finger on touch-screen devices). You can click to repel the particles.
Demo with 10000 particles (warning, can be really slow!)
Licence
MIT