
# Getting Started - The Switch On Event

## The Switch On Event
When we click on the fountain, we want it to start. We do this by adding a function to an *onPointerObservable* to handle a pointer-down event that switches the particle system between stop and start.

```javascript
let switched = false;  //on off flag

scene.onPointerObservable.add((pointerInfo) => {      		
    switch (pointerInfo.type) {
		case BABYLON.PointerEventTypes.POINTERDOWN:
			if(pointerInfo.pickInfo.hit) {
                pointerDown(pointerInfo.pickInfo.pickedMesh)
            }
		break;
    }
});
```

```javascript
const pointerDown = (mesh) => {
    if (mesh === fountain) { //check that the picked mesh is the fountain
        switched = !switched;  //toggle switch
        if(switched) {
            particleSystem.start();
        }
        else {
            particleSystem.stop();
        }
    }
}
```

<Playground id="#TC31NV#5" title="Start/Stop Particles on Click" description="Start and stop a particle system on click." image="/img/playgroundsAndNMEs/gettingStartedParticleSpray1.webp"/>

Now we add this to the village world.

<Playground id="#KBS9I5#93" title="Add The Fountain To The Village" description="Add the fountain to the village." image="/img/playgroundsAndNMEs/gettingStartedParticleSpray2.webp"/>

So far, all the action has taken place in daylight, and now it is time to move to night, when we will need street lights.


## Lighting the Village

Perpetual light in the village can make sleeping very difficult, so we will introduce nighttime by turning the lights down. Of course, people do not want to walk in total darkness at night, so we will add some street lights. Since perpetual night is no better than perpetual day, we will add an interface to change from one to the other. We want to turn the light down at night and bring it up during the day, so let's add a GUI control to do this. Also, where there is light, there are shadows, and Babylon.js can add them as well. 


# 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 id="#TC31NV#4" title="Add the Spray" description="Create a basic particle system as water spray." image="/img/playgroundsAndNMEs/gettingStartedParticleSpray1.webp"/>

Let's now provide an on-off click event.

Getting Started - Chapter 6 - The Switch On Event

The Switch On Event