JavaScript particle simulator

http://www.cake23.de/fmx/turing-fluid-particle-projection-feedback.html

by filipedeschamps • 13 years ago

271 90 13 years ago

cake23.de

pwnna2• 13 years ago

How is this made?

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

fekberg• 13 years ago

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?

filipedeschamps2• 13 years ago

20 FPS - Chrome - MacBook Air/2011

pleasemakeitbig• 13 years ago

25 FPS on Chrome/2013 Macbook Pro

TallboyOne• 13 years ago

60fps on chrome

verisimilidude• 13 years ago

45 FPS: Chrome on 2012 Macbook Pro. Looks fantastic.

consciousness• 13 years ago

32 FPS - Chrome - Windows 7 - Thinkpad X1 Carbon i7

22 FPS on Firefox..

jhvh1134• 13 years ago

I could be wrong, but my understanding is that WebGL uses the exact same API as ES, including the same stripped down shader language.

blunte• 13 years ago

51 FPS on new Macbook Pro Retina

It's gorgeous... reminds me of the good old "visualization" days of Winamp and MusicMatch

nacs2• 13 years ago

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

mistercow4• 13 years ago

It looks like most of the heavy lifting is done in shaders, so asm.js probably wouldn't improve it much.

iamwil• 13 years ago

It looks like there's some sort of gravity involved. So then how do you get around the O(n^2) problem of comparing the contribution of each particle to every other particle? Did they implement an quadtree of some sort, or is it something else?

clarkmoody• 13 years ago

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.

acadien2• 13 years ago

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• 13 years ago

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

mistercow4• 13 years ago

You could potentially do better than N^2 (ish) by approximating. Quantize the world into a grid, add up mass at each grid point. Then each particle is affected by this weighted grid, which is made up of a relatively small number of pseudo-particles.

Of course, you'd still need to fall back to N^2 for the nearest particles, or the accuracy would be unusably bad. But it's a much smaller N.

ep103• 13 years ago

I moved the mouse very slightly at the edge, which caused all the particles to eventually settle in two separate spinning groups. Then I started making fast circles around one of the groups, and once the group started following the pattern, added a slowly moving center of rotation towards the other undisturbed group. This caused it to slowly move towards the stationary one, until they collided, each ripping from the other, until they merged.

minikomi• 13 years ago

This reads like something on erowid

spectre256• 13 years ago

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

ffrryuu• 13 years ago

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

mistercow4• 13 years ago

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

theGimp• 13 years ago

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• 13 years ago

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

primelens• 13 years ago

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?

EpicEng2• 13 years ago

JS is just the glue code. Try it out in raw JS and enjoy your .001 fps.

DanielRibeiro• 13 years ago

If you liked this, Chrome Experiments is filled with particle examples: http://www.chromeexperiments.com/search/results.html?q=parti...

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

http://threejs.org/examples/#webgl_particles_random

http://threejs.org/examples/#webgl_particles_sprites

http://threejs.org/examples/#webgl_buffergeometry_particles

iLoch• 13 years ago

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

arturventura• 13 years ago

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.

Flexi235• 13 years ago

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• 13 years ago

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

DanBC• 13 years ago

Y U NO SUPPORT OES_texture_float_linear?

Using Version 31.0.1650.57 m Google Chrome is up to date

gilgoomesh• 13 years ago

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

pygy_3• 13 years ago

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.

filipedeschamps2• 13 years ago

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

lyagusha• 13 years ago

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.

vjoel2• 13 years ago

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?

vjoel2• 13 years ago

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

tomrod3• 13 years ago

No mobile!

spartanatreyu• 13 years ago

you need a better browser

tomrod3• 13 years ago

Chrome on iPad?

lttlrck• 13 years ago

You're browsing it wrong

ponyous• 13 years ago

In how many lines?

benihana• 13 years ago

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

gamegoblin2• 13 years ago

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

GuerraEarth• 13 years ago

No, but why don't you write a cool 30 lines of Perl. I'm a fan of Perl.

mot0rola• 13 years ago

http://www.reddit.com/r/tinycode

mrhyperpenguin• 13 years ago

Check out Shadertoy if you haven't.

https://www.shadertoy.com/

tumes• 13 years ago

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

contrahax• 13 years ago

Black screen Chrome 31 OSX

pygy_3• 13 years ago

Works fine here. OS X 10.8

Bhel• 13 years ago

Cute, although not the best performance.

It'd be nice if the color gradually changed.

lectric2• 13 years ago

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

adcuz• 13 years ago

How do you even begin to write something like this?

crashandburn4• 13 years ago

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

but there's no details on the specifics

Flexi235• 13 years ago

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

j2kun• 13 years ago

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

nni• 13 years ago

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

stuartd• 13 years ago

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

sengstrom• 13 years ago

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

grogenaut• 13 years ago

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

d23• 13 years ago

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

girvo2• 13 years ago

Oh come on, the ray tracer was really neat.

lectric2• 13 years ago

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.

tomrod3• 13 years ago

Beautiful antisocial irony.

I applaud you good sir or madam for your wit.

andreea_popescu• 13 years ago

Awesome!

joshu• 13 years ago

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

CmonDev• 13 years ago

Does not work.

Flexi235• 13 years ago

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 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 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• 13 years ago

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.

Flexi235• 13 years ago

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.

darsham• 13 years ago

It's nice to see this up here, I've been a fan of your work since the milkdrop days. Is that when you started making shaders ? I gotta say MD2 was one of the best shader playgrounds i've ever used and it's how i was introduced to shader programming. You should do cinematic special effects :)

Flexi235• 13 years ago

thanks man, and yes. I had already 2 or 3 years experience with the different scriptable elements and partial differential equations in Milkdrop when they introduced the shader editors in the 2007 Winamp5.5 release. There were several original shader presets by Ryan Geiss and i started to edit them and that's how i learned it in the beginning. A good bunch of my presets has also made it into the official download since then too, but i have literally thousands more on my hard drives. I'm still looking into the Milkdrop forum every once in a while but i haven't been much active there since i graduated from university. Have you published something too? What's your handle? In 2010 I started with my first OpenGL clone of the shader pipeline in a Processing sketch and then came WebGL... and I must have gained enough attention with that to get invited to talk about the stuff i do at the FMX2013 this year. The thing is, my current position as a database backend programmer has pretty much nothing to do with my hobby. Thanks for heads up, it's much appreciated! That's surely something i need to fix asap, but soon i will also be the father of _two_ daughters.

JavaScript particle simulator

Related Stories