CannonBall

Hacktoberfest

Cannon ball

It is a game was built for scientific calculations project in Information Technology engineering university Click here to play.

intro

Cannonball Movement

We Use a lot of forces which affect the ball during movement and here is the forces we use

gravityForce
dragForce
windForce
liftForce
buoynancyForce

To simulate the ball movement we use Semi implicit Euler to calculate the ball position and velocity in each frame :

velocity += acceleration * dt;
position += velocity * dt;

As for calculating ball rotation we use Quaternion to produce rotation matrix which we use to calculate torque.

and we update quaternion vector as following :

updateQuaternion(vector, time) {
        const quaternionTemp = new THREE.Quaternion(vector._x * time, vector._y * time, vector._z * time, 0)
        quaternionTemp.multiply(this.quaternion)
        this.quaternion.x += quaternionTemp.x * 0.5
        this.quaternion.y += quaternionTemp.y * 0.5
        this.quaternion.z += quaternionTemp.z * 0.5
        this.quaternion.w += quaternionTemp.w * 0.5
    }

Project stucture

CannonBall
│   README.md
└───src
│   │   index.html
│   │   script.js
|   |   style.css
│   │
│   └───config
│       │   BaseTexures.js
|       |   CannonTextures.js
|       |   FlagBaseTextures.js
|       |   FlagTexture.js
|       |   GrassTexture.js
|       |   Models.js
|       |   TargetTexure.js
│   
└───physics
    │   ball.js
    │   vector.js
    |   world.js

physics folder represent the logic of the game and we implement the movement and rotation of the ball in it
src/script.js file represent the view of the game and we use Threejs library to create 3d enviroment

Tech Stack

HTML
Javascript
CSS
Threejs
Webpack

Contribute

If you are beginner take a look in contibute ,if you have any feature or you have bugs create issue and PR to resolve it