
JavaScript particle simulator - filipedeschamps
http://www.cake23.de/fmx/turing-fluid-particle-projection-feedback.html
======
DanielRibeiro
If you liked this, Chrome Experiments is filled with particle examples:
[http://www.chromeexperiments.com/search/results.html?q=parti...](http://www.chromeexperiments.com/search/results.html?q=particles)

Three.js also has some pretty nice to follow particles samples:

[http://threejs.org/examples/#webgl_particles_random](http://threejs.org/examples/#webgl_particles_random)

[http://threejs.org/examples/#webgl_particles_sprites](http://threejs.org/examples/#webgl_particles_sprites)

[http://threejs.org/examples/#webgl_buffergeometry_particles](http://threejs.org/examples/#webgl_buffergeometry_particles)

------
theGimp
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.

To the author: great work. It looked very much alive on my screen when I first
loaded the page.

~~~
ye
It's not really JS, shaders are doing all the heavy lifting.

~~~
primelens
Could you explain what's really going on here. What part is JS responsible for
and how is native code being used? Thanks.

EDIT: I assume the "native-code" part is something like webgl?

~~~
10098
WebGL is just a JavaScript API specification that exposes an OpenGL-like
interface to scripts running within a webpage. The calls that your JavaScript
makes to WebGL functions are translated behind the scenes to actual OpenGL
calls (although, it doesn't have to be opengl, i think IE uses directx under
the hood). Both opengl and directx are API interfaces that allow you to talk
to graphics hardware.

Graphics hardware is incredibly fast and programmable (via shaders), and now
that WebGL is part of the standard, Javascript programs can actually use the
hardware's capabilities. What we see in a lot of this demos is not the
javascript interpreter being fast. Although chrome's V8 actually _is_ fast
(compared to other js implementations at least), most of the work is being
done by the video card.

~~~
inDigiNeous
Firefox and Safari JS compilers are actually fast too. Even faster than V8 in
some cases.

For example, I was surprised to find out recently that Firefox 25 is smoother
and faster nowadays than Chrome on Mac Os X when running my interactive
geometry genereator that is based on javascript/canvas
([http://GeoKone.NET](http://GeoKone.NET)).

------
arturventura
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.

~~~
Flexi23
half a million particles are rendered to a texture, which is then blurred, and
the gradients are used to update the velocity of the particles in a feedback
loop. There's no direct interaction between individual particles. There are
two words to describe the haphazard in the behavior. Use Google or Wikipedia
to learn about "dissipative systems" and "stigmergy".

------
technotony
This is beautiful, after watching I feel like I finally understand how the
universe developed structure after the big bang.

------
clarkmoody
I would love to see a choice of initial conditions, one of which being a
couple 'galaxies' of particles on a collision course.

Also, a way to reset the simulation without reloading the page would be nice.

~~~
acadien
Galaxies would require coupling of the particles, interactions through
gravity... this would kill the efficiency of the solver. N-Particle
simulations are always O(N^2) (or more).

~~~
bochi
Barnes-Hut is O(n log n)
[http://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation](http://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation)

~~~
acadien
Yes, once you start cutting off long range effects you can improve on the
strict O(N^2) limitations.

~~~
cscheid
It's not cutting off. It's replacing many long-range effects with a single one
weighted more (and done it carefully so that the floating-point error is
literally smaller than you could tell).

There's even better methods that take O(n) time, like the fast multipole
expansion ones.

~~~
darkmighty
Btw this goes into numerical analysis, and O(-) is important but so is error
convergence. I imagine these big-O figures are for a constant error, but I
figure the asymptotic may change behavior as the other parameter changes.

------
joshu
The presentation this is from is at
[http://www.cake23.de/fmx/](http://www.cake23.de/fmx/) \- there's a lot more
good stuff inside than just this.

------
DanBC
Y U NO SUPPORT OES_texture_float_linear?

Using Version 31.0.1650.57 m Google Chrome is up to date

~~~
gilgoomesh
It's not a friend of Safari 7 with WebGL enabled, either.

~~~
pygy_
It works fine in Safari 6, although ~30% slower than Chrome and Firefox (which
run at 20-30 FPS, 2012 MBA, Intel HD4000).

It complains about the lack of an OpenGL extension, but it looks fine.

------
d23
I find this infinitely more interesting than the recent "X in 2.3 lines of JS"
trend lately.

~~~
girvo
Oh come on, the ray tracer was really neat.

------
iLoch
So how long do I have to wait to see it go back to it's initial position?
(Theoretically...)

------
Flexi23
I'm the original author of this little WebGL experiment and i want to try to
answer some questions that came up here.

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
[https://twitter.com/BlurSpline/status/161806273602519040](https://twitter.com/BlurSpline/status/161806273602519040)
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.

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.

The concepts used here also have names - just ask google or wikipedia for
"dissipative systems/structures" and "stigmergy".

3) the fluid simulation code is not by me! Evgeny Demidov is the original
author of the WebGL shaders for that:
[http://www.ibiblio.org/e-notes/webgl/gpu/fluid.htm](http://www.ibiblio.org/e-notes/webgl/gpu/fluid.htm)
I'm only adding to the current advection matrix

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.

cheers!

~~~
pointernil
This is really very impressive and thanks for sharing!

How many single particles are visible at every moment? Would it be possible to
control the movement of the particles by the fluid field to form predefined
shapes? to make them cluster into predefined (even moving) areas?

For some time now, i wonder if it would be possible to visualize some
population statistics (think the percentile wealth distribution f.e. ;) by
using some thing like this and make every single person "visible" within the
statistic.

I believe it would make many "distributions" more intuitively understandable.
Imagine some several thousand single "very wealthy" entities contrasted by
several thousands or millions of "average" entities ;)

Obviously such interactive diagrams easily hit (hardware/software) limits, but
even if displayed with some mapping like 1 point equals several
(hundreds/thousands) real world entities, i think such display of magnitude in
the real world would be very engaging.

Thanks again.

~~~
Flexi23
1024x512 = 524288, that's over half a million and they're all visible. So far,
they don't carry more individual properties than a position and a motion
vector, but i could easily imagine to add another texture for that, and at
some point i will also go for more life-like entities with adjustable
distributions of status and needs values too, maybe to model behavior in a
dynamic system of hunters and gatherers, you know. Give them very basic
intelligence, intents, and planning. I had also thought of using a physics
simulation for a skeleton model and neural nets for sensors and actuators. But
I'm drifting away and I'm helpless in god-mode. Statistics is computationally
heavy and i won't add anything like that too soon. It is and will be an
abstract cat toy.

------
pwnna
How is this made?

It's pretty slow on my computer. Would ASM.js work better?

~~~
fekberg
I'm getting 15 FPS in Chrome on my Surface Pro.

It uses OpenGL ES it seems, doesn't work in IE 11.

Edit: It would be interesting to know if this would perform better using WebGL
and running it in IE 11, anyone has any thoughts on that?

~~~
nacs
60fps (cap I think) on Firefox 25 on i5 desktop.

~~~
pygy_
It's GPU-, not CPU bound.

~~~
nacs
Yeah I assumed this when I noticed even the Retina laptops with the i7s
weren't doing as well. I have an Nvidia GTX 560 Ti which must be doing most of
the work.

------
tumes
Yes, but how many lines of javascript? It seems that's the metric above all
metrics lately.

------
spectre256
but is it done in 30 lines of javascript? (i checked, no)

------
vjoel
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?

~~~
vjoel
Also, why is there a bias towards clockwise orbits in the first few seconds?
Is there some asymmetry in the physics?

------
ffrryuu
I don't think that's how particles work?

~~~
mistercow
Yeah, it's pretty, but I'd like to see some explanation of what exactly is
being simulated here.

------
crashandburn4
is there anything detailing the maths/programming techniques behind this? can
anyone confirm whether this is Barnes-Hut?

I've had a look here: [http://creativejs.com/2013/11/coupled-turing-pattern-
and-219...](http://creativejs.com/2013/11/coupled-turing-pattern-
and-219-particles/)

but there's no details on the specifics

~~~
Flexi23
it's not Barnes-Hut, but good tip!

------
stuartd
Meh. U no support my 6 year old MacBook with crappy integrated graphics?
Nothing on Safari 6.1, Firefox 25, Chrome 31..

------
Bhel
Cute, although not the best performance.

It'd be nice if the color gradually changed.

~~~
lectric
It looked fine to me, and the performance is a factor of your hardware. Get a
faster computer.

------
adcuz
How do you even begin to write something like this?

------
nni
Maybe we're written in 30 lines of javascript, too. You can get - to us -
surprisingly and beautiful complexity from simple rules.

------
j2kun
Is this doing anything smarter than brute force and having the graphics
primitives do the heavy lifting?

------
grogenaut
Man I thought we were done with "Look at this 1998 era screen saver I made
with webgl"

------
sengstrom
It seems like the ensemble heats up. Could it get a little energy dissipation?

------
contrahax
Black screen Chrome 31 OSX

~~~
pygy_
Works fine here. OS X 10.8

------
filipedeschamps
To be honest, I would love to play a game out of this.

~~~
lyagusha
The much beloved Plasma Pong for older versions of Windows can still be found
on the 'net. It did something similar, and I spent quite some time playing in
its sandbox.

------
ponyous
In how many lines?

------
tomrod
No mobile!

~~~
spartanatreyu
you need a better browser

~~~
tomrod
Chrome on iPad?

------
CmonDev
Does not work.

------
andreea_popescu
Awesome!

------
benihana
I will never get tired of seeing these kinds of posts on HN.

~~~
gamegoblin
I agree. Does anyone know of a website that is just people posting really
cool, short code snippets? Things like "Here is a checkers AI in 50 lines of
Python" or "Here is a Neural Network in 30 lines of Perl".

~~~
mot0rola
[http://www.reddit.com/r/tinycode](http://www.reddit.com/r/tinycode)

~~~
gamegoblin
This is exactly what I was looking for, thanks a lot! So much for being
productive tonight.

------
lectric
Since a load of unfeeling morons have taken over HN, let me say for them that
this was amazing. Thank you.

I really _can_ _not_ _wait_ until there is some new community to which these
unemotional sociopaths can wander.

~~~
tomrod
Beautiful antisocial irony.

I applaud you good sir or madam for your wit.

