If you liked this, Chrome Experiments is filled with particle examples: <a href="http://www.chromeexperiments.com/search/results.html?q=particles" rel="nofollow">http://www.chromeexperiments.com/search/results.html?q=parti...</a><p>Three.js also has some pretty nice to follow particles samples:<p><a href="http://threejs.org/examples/#webgl_particles_random" rel="nofollow">http://threejs.org/examples/#webgl_particles_random</a><p><a href="http://threejs.org/examples/#webgl_particles_sprites" rel="nofollow">http://threejs.org/examples/#webgl_particles_sprites</a><p><a href="http://threejs.org/examples/#webgl_buffergeometry_particles" rel="nofollow">http://threejs.org/examples/#webgl_buffergeometry_particles</a>
The frame rate is incredible given the number of particles. JavaScript interpreters really have come a long way.
The frame rate for JS particle simulation beats the frame rate you get when you tell a browser to append content, which is usually native C/C++ optimized to death.<p>To the author: great work. It looked very much alive on my screen when I first loaded the page.
Does anyone have the theoretical description of what is happening? I'm curious about the fractal patterns being generated and the increasing in entropy and the that results in a catastrophic failure of the stable system. Is this some kind of chaotic system or is just an force field being applied on the particules.
I would love to see a choice of initial conditions, one of which being a couple 'galaxies' of particles on a collision course.<p>Also, a way to reset the simulation without reloading the page would be nice.
The presentation this is from is at <a href="http://www.cake23.de/fmx/" rel="nofollow">http://www.cake23.de/fmx/</a> - there's a lot more good stuff inside than just this.
I'm the original author of this little WebGL experiment and i want to try to answer some questions that came up here.<p>1) implementation
there's quite some boilerplate in JS to set up all the textures and the main animation loop, but if you look closely the CPU is mostly idle and the "heavy lifting" is all done on the GPU by several shader programs. There are no libraries used and you can take a copy of the html file and simply start by breaking things apart.
For the massive speed I'm updating the particle data with a clever fragment shader trick that i've learned from <a href="https://twitter.com/BlurSpline/status/161806273602519040" rel="nofollow">https://twitter.com/BlurSpline/status/161806273602519040</a>
And in a DIY fashion, I've mashed this up with my own texture feedback loop.
The main idea is that the particle positions (and the velocity vectors too, each 2D only) are stored in a texture's rgba values (float32). So updating the particles data is in fact a render process of a quad in one draw call. Then I had also rendered the particles to another texture to sum up the "density" of the primitive 1 pixel point projections.<p>2) complexity
when it comes to the mere particle count, the complexity really is O(n), but there's a wee bit more to it. The projection of the particles to the framebufferobject or the screen is the most costly in this setup and it's fillrate-limited by the graphics card. There's a noticeable difference when the particles are evenly distributed or when they overlap, but it must stay in the O(n) realm i suppose. Then there's another texture feedback loop system that is also directly dependent on the pixel count.
The particles are stored in a 1024x512 pixels wide texture and the hidden texture feedback layer is also of that size, but it could differ too.
There is absolutely no direct interaction between any two particles here. I project the particles to a density texture that is then diffused with an optimized two-pass Gaussian blur calculation and several resolution reduction steps.
All the textures from the different steps are available as in put sampler to the shader programs, in particular "fs-advance" for the Turing patterns and the density projection (hey there, the blue channel is unused ^^) and "fs-move-particles" where i simply grab the gradient from the diffused density to update the particle's velocity vector and do the verlet integration.<p>The concepts used here also have names - just ask google or wikipedia for "dissipative systems/structures" and "stigmergy".<p>3) the fluid simulation code is not by me!
Evgeny Demidov is the original author of the WebGL shaders for that: <a href="http://www.ibiblio.org/e-notes/webgl/gpu/fluid.htm" rel="nofollow">http://www.ibiblio.org/e-notes/webgl/gpu/fluid.htm</a>
I'm only adding to the current advection matrix<p>4) code size
this could possibly fit into a 4k demo but i have no interest in that kind of challenge. i rather like to share something that is easily readable by others.<p>cheers!
Took me a long time to notice that my cursor movements were injecting disturbances into the fluid. What physical laws govern these points, and how is the cursor perturbing them?
is there anything detailing the maths/programming techniques behind this? can anyone confirm whether this is Barnes-Hut?<p>I've had a look here: <a href="http://creativejs.com/2013/11/coupled-turing-pattern-and-219-particles/" rel="nofollow">http://creativejs.com/2013/11/coupled-turing-pattern-and-219...</a><p>but there's no details on the specifics
Since a load of unfeeling morons have taken over HN, let me say for them that this was amazing. Thank you.<p>I really <i>can</i> <i>not</i> <i>wait</i> until there is some new community to which these unemotional sociopaths can wander.