Add "setRenderMode(1);" into the onResize function.
Then change between the numbers 0 to 3 (so "setRenderMode(3);" for example) to try the different modes. You may have to resize the window a little each time to make the new mode start but I didn't have to.
It's a little annoying that it won't register button presses.
This does not work for me in FF 22.0 (work specified version). Looks nice in chrome, only time it drops is when you bundle them into a large group and then cross you mouse over it and they explode everywhere.
The beautiful wonder that is Javascript. All the majesty of a killer whale piloting a single-engine supercruiser via a blue-tooth repeater connected 500m gallon tank in the Sahara. Think about how flexible such a system can be!
Oh, Definitely! It couldn't be the layers of parsers, spaghetti Javascript libraries, web protocols, the DOM, WebGL itself which is a part of Javascript, or a million other crufty web things, it has to be the microsecond latency introduced by hardware-level API abstraction...
User-level libraries can't lock up your OS unless they can trigger kernel / driver bugs or make your hardware malfunction. In this case, graphics drivers are the most likely cause.
Performance for this kind of particle effect will be even better once Webgl2 is widely available. Transform feedback (or other hacks) let you manipulate the particle positions on the videocard itself. There's a great article about them here: http://prideout.net/blog/?p=67
I didn't look closely at the actual equations of motion, but clicking around in a sort of periodic fashion makes patterns that remind me of chaotic advection (http://en.wikipedia.org/wiki/Chaotic_mixing). Always very cool to see interesting patterns from relatively simple dynamics.
Operates in slow motion on Metro IE11, interestingly, desktop IE11 performs well although it starts off slow. It flies in FF and Chrome though. I suppose the Metro IE11 is missing some WebGL optimizations. Very cool!
This is really impressive. It makes me wonder how particle effects in Javascript running in a web browser can run so well, while a native desktop application like After Effects takes ages to render something similar?
That's pretty awesome, did you mean for it to play all the MP3's dropped on it at a time? For instance if I drop 1.mp3 and then drop 2.mp3 before 1.mp3 is finished both play at the same time with 2.mp3 starting to play at the time offset 1.mp3 is at when 2.mp3 is added
Small annoyance - can you also add a means to click as an alternative to drag+drop?
EDIT: This is pretty damn cool. Could I convince you to submit a pull request with something similar to MediaCrush[1]? We host audio files [2] and this would be a nice addition.
Invalid CSS property value: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.33)), color-stop(100%,rgba(0,0,0,0.75)))
and the same error as found in in standard chrome.
If you refactor the object/array/Float32Array instantiation in the redraw loop out into one-off allocations you will see a remarkably improvement in performance in terms of garbage-collection.
Wow, I was not expecting that. This is fantastic. Hold down your left mouse and keep it still and it changes colour and starts getting more intense. Great job!
I'm just wondering why this is impressive. Is it partly because it's Javascript and it's in a browser? I mean, would it have been just as impressive if you had to download a C++ program and compile it to get the same thing?
72 comments
[ 2.8 ms ] story [ 103 ms ] threadVery cool effect!
Should I enable something in about:config or something else ?
[1] http://uzumotion.com/
I just tried both Crome and FF with a million particles, and they feel roughly the same.
Amazing job!
Here's another mesmerising javascript experiment http://brunoimbrizi.com/experiments/#/01
http://trapcity.tv
https://github.com/tim-thimmaiah/tonedenplayer
EDIT: This is pretty damn cool. Could I convince you to submit a pull request with something similar to MediaCrush[1]? We host audio files [2] and this would be a nice addition.
[1] https://github.com/MediaCrush/MediaCrush [2] https://mediacru.sh/p3Yo3dDHZrmo
When I check out the chrome console I find: Uncaught TypeError: Cannot set property 'innerHTML' of null
In chrome canary I also get:
Invalid CSS property value: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.33)), color-stop(100%,rgba(0,0,0,0.75)))
and the same error as found in in standard chrome.
I believe the problem is your time() method on line 189 of script.js; there's no element with id "time".
Works perfect on Version 30.0.1599.101 Chrome.
http://www.youtube.com/watch?v=W5R4GFbXPvY
edit: added link to OfficialTrapCity
https://developer.mozilla.org/demos/detail/fluid
If you refactor the object/array/Float32Array instantiation in the redraw loop out into one-off allocations you will see a remarkably improvement in performance in terms of garbage-collection.
So cools that my cayman radeon driver on linux got some errors :-)