The Math Behind the Spinning Catch Game

# The Math Behind the Spinning Catch Game

We can define the main point of Spinning Catch game as a ball which is moving in circular motion. Probably, there is tens of different way to achieve this movement. But I will introduce you how I did that.

Let’s start with the function that provide circular motion;

``````render(delta){
//rotate the main player ball
let x = (132*Math.cos(this.xangle))+this.scene.width/2;
let y = (130*Math.sin(this.yangle))+448;
this.ball.setX(x);
this.ball.setY(y);
if(this.direction){
this.xangle += this.speed * delta;
this.yangle += this.speed * delta;
} else {
this.xangle -= this.speed * delta;
this.yangle -= this.speed * delta;
}
}``````

The render function executes 60 times in 1 second, or at least we hope that :) That allows us to provide 60fps smooth gaming experience for users. Maybe you realized; it takes one parameter “delta”. Delta gives us how much milliseconds passed since last time render function executed.

For example, if our render function works 60 times in 1 seconds as we expected the delta value will be 1000/60 = 16.6666. With using this value we can modify our movements, so even at FPS drops the ball can move as should be.

💡
Note: The delta is coming from PhaserJS update function. You can check from Phaser documentation for more details.

## So how you can find X and Y?

This is where your math knowledge comes into play. First you need to know what is Sin and Cos math functions is.

The most basic defination is, you can find the X and Y of the black dot that hits the edge of the circle, with using cos function for X and sin function for Y. But you should know that these functions will return value between 1 and -1. So if you are trying to find coordinates on 130px wide circle, you should multiply your results with 130.

Then I am adding some more value to move the circle to the center of the page.

Let’s make an example to understand this better. But this time I will use P5JS to make everything easier.You can go to https://editor.p5js.org/ and continue practicing with me.

This is our codes at first;

``````function setup() {
createCanvas(600, 400);
}

function draw(){

}``````

Our setup function will run once and we are creating a new canvas with 600px width and 400px height. draw function is similar to PhaserJS update function and will run 60 times in 1 second. Let’s draw our circle;

``````function setup() {
createCanvas(600, 400);
}

function draw(){
background(220);
fill(255, 255, 255);
circle(width/2, height/2, 200);
}``````

So we specify gray background and draw a 200px wide circle at the center of the canvas. Now, lets add smaller red circle;

``````let angle = 0;

function setup() {
createCanvas(600, 400);
}

function draw(){
background(220);
fill(255, 255, 255);
circle(width/2, height/2, 200);

fill(255,0,0);
circle(width/2, height/2, 20)

angle += 0.03;
}``````

We define angle variable and increased it 0.03 everytime draw function executed. Because of it will run 60times in 1 second we increase really small value.

Then we added 20px wide circle at the center of the canvas. Now let’s move this little red circle. If we change X property of the circle with using cos function we can see that our circle will move side to side. Update this line;

``circle(width/2, height/2, 20)``

Like this;

``circle(width/2 + (cos(angle)*100), height/2, 20)``

And for the same line if we update Y property of the circle with using sin function we can see circular motion;

``circle(width/2 + (cos(angle)*100), height/2 + (sin(angle)*100), 20)``

That’s it :)

If you have any question you can ask from the comments :)

Don’t forget to follow me on twitter and download the Spinning Catch game for iOS and Android.