
Dots!

Simon C Page's Colourful Universe posters inspired me to make a javascript canvas particle-system in a similar style.
Click to launch demo
(Try left clicking or pressing space, press "p" to pause)
In truth this was made to look cool and be fun to play with, but if you want to understand the model, here you go: Each dot has a randomly generated color, mass, 3d position and initial velocity. They are "attached" to your cursor by invisible 75-pixel-long damped springs (that magically can pass through each other, nor is there gravity), so when they are more than 75 pixels from your cursor they are attracted to it and when they are closer than 75 pixels they are repulsed. Left clicking extends the length of the springs, pushing them out. Pressing space toggles the black background being drawn each frame and pressing "p" pauses the animation.
A fun consequences of this model (I think) is that you can make a sort of reverse-centrifuge by moving your cursor in a circle. With less inertia, the smaller particles get thrown to the outside.
Update: Now you can tweak the spring "stiffness", mass and friction of the system! In Webkit based browsers you will get nifty sliders, in everything else you get boring text fields.
Update 2: I noticed that because of the rounding involved, its not very hard to get all the points of a particular radius to stack on top of each other and not be able to separate them, especially if you turn the friction all the way up. So I added a new feature, press "e" to impart a random velocity on all the particles - or as I like to call say "make them freak out.

Nicholas Wellcome is a software engineer fresh out of grad school and newly relocated in Boston, MA 


