> Learn how to create a basic particle system.

Source: https://doc.babylonjs.com/features/introductionToFeatures/chap6/particlespray

# Getting Started - Working With Code

## Particle Spray
In this case, particles are small sprites emitted in a cluster, or cloud, to simulate fire, smoke, water, or even faery dust.

The basis for a cloud of particles is the *ParticleSystem*. With this, we specify the number of particles to use.
```javascript
const particleSystem = new BABYLON.ParticleSystem("particles", 5000, scene);  //scene is optional
```

Particles are emitted from a specifically defined region. Each particle is given a lifetime, and when that lifetime is reached, it is reused and re-emitted.

They are given a texture, which governs their appearance.

```javascript
particleSystem.particleTexture = new BABYLON.Texture("textures/flare.png", scene);
```

The basic emitter region is a box of given dimensions around a specified point:
```javascript 
particleSystem.emitter = new BABYLON.Vector3(0, 10, 0); // the point at the top of the fountain
particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0); // minimum box dimensions
particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0); // maximum box dimensions
```

Up to three colors can be given in the form (r, g, b, a) for red, green, blue, and alpha. Alpha goes from 0 for fully transparent up to 1 for fully opaque. The first two are combined, or blended, to set the color of the particle. The method of blending can be specified. The third is the *colorDead* property and is useful when particle recycling is turned off. This third property is not needed for our fountain.
```javascript
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);

particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
```

The size of a particle and its lifetime are within the range set by minimum and maximum values.
```javascript
particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;

particleSystem.minLifeTime = 2;
particleSystem.maxLifeTime = 3.5;
```

We also need to set the number of particles emitted per second. Too high an emission rate with a long lifetime can result in gaps in the particle emission.
```javascript
particleSystem.emitRate = 1500;
```

We also set two possible directions for the particles and control the speed at which each particle travels by giving a minimum and maximum power value and an update speed.
```javascript
particleSystem.direction1 = new BABYLON.Vector3(-2, 8, 2);
particleSystem.direction2 = new BABYLON.Vector3(2, 8, -2);

particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
particleSystem.updateSpeed = 0.025;
```

Setting a negative value for gravity in the y component ensures the particles fall downward.
```javascript
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
```

Finally, we can start the fountain:
```javascript
particleSystem.start();
```

Here is an example of our fountain:

- [Playground: Add the Spray](https://playground.babylonjs.com/#TC31NV#4) - Create a basic particle system as water spray.

Let's now provide an on-off click event.