Particle Simulation With HTML Canvas

My wife was watching Desperate Housewives on the couch. I felt comfortable sitting there except that my eyes were burning. Hence, I chose to code a virtual lavalamp in Javascript, using HTML5 canvas.

I noticed that the graphics part was quite easy, except that I had to google how to draw a circle. This is how:

ctx.arc(x, y,radius,0,Math.PI*2,true);

I also discovered that my lava lamp is quite fluid in Chrome but incredibly slow in Firefox. Why so? Plz tell me.

Have a look at the code at https://github.com/raimohanska/particles.

Live demo @ http://juhajasatu.com/particles/

I could write a longer story on this, but I don't have time right now. Maybe the code will speak for itself, though. I'm pretty happy with it, having separated concerns like particle interaction, rendering, and particle heating by the "lamp" on the bottom. It's fun to tweak the parameters every now and then.