Chaotic Particles HTML5 Canvas Demo

written by Jonas Wagner, on 12/15/10 9:56 PM.

I created this demo more or less by accident when prototyping some particle mechanics for a game. It is based on a particle system, and an acceleration map but more on that later. It reminds me quite a bit of simulations of galaxy formation or a lava lamp, it's really nice to watch.

Demo

Click the image to open the demo. In the demo, set the particles in motion by dragging with your mouse.

Mobile devices

This demo also works on Android including fullscreen (tested on a nexus one with 2.2), iPhone and iPad! Give it a try ;)

How it works

Each particle has a position and a velocity stored in a typed Float32Array (yes, they work on iOS). In addition to that there is an acceleration 'map' in the background. When you drag over the particle system, you initialize the acceleration map which sets the whole system in motion.

accelerationMap[particle.position] += particle.velocity*someFactor
particle.velocity += accelerationMap[particle.position];
particle.position += particle.velocity;
...

The magic sauce to it is the feedback from the particle velocity to the acceleration map. Together with some damping this results in the system you are seeing. For more details, feel free to have a look at the source.

Comments

Nice! Quite surprised with the performance+amount of particles :)

Comment by Mr.doob — 12/17/10 11:08 AM | # - re
And how it is running on my iPad... Why is it, that the iPad on system-base can handle the greatest oarticle animations but when it comes to HTML5 its lags like its 1994. Gosh, not even a single GIF runs smooth on this piece of junk. mobileSafari sure is a pain in the ass....

Comment by sebastian salzgeber — 12/17/10 3:49 PM | # - re
- It runs fluid on mine, did you upgrade to iOS 4.2?
  
  Comment by Jonas Wagner — 12/17/10 4:37 PM | # - re
This is great, It's running smooth on Chrome dev. I can see certain games being built in a similar fashion.
Does anyone know how browsers handle frames in canvas? I noticed with many different demos that there are a few times when the animation somewhat chokes.

Comment by Aaron — 12/17/10 6:25 PM | # - re
for me it works much much faster in Wine with firefox 4b7 than in native linux 64 with firefox 3.6.13

Comment by Andre_H — 12/19/10 10:22 PM | # - re
works on nexus S but particles are taller than wide and animation is not so smooth

Comment by gc — 1/21/11 12:40 PM | # - re
nice,
can be used to simulate water.

Comment by ra — 1/27/11 3:17 PM | # - re
very nice!! indeed i'm also surprised how speedy it is given the # particles.
It looks similar to the particle system in this paper:
www.math.ucla.edu/~bertozzi/papers/PRL06.pdf
is it?

Comment by particulator — 2/12/11 6:46 PM | # - re
This is quite stunning to watch. Is there anyway that I might use this as a screensaver?
Running Win7 Ultimate, if that helps.

Comment by Jake — 3/4/11 2:56 AM | # - re
This is really beautiful. The first thing that came to my mind was waves crashing against rocks on a shoreline (of New England perhaps).

Comment by Teri — 4/3/11 4:18 AM | # - re
I agree, a very neat (but CPU/GPU hungry) screensaver indeed, but it seems to have a sinkhole (blackhole) in the upper left corner. Anyone else having this issue? I think it has something to do with the "ai" factor, as the sink gets the shape of a cell. Not an issue in Opera, but it appears in Chromium. Maybe a bug in number inversion?

Comment by Luis — 5/3/11 1:36 PM | # - re
- Interesting it's probably a bug in the reflection code, because I do not compare the normal of the edges to velocity of the particle this in addition to the inacuracy of the inversion is most likely the issue. :)
  
  Comment by Jonas Wagner — 5/3/11 2:05 PM | # - re
This is quite a charming affect. Nice discovery!
I'll add this to my list of cool effects to convert to coffeescript, to help get me comfortable with the syntax.
:D

Comment by Mark Essel — 6/22/11 3:46 PM | # - re
- Oh, the code is pretty concise. I'll check this out later (did a quick test with Js2coffee) ricostacruz.com/js2coffee/
  https://gist.github.com/1040116
  
  Comment by Mark Essel — 6/22/11 3:50 PM | # - re
I got it working smoothly with coffeescript (not much of an issue), and then added some variants.
one starfield that oscillates through the colors from dim to bright, another that goes through the color spectrum. Unfortunately they run a little slower.
victusfate.github.com/html5_chaos/

Comment by Mark Essel — 6/24/11 12:42 PM | # - re

29a.ch