Make awesome effects using physics and javascript

The Physics library

Elastic smooth movement is everywhere and I wanted to experiment with it a bit for my consultancy little web page at Besides I had this effect in my head for some time now. I wanted to blow my divided photo away and reunite it again in different combinations, as you will see below.

Final attract example snapshot

I started to look around for a physics simulation library. It should be fast, in other words, it should have only exactly what I needed for accomplishing those effects and not much more that would slow the computations. And I really found it on this physics javascript library by Jono Brandel.

The library is pretty straightforward: setup 2D particles and forces between them and hit “go”.

The effects

Besides the effects that I have described for my photo, I wanted a similar effect for a word cloud. In fact the effect is the inverse of the one on my photo: instead of the mouse repel stuff, mouse pointer would attract stuff!

Read the full article.