
# Getting Started - Avoiding a Car Crash

## Avoiding a Car Crash

The simplest way of seeing if two meshes are in contact is to use the _intersectsMesh_ method, as in

```javascript
mesh1.intersectMesh(mesh2);
```

which will be true if a box bounding mesh1 would overlap with a box bounding mesh2. Each mesh has a built-in bounding box which lies close to the surface of the mesh that is used in checking the intersection of the meshes.

![dudebox](/img/getstarted/dudebox.png) ![carbox](/img/getstarted/carbox.png)

Since the character's walk and the car's journey are not phased together there will be a time when they are in the same place. However it is not possible to predict when the character, taking its long walk around the village, and the car, on its short journey, might intersect. In order to demonstrate the _intersectsMesh_ method we will make the character walk backwards and forwards across the stopping place of the car.

In our case we want the character to stop moving if the car is in a "hit" zone and the character is not. It would, after all, be dangerous for the character to stop if they are both in the danger zone. In our case because of the way the _Dude_ is constructed we need to use one of its children to check intersection. Basically _Dude_ is just a holder node for the head, torso, legs and arms and the box bounding it is too small to be effective in this case..

<Playground id="#KBS9I5#83" title="Basic Collision Detection" description="Detect when a car collides with a box and stop the character's animation." image="/img/playgroundsAndNMEs/gettingStartedCollisions1.jpg"/>

Now make the hit box invisible.

<Playground id="#KBS9I5#84" title="Basic Collision Detection Invisible Box" description="Detect when a car collides with an invisible box and stop the character's animation." image="/img/playgroundsAndNMEs/gettingStartedCollisions2.jpg"/>

This repeated animation looks a bit out off place. Even if we revert back to the character walking around the village the repetition of the car not only looks a bit silly it is also annoying. Let's improve the environment a little so that the car can appear to be driving through the village. We will place the village in a valley with distant hills created from a height map and put a road in for the car to travel along. While we are doing that let's add a sky and some distant trees.



## A Bump in the Road

Or rather a way of avoiding one. Just a quick step this time. Our character is reeling around the village and we want him to avoid being hit by a passing car. We set up a danger zone that stops the character in his tracks when the car enters the danger zone. Unless of course he is already in the danger zone, in which case he better keep moving.




# Getting Started - Working With Code

## A Walk Around The Village

There is a useful property of a mesh, *movePOV* which allows us to move a mesh relative to its point of view. Generally a newly created mesh will be considered as facing the negative z direction and this is the direction of its point of view. To move a mesh forward 6 units in the direction of its point of view you use

```javascript
mesh.movePOV(0, 0, 6)
```
The parameters are, in order, distance to move to the right, up and forward, generally these are the negative x axis, the positive y axis and the negative z axis in the mesh's local space.

In Babylon.js you can write code that will be executed before the rendering of the next frame using

```javascript
scene.onBeforeRenderObservable.add(() => {
    //code to execute
});
```

In this way properties of objects can be changed render frame by render frame.

Let us take the simple case of a sphere moving around the edges of a triangle. We want the sphere to appear to slide along one side, turn to slide along the next and then turn and slide along the last side and then repeat.

This is also an opportunity to introduce two types of mesh you can create, a sphere and a series of lines. Take a sphere sliding around an isosceles right angled triangle as an example.

```javascript
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.25});

//end points for the line sequence in an array
//y component can be non zero
const points = [];
points.push(new BABYLON.Vector3(2, 0, 2));
points.push(new BABYLON.Vector3(2, 0, -2));
points.push(new BABYLON.Vector3(-2, 0, -2));
points.push(points[0]); //close the triangle;

BABYLON.MeshBuilder.CreateLines("triangle", {points: points})
```

Also you can see an other method, *rotate*, of rotating. This method rotates the mesh about the given axis by the given angle in radians. It adds to the current rotation.
```javascript
mesh.rotate(axis, angle, BABYLON.Space.LOCAL);
```

To produce the animation before each render frame the sphere will move a distance of 0.05. When the distance it has travelled is greater than 4 the sphere will make a turn, greater than 8 it will turn again and when greater than the perimeter it will reset and start again.

We set up a track array of objects with the properties turn and distance. After travelling the given total distance the sphere will rotate by the given turn value.

```javascript
const slide = function (turn, dist) { //after covering dist apply turn
    this.turn = turn;
    this.dist = dist;
}
const track = [];
track.push(new slide(Math.PI / 2, 4));  //first side length 4
track.push(new slide(3 * Math.PI / 4, 8)); //at finish of second side distance covered is 4 + 4
track.push(new slide(3 * Math.PI / 4, 8 + 4 * Math.sqrt(2))); //all three sides cover the distance 4 + 4 + 4 * sqrt(2)
```

Whenever the required distance is reached a turn is made and the array index pointer, p, is increased by 1. The modulo operator *%* is used to reset the pointer to zero at the end of the array.

```javascript
if (distance > track[p].dist) {        
    sphere.rotate(BABYLON.Axis.Y, track[p].turn, BABYLON.Space.LOCAL);
    p +=1;
    p %= track.length;
}
```

To prevent floating point errors accumulating, whenever the index pointer is reset to 0 the position and rotation of the sphere is also reset

```javascript
if (p === 0) {
    distance = 0;
    sphere.position = new BABYLON.Vector3(2, 0, 2); //reset to initial conditions
    sphere.rotation = BABYLON.Vector3.Zero();//prevents error accumulation 
}
```

<Playground id="#N9IZ8M#1" title="Animating To a Path" description="Simple example of animating an object along a path." image="/img/playgroundsAndNMEs/gettingStartedVillageWalk1.jpg"/>

A little trickier and using a bit of trial and error for the turns and distance we can achieve a more complicated walk for the character around the village. One reason for using degrees and converting them to radians for the *rotate* method is that it is easier to adjust by adding one or two degrees.

Since the character, dude, imported from the *.babylon* file has had its rotation set using a *rotationQuaternion* rather than rotation we use the rotate method to reset the characters orientation.

```javascript
dude.position = new BABYLON.Vector3(-6, 0, 0);
dude.rotate(BABYLON.Axis.Y, BABYLON.Tools.ToRadians(-95), BABYLON.Space.LOCAL);
const startRotation = dude.rotationQuaternion.clone(); //use clone so that variables are independent not linked copies
```

```javascript
if (p === 0) {
    distance = 0;
    dude.position = new BABYLON.Vector3(-6, 0, 0);
    dude.rotationQuaternion = startRotation.clone();
}
```

<Playground id="#KBS9I5#81" title="Character Walking Through Town" description="Animate a character walking through the village." image="/img/playgroundsAndNMEs/gettingStartedVillageWalk2.jpg"/>

We now have two things moving around the village a car and a character. How can we avoid them colliding?

Getting Started - Chapter 4 - Avoiding Collisions

A Bump in the Road

Coming next

Getting Started - Chapter 4 - Avoiding a Car Crash

Learn how to avoid collisions between your characters and cars in the village.