Cannoball Physics

[harrywatson]

Hi all ,

I've been trying to create a cannonball that flys relative to gravity

and relative to the player's mouse position on the canvas + velocity.

 

Further away the mouse cursor higher the velocity with gravity as a constant.

 

I'm using createjs and not wanting to include any physics engine.

 

Here is where I've got so far

     var w = canvas.width;      var h = canvas.height;     var ox = 20;     var oy = h - 20;    bullet1 = new createjs.Shape();    bullet1.graphics.beginFill( "black" ).drawCircle(5, 5, 10);    bullet1.graphics.beginFill( "white" ).drawCircle(2, 5, 2); // shiney spot on bullet1        bullet1.x = cannon.x;        bullet1.y = cannon.y;        bullet1.regX = 5;        bullet1.regY = 5;        bullet1.alpha = 0;        scene1.addChild(bullet1);  //  add cannonball   kaPow = false; // haven't fired the cannon yet oneback.on("click", function(){  //oneback is the background image        kaPow = true;        scene1.addChild(bullet1);        bullet1.x = cannon.x;        bullet1.y = cannon.y;     });          oneback.on("mouseup", function(){         kaPow = false;     });			    stage.on("tick", function(){    if(kaPow == true){        bullet1.rotation += 8;        bullet1.alpha = 1;     var vx = (stage.mouseX - ox) / 50;     var vy = (stage.mouseY - oy) / 50;        bullet1.x += vx;        bullet1.y += vy;        }            });

The cannonball (bullet1) moves along and across the stage.

cannon.rotation is working nicely. 

I've managed the cannonball velocity ok - ish.

and direction ok - ish. But there is heaps missing here such as time

and gravity.

 

Thanks for any insights

[msha]

        bullet1.rotation += 8;

 

This is not very accurate, because different frames may take up different amounts of time, but this code rotates the bullet the same way on every frame. You should use deltaTime(time passed since the last frame, in milliseconds).

I have not used createjs, but deltaTime is probably passed as a first argument of the tick function.

So it would be:

stage.on("tick", function(deltaTime){    if(kaPow == true){        bullet1.rotation += deltaTime * ROTATION_SPEED;

This way animations will be smoother and more accurate and have identical speeds on different machines.

---------

This is a great use case for vectors. You can have 3 vectors: positionVector, velocityVector and  accelerationVector (=gravity, acceleration in 1 millisecond). Then, on every frame, you would have something like this(just a pseudocode, but Createjs probably includes a vector class with similar syntax):

stage.on("tick", function(deltaTime) {....positionVector = positionVector.addVector(velocityVector.multiplyByScalar(deltaTime));velocityVector = velocityVector.addVector(accelerationVector.multiplyByScalar(deltaTime));...