

Particle effects in JavaScript - browserspot
http://liveweave.com/TcZrXF

======
chestnut-tree
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](http://brunoimbrizi.com/experiments/#/01)

~~~
danbruc
This are a few nice demos.

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

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

[http://trapcity.tv](http://trapcity.tv)

~~~
Everlag
Strange, I get no particle effects.

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

~~~
JacksonGariety
Browser info?

~~~
Everlag
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.

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

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

------
b3tta
That 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)

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

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

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

------
lstamour
This is why Google Music needs a visualizer.

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

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

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

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

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

[1] [http://uzumotion.com/](http://uzumotion.com/)

------
ticklebottoms
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](http://en.wikipedia.org/wiki/Chaotic_mixing)).
Always very cool to see interesting patterns from relatively simple dynamics.

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

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

~~~
AsymetricCom
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!

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

~~~
AsymetricCom
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...

~~~
josephg
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.

~~~
AsymetricCom
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.

------
berrypicker
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?

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

~~~
koala_advert
It's working for me in FF 24.0.

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

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

------
elwell
IT'S BEAUTIFUL!

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

~~~
shawabawa3
Hazarding a guess: Not use linux

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

~~~
aidos
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

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

~~~
mkaziz
I didn't see any either.

~~~
lstamour
It's in all the "wooshing", the swirls of energy as they collide:
[http://www.anneahira.com/images/avatar-the-last-
airbender.jp...](http://www.anneahira.com/images/avatar-the-last-
airbender.jpg) Google around for clips, it's obviously not 100% accurate, but
it said "style" so we can give a bit of leeway.

------
ruggeri
Amazing, beautifully done. Wonderful :-)

------
afatc
This would make a nice screensaver

------
tomashertus
hella cool:)

------
vayarajesh
Nice work!

------
axisms
just wow!

------
maxlibin
nice!

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

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

~~~
ye
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.

