Particle effects

Particle effects are a graphical effect involving the simulation of many small objects with some physics involved for them. They can be useful to give an impression of many such physical systems, such as fire, smoke, fluids, dust, or other phenomenon, such as magical effects.

The basic idea behind a particle effect is the generation of a system of small objects (the so-called particles), usually in a somewhat random manner and for a finite amount of time, and making them evolve according to some set of rules to simulate their behaviour.

The simplest particle effect is simply the generation of radial particles : every frame, there is some probability to generate $n$ particles, each one with a uniform probability to have its momentum in any direction. And every frame, each particle advances one step in this direction.

To generate a single particle, we will need to generate its speed, its lifespan (before deletion), and an angle for its direction. For now we will assume that all particles are generated at the center of the frame.

stuff

function generateParticle(x, y)
{
	var lifespan = rndInt(minLifespan1, maxLifespan1);
	var speed = (Math.random() * maxSpeed1) + minSpeed1;
	var vx = speed * Math.cos(Math.random() * 2 * Math.PI);
	var vy = speed * Math.sin(Math.random() * 2 * Math.PI);
	return {x : x, y : y, lifespan : lifespan, vx : vx, vy  :vy};
}

Lifespan : 25

Mean number : 15

To avoid the particles going off in random directions, we can restrict the angle generated. For instance we may choose to only direct the particles upward, using

stuff var angle = rndFloat(-Math.PI / 4, -3 * Math.PI / 4);

We can also make the distribution non-uniform for added effect, such as a normal distribution, using the Box-Muller transform. For instance here's a normal distribution centered around $\pi / 2$ with a standard deviation of $0.3$.

Sigma : 0.3

Mean angle: 4.712

Not clearing the screen

Adding the effects of gravity to the particles is fairly straightforward, at least approximately : every turn, the vertical momentum is accelerated downward (due to the orientation of the screen, this means increasing it)

Gravity : 1

Sigma : 0.3

Mean angle: 4.712

Last updated : 2017-08-30 15:04:45

Tags : graphics , graphical-effects , javascript