The idea for this experiment was pretty simple. What if you could take a picture, explode it out into a ton of particles, and then combine it with some form of magnetism? When it came to actually building it I actually ended up needing to use a combination of four technologies: HTML5‘s Drag and Drop, File API, Canvas and also WebGL.
To begin with I attach event listeners to the main container for Drag and Drop. If you drop an image onto the container the File API takes over and reads in the image. Once that’s done the image is written into a canvas, and that’s where it actually gets a little more interesting.
At this point we can now split out the image to particles, by doing a pass over the pixels in the canvas and pulling out the RGB components of each. Given, however, that an image of 600 by 600 would give 360,000 particles if mapped directly, I opted to only pull out each 10th pixel (by default, you can change that if you like) and use that instead. Even with this you easily get into the thousands.
Making it interesting
So we’ve got these particles, but how can I make it interesting? Well, a pretty cool thing to do with particles is introduce some physics so I figured I could work with what I’ve got: RGB values. I introduced three magnets to the scene, one per colour component, and figured that each particle should be attracted or repelled by each magnet depending on how much of that component colour the particle contains. Red particles would be more attracted to the red magnet, and so on.
After that it was just a case of letting the physics take its course and addding some options for the user interface so people could play around with magnet strengths and particle densities.
I’ve been blown away by the reception to this little experiment. In fact after it was pushed live (and tweeted about by a few notable people) my lab traffic shot up by 4,793% in one day - quite a spike!