Angry Birds style path prediction

Hello there,

Im working on a angry birds clone but in 3d. Im going to be using physics of course but Im wondering how I can draw that arc line that shows where the projectile will go.


I know how to render the line with “BABYLON.Mesh.CreateLines” with a spline but Im not sure how I can get the data to create the spline.

Has anyone done something like this already? Thanks!

1 Like

and I think that a good tool to render it would also be the Points Cloud System Points Cloud Particle System - Babylon.js Documentation


You need some maths. The path is that of a projectile, ie a parabola. To get the path you need the initial velocity, v, in units per second, of the bird and the angle of projection, a. Then t seconds after release the horizontal distance traveled is vtcos(a) and the vertical distance is vtsin(a) - 0.5 * g * t * t where g is the gravity in units per sec per sec



i make this sample to you

function ball(size,speed,speed_time, a,sphere )

size : ball size
speed : {x,y,z} first power vertical
speed_time: how much you need male it reality
a : gravity vertical;
sphere : if you make your mesh set it here else that automatically created

for 300 ball


version 11 : test for 300 balls


hey @nasimiasl,

Thats cool thx! I realized that I remembered angry birds incorrectly or I was thinking of a different game. Angry Birds has a trail behind the projectile. I think that is really useful for gameplay. I also thought that it gave you a preview path of where the ball was going to go with an arc path. So you would pull back on the slingshot and you would see a dotted line of the arc that the ball would take if you let go. Can I calculate this with the potential velocity, the current angle and the mass of the projectile?

@tkmoney Yes you can!

your slingshot pull direction should give you a calculatable initial velocity for your projectile, then its position at any given time t would be:
p(t) = p0 + vt + 1/2at^2

where p0 is your initial position, v is your starting velocity, and a is your gravitational acceleration [0,-9.81,0] (you can also add any sort of drag effect to this as well).

This is assuming you’re using a real physics model, but the key would be to calculate p(0), p(maxHeightTime), and p(hitsGroundTime) and draw a quadratic path that passes through these points.

1 Like

Hey @Drigax,

Thanks! I think I understand the gist of what your saying. I wish I had better math skills I would probably be able to fully grok this lol. Is it possible to create a PG to clarify? If not I understand. Thanks!

Sure, I’ll put together a playground in the next few days to show you what I mean. I need to learn a bit more about the babylonian way to handle a click + drag + release event with constant updating of the mouse position