[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 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]

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.

[darsham]

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 :)

[Flexi23]

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.