

30,000 Particles, 60 FPS - bpierre
http://codepen.io/soulwire/pen/Ffvlo

======
speedyrev
This as a background for an audio EQ would be pretty awesome. Have the
different frequencies pulsing through the particles :D

------
hadem
I'm curious why the particles don't return their their exact original
location.

~~~
lutusp
That's a common behavior in Canvas programs where particles are plotted on
integer boundaries. The plotting routines have to decide which pixel gets the
paint, and the argument is a float with an ambiguous mantissa. Round off to an
integer, and you get the next higher or lower location. If the routine were
written to add 0.5 to each coordinate, that effect would go away and the
particles would (apparently) return to their original locations.

In this case, the model is one of exponential decay, meaning over time the
particles move toward a target coordinate at a speed determined by the
remaining distance, with this ODE:

f(t) = y(t) - y'(t) * tc == c

Where:

y = a value that changes with respect to time

t = time

c = final position (the value toward which y(t) moves)

tc = decay time constant

f(t) = an unknown function that meets the description provided by the listed
terms, but in this case equal to:

f(t) = (1-e^-(t/tc)) * c

More or less.

The result of the uncertain outcomes for the particles is that many outcomes
drift toward, but don't quite get to, their originally assigned integer
coordinates. Then for plotting they're rounded up or down based on small
numerical errors, producing the display you see.

Again, this problem can be solved by adding 0.5 to all plotting coordinates
before rounding.

~~~
hadem
Thanks for the explanation!

