
# Getting Started - A Lathe Turned Fountain

## A Lathe Turned Fountain

Time to introduce another of the many ways to create a mesh, the *CreateLathe* method. We start with a profile for the fountain.

![profile](/img/getstarted/profile.png)

The profile is described, in an array, using the x and y components of a 3D vector.

```javascript
const fountainProfile = [
	new BABYLON.Vector3(0, 0, 0),
	new BABYLON.Vector3(10, 0, 0),
	new BABYLON.Vector3(10, 4, 0),
	new BABYLON.Vector3(8, 4, 0),
	new BABYLON.Vector3(8, 1, 0),
	new BABYLON.Vector3(1, 2, 0),
	new BABYLON.Vector3(1, 15, 0),
	new BABYLON.Vector3(3, 17, 0)
];
```

The array is used in shape property of the options parameter in the *CreateLathe* method.

```javascript
const fountain = BABYLON.MeshBuilder.CreateLathe("fountain", {shape: fountainProfile, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
```

As before the scene parameter is optional. In this case the mesh is set to double sided because the inside is visible because of the slope at the top and the hollow middle.

<Playground id="#TC31NV#3" title="Basic Lathe Fountain" description="Use the createLathe method to create a fountain." image="/img/playgroundsAndNMEs/gettingStartedLathe1.jpg"/>

With appropriate change of scale and positioning this is added to the village.

<Playground id="#KBS9I5#91" title="Add the Fountain" description="Add the fountain into the village." image="/img/playgroundsAndNMEs/gettingStartedLathe2.jpg"/>

A fountain without a spray of water is a little boring so we simulate the spray with particles.



# Getting Started - The Switch On Event

## The Switch On Event
When we click the screen pointer on the fountain we want it to start. We do this by adding a function to an *onPointerObservable* to deal with 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.jpg"/>

Now we add this into 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.jpg"/>

So far all the actions have been in daylight and now time moves to the night where we will need street lights.


# Getting Started - Working With Code

## Particle Spray
In this case particles are small sprites emitted in a cluster, or cloud,  to simulate used 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 reached it is reused and re-emitted.

They are given a texture, which obviously governs their appearance,

```javascript
particleSystem.particleTexture = new BABYLON.Texture("url to image", scene);
```

The basic emitter region is with a box of given dimensions around a specified point;
```javascript 
particleSystem.emitter = new BABYLON.Vector3(-4, 0.8, -6); // the point at the top of the fountain
particleSystem.minEmitBox = new BABYLON.Vector3(-0.01, 0, -0.01); // minimum box dimensions
particleSystem.maxEmitBox = new BABYLON.Vector3(0.01, 0, 0.01); // 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 has the property *colorDead* and is of use when recycling of the particles is set to 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.01;
particleSystem.maxSize = 0.05;

particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;
```

We also need to set the number of particles emitted per second. Too fast an emittance rate with a long lifetime can result in gaps in the emission of particles.
```javascript
particleSystem.emitRate = 1500;
```

We also set two possible directions for the particles and affect the speed with which the particle travels by giving a minimum and maximum power value and an update speed.
```javascript
particleSystem.direction1 = new BABYLON.Vector3(-1, 8, 1);
particleSystem.direction2 = new BABYLON.Vector3(1, 8, -1);

particleSystem.minEmitPower = 0.2;
particleSystem.maxEmitPower = 0.6;
particleSystem.updateSpeed = 0.01;
```

Setting a negative value for graving in the y component ensures the particles fall downwards.
```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.jpg"/>

Let's now provide an on-off click event.


## A Particle Fountain

Every village needs water so let's put in a fountain. We will go for one with rotational symmetry using a lathed mesh to create it. Fine particles will be recycled to produce a water effect. So that we do not waste water let's add a switch event to turn it on or off.


# Getting Started - Working With Code

## Sprite Trees
We are going to plant a couple of woods in our world each containing 500 trees. To maintain rendering speed we are going to use sprites. These are two dimensional images that will always face the camera.

We are using this image 
![palm tree](/img/getstarted/palmtree.png)
for out tree sprite and we set up a sprite manager for it.

```javascript
const spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "url to tree image", 2000, {width: 512, height: 1024}, scene);
```

The parameters are a name for the manager, the url of the image, the maximum number of sprites, an object specifying the width and height of the sprite, in this case it is the width and height of the image.

```javascript
for (let i = 0; i < 500; i++) {
    const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
    tree.position.x = Math.random() * (-30);
    tree.position.z = Math.random() * 20 + 8;
    tree.position.y = 0.5;
}

for (let i = 0; i < 500; i++) {
    const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
    tree.position.x = Math.random() * (25) + 7;
    tree.position.z = Math.random() * -35  + 8;
    tree.position.y = 0.5;
}
```

<Playground id="#KBS9I5#89" title="Adding Sprites" description="Add sprite trees to your scene." image="/img/playgroundsAndNMEs/gettingStartedSpriteTrees1.jpg"/>

You can also use a collection of images in a sprite map to produce an animation.

![ufo map](/img/getstarted/ufo.png)

The above map consists of cell frames of the same size, 5 across and 4 down. This time the width and height given in the manager is the width and height of one cell.

```javascript
const spriteManagerUFO = new BABYLON.SpriteManager("UFOManager","url to ufo image", 1, {width: 128, height: 76});
```

The animation for a sprite is set by giving the first and last cell to be used, whether it loops (true) or not and time between cell frames
```javascript
const ufo = new BABYLON.Sprite("ufo", spriteManagerUFO);
ufo.playAnimation(0, 16, true, 125);
```

<Playground id="#KBS9I5#90" title="Animating Sprites" description="Add an animated UFO to your scene." image="/img/playgroundsAndNMEs/gettingStartedSpriteTrees2.jpg"/>

Now we are going to use some more features to produce a working fountain.



Getting Started - Chapter 6 - Build a Particle Fountain

A Particle Fountain

Coming next

Getting Started - Chapter 6 - A Lathe Turned Fountain

Learn how to create meshes with the createLathe method.

Getting Started - Chapter 6 - Particle Spray

Learn how to create a basic particle system.

Getting Started - Chapter 6 - The Switch On Event

Learn how to start/stop a particle system with a click.