Particle effects in JavaScript | Hacker News Reader

Particle effects in JavaScript

liveweave.com

270 pointsbrowserspot70 comments

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?

Here's another mesmerising javascript experiment http://brunoimbrizi.com/experiments/#/01

This are a few nice demos.

At 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!

I did some experimenting to make particles dance to the beat of music if anyone is interested:

http://trapcity.tv

Full screen'd this beast and jammed out, bass line is thickkkkk.

Works perfect on Version 30.0.1599.101 Chrome.

http://www.youtube.com/watch?v=W5R4GFbXPvY

edit: added link to OfficialTrapCity

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.

[1] https://github.com/MediaCrush/MediaCrush [2] https://mediacru.sh/p3Yo3dDHZrmo

Strange, I get no particle effects.

When I check out the chrome console I find: Uncaught TypeError: Cannot set property 'innerHTML' of null

Browser info?

Stable chrome branch. Version 30.0.1599.101

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.

Seems like the js is going off before the DOM has finished loading. If I add an onload function that should fix it.

You deal with the DOM before waiting for the document to load?

I've got the same problem: Version 30.0.1599.101 Chrome on Mac OS X Mavericks.

I believe the problem is your time() method on line 189 of script.js; there's no element with id "time".

Time is a self-referencing function. That shouldn't be breaking it.

Yeah, it's self-referencing, but it's called just before being passed into setInterval. Here's a screenshot: http://i.imgur.com/oh84ZLV.png

Really dig this. Any way I could check out the source?

Here you go: https://github.com/jacksonGariety/trapcity

Thanks 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

Go for it!

That one is actually pretty "old" already. The original demo can be found here:

https://developer.mozilla.org/demos/detail/fluid

What are the different rendering modes referenced by the help text? I couldn't detect any difference after hitting the space bar.

Very cool effect!

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.

Same question here. I hit all kinds of keys and didn't see any difference.

Yes, it appears that the "any" key is missing on my keyboard.

Is because liveweave cancel key mapping by dfault , you need to click on "Tools" then download and open the "source.html" file manualy.

Try the number keys, 0-9, etc. It's in the onkey function.

This is why Google Music needs a visualizer.

I love this. How easy is it to turn this into a Windows / OSX / Linux screen saver?

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

Note to self: Next time you want to optimize your cool-looking effects, post the source as a demo to HN. :D

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!

Really great to be able to play with the source of this. Reminds of the 'uzu' app[1].

[1] http://uzumotion.com/

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.

Absolutely beautiful, lost a few minutes just playing around with it. Would be great as slow, randomised, background or screensaver.

Warning: This demo locked up my OS and I had to force-restart. Chrome 25/OSX 10.8/Mac Pro Desktop, Early 2008.

Works like an absolute champ with Fedora 18 64bit + nvdia + chrome 30

Worked fine on Windows Vista, on a Lenovo T61, while watching VOD in a different tab.

Oddly: worked fine on my mac pro 1.1 (2006) and 10.6 (snow leopard) and firefox.

Works great on my mid-2010 iMac with OS X 10.9 and Chrome 30.

Works fine on my MBP, on latest Safari/Mavericks.

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!

Considering that it's WebGL, pretty sure it's that age-old spectre: graphics drivers.

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.

In theory they can't in practice, you just saw it happen. malfunction is a human concept, perhaps the hardware is behaving exactly as intended.

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?

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.

It's because requestAnimationFrame is not prefixed. So many demos not properly prefixing RAF lately.

It's working for me in FF 24.0.

Yeah works for me at home on 24 too. Just noting it in case.

Doesn't work for me in FF 24.0, Windows XP :-(

Should I enable something in about:config or something else ?

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!

IT'S BEAUTIFUL!

I'm obviously being stupid - but what do I have to do to make this run in Chrome?

Hazarding a guess: Not use linux

I've never had webgl work on linux (not that I've tried particularly hard)

I'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

It's working fine for me on the beta channel without any experimental flags enabled.

Were is the 'AirBender style' in these particle effects demo ?

I didn't see any either.

It's in all the "wooshing", the swirls of energy as they collide: 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.

Amazing, beautifully done. Wonderful :-)

This would make a nice screensaver

hella cool:)

Nice work!

just wow!

nice!

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

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

Interestingly I can take it to 1,000,000 with Firefox (Nightly) without too many problems. Chrome (Canary) becomes unusable around 200,000.

It really depends on the videocard I guess.

I just tried both Crome and FF with a million particles, and they feel roughly the same.

Reply on news.ycombinator.com