Vehicle animation using x,y co ordinates and orientation

Questions
1

Hi,

I am creating a warehouse, and have vehicles in it, and i would like to create animation according to the coordinates i have,… i have a csv file with x,y coordinates of diff time frames for that vehicle… But im not sure how to execute it.

Can somebody help on it?

1 Like
2

@RaananW @carolhmj can you help

3

Not entirely sure what help you need. I see from an earlier question of yours that you now understand how to read a csv file.

Are you able to produce an animation for just one vehicle given its x, y coordinates and orientation and having problems doing it for multiple vehicles?

Do you need help producing an animation for one vehicle given its x, y coordinates and orientation?

Help on animations can be found at

2 Likes
4

Yes iam looking to create animation or moving effect using the x,y coordinates for even just a single vehicle.

5

how do i assign x,y to these.!

carKeys.push({
frame: 0,
value: -4
});

carKeys.push({
frame: 150,
value: 4
});

carKeys.push({
frame: 210,
value: 4
});

6

Hi,
I had a similar approach initially to move vehicles with animations. I found that for that type of behaviour YUKA is a better choice. You can easily feed coordinates into a path behaviour and it gives you more natural movement. It does the rotations for you.
Here is a post on YUKA:

I used it in my project for aircraft carrier following path and for other things:

2 Likes
7

Sure, thank you for your info, will def look into it.!

8

Here in the docs it shows you that you can use different types of properties for the value.

e.g

BABYLON.Animation.ANIMATIONTYPE_COLOR3
BABYLON.Animation.ANIMATIONTYPE_FLOAT
BABYLON.Animation.ANIMATIONTYPE_MATRIX
BABYLON.Animation.ANIMATIONTYPE_QUATERNION
BABYLON.Animation.ANIMATIONTYPE_VECTOR2
BABYLON.Animation.ANIMATIONTYPE_VECTOR3

in your case for x, y you need a vector2

so you starting value would be

carKeys.push({
frame: 0,
value: BABYLON.Vector2(x, y)
});

vector2 values for the other frames would depend on the path you want the vehicle to take.

There are more things you need to think about, are your x, y coordinates in the horizontal plane so in Babylon.js do they need to be vector3s of the form (x, 0, y)? In which case you would need to start the animation with

carKeys.push({
frame: 0,
value: BABYLON.Vector3(x, 0, y)
});

You might think about producing a simple playground with a small array ( 2 or 3 elements) of x, y values which you read to position boxes for vehicles and try to animate these along paths you determine. You could then ask for help with the PG if needed.

2 Likes
9

sure, will def try with your input and will let you know!

10

Just another doubt, then we can use ‘position.x’ parameter right? Isnt there any other property for values which contains both x and y?

11

Yes - as in my answer above

var carAnim = new BABYLON.Animation("reposition", "position", frameRate, BABYLON.Animation.ANIMATIONTYPE_Vector3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

carKeys.push({
frame: 0,
value: BABYLON.Vector3(x, y, z)
});

A playground showing your attempts would be useful.

12

sure, will upload in a while

13

@JohnK Can you check this - https://playground.babylonjs.com/#7V0Y1I#1784

14

You had a couple of errors which I have corrected

coordinates.push({'x' : 1000+i, 'y' : 200+i});

These values put the box outside the range of the camera.

frame: i * frameRate,

Let us look further at frames and frameRate and different ways to use them.

Suppose we want the animation to last 50 seconds at a frameRate of 6 frames per second, then we need a total of 50 * 6 = 300 frames

Say our key frames are at 0, 25 and 50 seconds are at frame numbers 0, 150, and 300

frame 0 is at 0 seconds, frame 150 is at 25 seconds and frame 300 is at 50 seconds

In general we can then set frame number to be fraction of time * total time * frameRate

so

keyFrames.push({
        frame: 0 * totalTime * frameRate,
        value: atstart
    });

    keyFrames.push({
        frame: 0.5  * totalTime * frameRate ,
        value: halfWay
    });

    keyFrames.push({
        frame: 1 *  totalTime * frameRate,
        value: atEnd
    });

Taking this approach of building the frameRate into the frame number when you change the frameRate the time of the animation does not change.

There is yet another approach, more in line with your example.

We have 80 values to hit

for (i = 0;  i < 80;  i++) {
    keyFrames.push({
        frame: i,
        value: valueAt[i]
    });
}

Now I want the animation to last 15 seconds, as there are 80 frames I need a frameRate of 15 / 80 frames per second,

Decreasing the frame rate will increase the time of the animation as it will play slower.

Line 30 - The last frame number is fixed so only needs to be there once and outside the loop and is the length of your x, y array less one.

15

Thank you @JohnK , thank you for your time and i believe i understood most of the part.

Just a random doubt, for the second case, we are having frame numbers are 1,2,3,4,5 etc.
But for the first case which you mentioned, the one with 0,150,300 … So the frame per sec is 6 right.
So my question is we place frameNumbers with this much of difference, how does babylon handles it? like for keyframes in between, say 0 to 150, values will be automatically calculated?

16

Yes.

17

So i guess increasing the frameNumber will increase the animation speed as the frame rates will be increased?

18

coordinates.push({‘x’ : 1000+i, ‘y’ : 200+i});

These values put the box outside the range of the camera.

@JohnK Could you elaborate on this as im not aware of how much range can the cam cover?

19

@JohnK And is there any way to add the orientation too?? Like for the vehicles, i need to add the turning and stuff

20

Yes - you can use any mesh property.

Often the best way to find if something works is just try it out in a playground.

1 Like