Can’t get multiple spheres to animate properly

Questions
1

I’m trying to reproduce an animation the New York Times did:

I’m able to move one sphere so it moves across the screen and up the way a single point does in the New York Times animation:
https://playground.babylonjs.com/#KCY22W#2

But when I try to have several spheres follow along that same path, I’m getting a weird result:
https://playground.babylonjs.com/#RTEWSH

Clearly, I don’t yet understand how keys works. :slight_smile:

What am I doing wrong?

If I’m better off switching to, say, using registerBeforeRender, I’m good with that, but it’d still be useful to understand why the keys settings aren’t doing what I thought they would.

Also, I’ve just started exploring BabylonJS, so if there’s a completely different approach that would make more sense to use, please let me know.

Thanks!
Anders

2

Well technically the code is correct :smiley:

What do you find wrong on your animation?

1 Like
3

What I was hoping to do was have a line of spheres that wold follow each other along the pseudo-curve I thought I was creating.

Here’s an ex I built in d3 a while ago.
https://aschneiderman.github.io/d3-animation-bites/attrTween/multiple-points-along-paths.html

What I’m looking for is the same effect, only I don’t need the spheres to follow as complicated a path — all I need is for them to follow each other, single file, going for a bit on the lower level, moving up to the higher level, then finishing by going for a bit on the higher level.

Make sense? Or is it still unclear?

4

Hi guys. I tried a version… https://playground.babylonjs.com/#RTEWSH#4

I removed all offset because… my objective is to start the identical (cloned) animations… 1/2 second apart from one another. (half-second intervals)

I tried building the 2 animations … early… lines 14-28.

THEN… in the line 33 for-loop, in lines 51 and 60, I put clones of the 2 animations… on each ball. I think this is the first time I ever cloned an animation, and it shows. :slight_smile:

Then, after scene is ready (line 65), I for-loop thru all the balls, and create a setTimeout (line 70) for each ball… with a 1/2-second delay between each beginAnimation (line 74).

The line 71 beginAnimation is slightly different. I am calling them by-refs… ball.animations[0] and [1]… instead of by-names.

Stream of balls, all following path of first ball - FAIL! heh. My dog giggled at me, in mockery. :slight_smile:

1 Like
5

@Wingnut is correct that the way to think of it as each ball having the same animation but with staggered starts.

A little bit of recursion and adding an event on an animation frame gives you

https://playground.babylonjs.com/#RTEWSH#6

to play with

4 Likes
6

Very nice JK! At line 30, the ‘4’ value indicates that… at the 4th frame of the first animation (and all newer animations), the function calls itself again (the recurse), and starts another ball/animation.

So the ‘4’ value (along with general animation speed) sets the gap between balls. Marvelous!

I hope Anders likes it, and it’s useable for his/her project.

1 Like
7

Thanks, @JohnK! That’s a nice, elegant solution. And it performs well too – crank it up to 1000 balls and the animation still runs smoothly.

One follow-up question. In my script I thought that this line:

    keys.push({ frame: 40 + offset * 10, value: 40 });

would make each of the balls start moving up at a different point in time, one after the other. Instead, it looks like they all bump into each other and move up at the same time. Why is that? What am I missing about how keys work?

Thanks once again! :slight_smile:
Anders

1 Like
8

If you want a ‘train’ of balls you can either set them off with the same speed at different time intervals (as I did) or with the same speed from different starting points.

Looking at you animation settings

//X axis
keys.push({ frame: 0, value: -10  + offset});
keys.push({ frame: 40 + offset * 10, value: 40 });
keys.push({ frame: 90, value: 40 });

//Y axis
keys.push({ frame: 0, value: 0 });
keys.push({ frame: 15, value: 0 });
keys.push({ frame: 30, value: 10 });

First thing to note is that for the x axis you set the ball position to be -30 + offset but the initial position set by the animation is -10 + offset, 20 units on so a big jump at the start. I will work on the basis of - 30 + offset in my explanation below as per https://playground.babylonjs.com/#RTEWSH#7.

For the X axis and for i = 0 to 4 inclusive
0, start x = -30, frames to reach x = 40 is 40, distance = 70, per frame = 70/40
1, start x = -28, frames to reach x = 40 is 60, distance = 88, per frame = 88/40
2, start x = -26, frames to reach x = 40 is 80, distance = 106, per frame = 106/40
3, start x = -24, frames to reach x = 40 is 100, distance = 124, per frame = 124/40
4, start x = -22, frames to reach x = 40 is 120, distance = 142, per frame = 142/40

You can see that they are all traveling at different speeds.

For the Y axis you have the animation set so that they all jump at the same time not the same location.

I think this is what you see in the PG.

1 Like
9

Thank you SO much, @JohnK! :slight_smile: I get it now.