8 ms·
JavaScript particle simulator
- pwnna 13y agoHow is this made? It's pretty slow on my computer. Would ASM.js work better?
- fekberg 13y agoI'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?
- filipedeschamps 13y ago20 FPS - Chrome - MacBook Air/2011
- shebson 13y agoI'm getting 38 FPS on a 2012 Macbook Air with Chrome. Didn't expect the HD4000/HD3000 difference to be so big.
- pleasemakeitbig 13y ago25 FPS on Chrome/2013 Macbook Pro
- Anderkent 13y agoWeird! I get 60 on Chrome 31.0.1650/2013 Macbook Pro.
- TallboyOne 13y ago60fps on chrome
- verisimilidude 13y ago45 FPS: Chrome on 2012 Macbook Pro. Looks fantastic.
- consciousness 13y ago32 FPS - Chrome - Windows 7 - Thinkpad X1 Carbon i7 & 22 FPS on Firefox..
- pwnna 13y agoHuh. A bug should be filed..
- jhvh1134 13y agoI could be wrong, but my understanding is that WebGL uses the exact same API as ES, including the same stripped down shader language.
- blunte 13y ago51 FPS on new Macbook Pro Retina It's gorgeous... reminds me of the good old "visualization" days of Winamp and MusicMatch
- nacs 13y ago60fps (cap I think) on Firefox 25 on i5 desktop.
- mistercow 13y agoIt looks like most of the heavy lifting is done in shaders, so asm.js probably wouldn't improve it much.
- iamwil 13y agoIt 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?
- mistercow 13y agoI'm wondering what optimization you can to that do with a quadtree. The only way I can see is if you sacrifice accuracy on distant particles by quantizing and counting. You could use geometric hashing to do the same thing. Anyway, I don't think this demo is exhibiting inter-particle attraction, but I'm not positive.
- brian_cloutier 13y agoExactly right. The most common scheme uses a quadtree and runs around O(n log n). http://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation http://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation
- admsyn 13y agoIt looks like it's using a fluid solver. So, it's not that every particle is interacting with every other particle, but that there's a flow vector being established at each point on the screen and that's being added to each particle's position. Disclaimer: I haven't actually analyzed the source.
- clarkmoody 13y agoI 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 13y agoGalaxies 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 13y agoBarnes-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 13y agoYes, once you start cutting off long range effects you can improve on the strict O(N^2) limitations.
- cscheid 13y agoIt'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 13y agoBtw 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.
- 13y ago
- spectre256 13y agobut is it done in 30 lines of javascript? (i checked, no)
- ffrryuu 13y agoI don't think that's how particles work?
- mistercow 13y agoYeah, it's pretty, but I'd like to see some explanation of what exactly is being simulated here.
- theGimp 13y agoThe 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 13y agoIt's not really JS, shaders are doing all the heavy lifting.
- primelens 13y agoCould 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?
- EpicEng 13y agoWebGL (or OpenGL ES) is not written in JS (obviously). JS calls into it, but the heavy lifting is being done by a native library. Calling this a "particle generator in javascript" is somewhat disingenuous.
- 10098 13y agoWebGL 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.
- DanielRibeiro 13y agoIf you liked this, Chrome Experiments is filled with particle examples: http://www.chromeexperiments.com/search/results.html?q=particles 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_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
- iLoch 13y agoSo how long do I have to wait to see it go back to it's initial position? (Theoretically...)
- arturventura 13y agoDoes 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 13y agohalf 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 13y agoThis is beautiful, after watching I feel like I finally understand how the universe developed structure after the big bang.
- DanBC 13y agoY U NO SUPPORT OES_texture_float_linear? Using Version 31.0.1650.57 m Google Chrome is up to date
- gilgoomesh 13y agoIt's not a friend of Safari 7 with WebGL enabled, either.
- pygy_ 13y agoIt 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.
- filipedeschamps 13y agoTo be honest, I would love to play a game out of this.
- lyagusha 13y agoThe 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.
- vjoel 13y agoTook 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 13y agoAlso, why is there a bias towards clockwise orbits in the first few seconds? Is there some asymmetry in the physics?
- tomrod 13y agoNo mobile!
- spartanatreyu 13y agoyou need a better browser
- tomrod 13y agoChrome on iPad?
- lttlrck 13y agoYou're browsing it wrong
- ponyous 13y agoIn how many lines?
- benihana 13y agoI will never get tired of seeing these kinds of posts on HN.
- gamegoblin 13y agoI 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 13y agoNo, but why don't you write a cool 30 lines of Perl. I'm a fan of Perl.
- mot0rola 13y agohttp://www.reddit.com/r/tinycode http://www.reddit.com/r/tinycode
- gamegoblin 13y agoThis is exactly what I was looking for, thanks a lot! So much for being productive tonight.
- girvo 13y agoReddit truly does have a sub for everything. Nice link, that's awesome!
- mrhyperpenguin 13y agoCheck out Shadertoy if you haven't. https://www.shadertoy.com/ https://www.shadertoy.com/
- tumes 13y agoYes, but how many lines of javascript? It seems that's the metric above all metrics lately.
- contrahax 13y agoBlack screen Chrome 31 OSX
- pygy_ 13y agoWorks fine here. OS X 10.8
- Bhel 13y agoCute, although not the best performance. It'd be nice if the color gradually changed.
- lectric 13y agoIt looked fine to me, and the performance is a factor of your hardware. Get a faster computer.
- adcuz 13y agoHow do you even begin to write something like this?
- crashandburn4 13y agois 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-particles/ http://creativejs.com/2013/11/coupled-turing-pattern-and-219... but there's no details on the specifics
- Flexi23 13y agoit's not Barnes-Hut, but good tip!
- j2kun 13y agoIs this doing anything smarter than brute force and having the graphics primitives do the heavy lifting?
- nni 13y agoMaybe we're written in 30 lines of javascript, too. You can get - to us - surprisingly and beautiful complexity from simple rules.
- stuartd 13y agoMeh. U no support my 6 year old MacBook with crappy integrated graphics? Nothing on Safari 6.1, Firefox 25, Chrome 31..
- sengstrom 13y agoIt seems like the ensemble heats up. Could it get a little energy dissipation?
- grogenaut 13y agoMan I thought we were done with "Look at this 1998 era screen saver I made with webgl"
- d23 13y agoI find this infinitely more interesting than the recent "X in 2.3 lines of JS" trend lately.
- girvo 13y agoOh come on, the ray tracer was really neat.
- lectric 13y agoSince 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 13y agoBeautiful antisocial irony. I applaud you good sir or madam for your wit.
- andreea_popescu 13y agoAwesome!
- joshu 13y agoThe 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.
- CmonDev 13y agoDoes not work.
- Flexi23 13y agoI'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!