Poudro's blog
CTO / Data Scientist / Problem Solver - Consultant

Bubbles and canvas

Bubbles and canvas - poudro.com développeur web freelance


In an attempt to test the capabilities of canvas while also researching graph layouts, I came up with this little home made experiment. It’s in a very early stage for now, but I have a few ideas of directions I might like to take it.



=> check out the demo here


In the current demo, there are 100 independant elements (which I will call bubbles) that act like particles in a simplistic model of molecular interactions. Every bubble interacts with every other though a combination of Hook’s law of elasticity and Coulomb law relating to the effects of two electrically charges particles on each other. Once that said, what is really important to notice is that these interactions require n² computations at each step, where n is the number of particles, to complete. This is taking place on your computer within the confines of the javascript engine of your browser.


The things I’ve experimented with here are things like the requestAnimationFrame which is a very powerful replacement for the classical timer loop in javascript when doing animations on canvas. The browser “knows” when the next update can be done and does it (more about this here). Also, I’m overall very impressed by the performances of canvas as I can run this seemlessly on my old laptop. I’m also very fond of the completeness of the addEventListener methods (more here).


That’s all for now, stay tuned for more on this… :)




01 Aug 2011