5 ms·
Particle effects in JavaScript
- bridgeyman 13y agoWhat are the different rendering modes referenced by the help text? I couldn't detect any difference after hitting the space bar. Very cool effect!
- themodelplumber 13y agoSame question here. I hit all kinds of keys and didn't see any difference.
- Ellipsis753 13y agoAdd "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.
- rtkwe 13y agoThis 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.
- koala_advert 13y agoIt's working for me in FF 24.0.
- rtkwe 13y agoYeah works for me at home on 24 too. Just noting it in case.
- uaygsfdbzf 13y agoDoesn't work for me in FF 24.0, Windows XP :-( Should I enable something in about:config or something else ?
- zghst 13y agoIt's because requestAnimationFrame is not prefixed. So many demos not properly prefixing RAF lately.
- Zardoz84 13y agoWere is the 'AirBender style' in these particle effects demo ?
- mkaziz 13y agoI didn't see any either.
- lstamour 13y agoIt's in all the "wooshing", the swirls of energy as they collide: http://www.anneahira.com/images/avatar-the-last-airbender.jpg http://www.anneahira.com/images/avatar-the-last-airbender.jp... Google around for clips, it's obviously not 100% accurate, but it said "style" so we can give a bit of leeway.
- deweller 13y agoWarning: This demo locked up my OS and I had to force-restart. Chrome 25/OSX 10.8/Mac Pro Desktop, Early 2008.
- SEJeff 13y agoWorks like an absolute champ with Fedora 18 64bit + nvdia + chrome 30
- batuhanicoz 13y agoWorks fine on my MBP, on latest Safari/Mavericks.
- redthrowaway 13y agoWorks great on my mid-2010 iMac with OS X 10.9 and Chrome 30.
- AsymetricCom 13y agoThe 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!
- magicalist 13y agoConsidering that it's WebGL, pretty sure it's that age-old spectre: graphics drivers.
- AsymetricCom 13y agoOh, 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...
- josephg 13y ago
- njpatel 13y agoAbsolutely beautiful, lost a few minutes just playing around with it. Would be great as slow, randomised, background or screensaver.
- axisms 13y agojust wow!
- lstamour 13y agoThis is why Google Music needs a visualizer.
- keeran 13y agoReally great to be able to play with the source of this. Reminds of the 'uzu' app[1]. [1] http://uzumotion.com/ http://uzumotion.com/
- elwell 13y agoIT'S BEAUTIFUL!
- DanBC 13y agoI love this. How easy is it to turn this into a Windows / OSX / Linux screen saver?
- ye 13y agoYou can increase the number of particles by changing this line: totalLines = 60000, My PC starts getting slower after 150K, but it works, though slowly, even with 1 million.
- shocks 13y agoInterestingly I can take it to 1,000,000 with Firefox (Nightly) without too many problems. Chrome (Canary) becomes unusable around 200,000.
- ye 13y agoIt really depends on the videocard I guess. I just tried both Crome and FF with a million particles, and they feel roughly the same.
- ilink 13y agoPerformance 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 http://prideout.net/blog/?p=67
- tomashertus 13y agohella cool:)
- ticklebottoms 13y agoI 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 http://en.wikipedia.org/wiki/Chaotic_mixing). Always very cool to see interesting patterns from relatively simple dynamics.
- Oculus 13y agoAt first in my mind it's 'Oh, another javascript particle effect' and then I try the demo and it becomes 'holy shit, this is amazing' Amazing job!
- theatraine 13y agoOperates 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!
- afatc 13y agoThis would make a nice screensaver
- chestnut-tree 13y agoThis 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? Here's another mesmerising javascript experiment http://brunoimbrizi.com/experiments/#/01 http://brunoimbrizi.com/experiments/#/01
- danbruc 13y agoThis are a few nice demos.
- JacksonGariety 13y agoI did some experimenting to make particles dance to the beat of music if anyone is interested: http://trapcity.tv http://trapcity.tv
- timthimmaiah 13y agoReally dig this. Any way I could check out the source?
- JacksonGariety 13y agoHere you go: https://github.com/jacksonGariety/trapcity https://github.com/jacksonGariety/trapcity
- timthimmaiah 13y agoThanks dude. We're working on a custom soundcloud player widget thats fully customizable. I'm thinking about using your visualizer. https://github.com/tim-thimmaiah/tonedenplayer https://github.com/tim-thimmaiah/tonedenplayer
- JacksonGariety 13y agoGo for it!
- aroch 13y agoThat'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
- Sir_Cmpwn 13y agoSmall 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. [1] https://github.com/MediaCrush/MediaCrush https://github.com/MediaCrush/MediaCrush [2] https://mediacru.sh/p3Yo3dDHZrmo https://mediacru.sh/p3Yo3dDHZrmo
- b3tta 13y agoThat one is actually pretty "old" already. The original demo can be found here: https://developer.mozilla.org/demos/detail/fluid https://developer.mozilla.org/demos/detail/fluid
- deleted 13y ago[deleted]
- feistyio 13y agoDear author: 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.
- lstamour 13y agoNote to self: Next time you want to optimize your cool-looking effects, post the source as a demo to HN. :D
- dancecodes 13y agoNice palette (like some emacses themes) and cool effects. Thanks for work! Bookmarked. So cools that my cayman radeon driver on linux got some errors :-)
- maxlibin 13y agonice!
- ruggeri 13y agoAmazing, beautifully done. Wonderful :-)
- DigitalSea 13y agoWow, 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!
- berrypicker 13y agoI'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?
- vayarajesh 13y agoNice work!
- aidos 13y agoI'm obviously being stupid - but what do I have to do to make this run in Chrome?
- shawabawa3 13y agoHazarding a guess: Not use linux I've never had webgl work on linux (not that I've tried particularly hard)
- logicalmike 13y agoIt's working fine for me on the beta channel without any experimental flags enabled.
- aidos 13y agoI'm on OSX. I tried some different flags but I've obviously missed something. /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --no-sandbox --enable-webgl --enable-experimental-webgl