## Roadmap of Content:

- Maths Revision
- Vectors

## Angle units – Pi radians vs degrees

Let’s establish that half circle is 180 degrees and Pi radians, and from there on we can conclude on several facts as below.

Now, I’m sure you are able to understand the degrees pretty well. It’s the Pi radian measurement that’s bogging your mind. However, its actually quite elegant. You see semi-circle makes 1 Pi radians, a perpendicular angle makes 0.5 Pi radians and you can just keep dividing by two to get the exact angle you like.

Having said that, I take a neutral stand when it comes to preferences. Cos unit of degrees are just drilled into my brain. Im sure that’s the case for many of us, so let’s come up with a formula that will solve this issue. We use ratios and a little algebra.

So all the sudden, things are a little easier. Well, that’s what revision is suppose to be…

## Coordinate Spaces

Here’s a quick note on coordinate spaces: that of Flash and that of Cartesian. Spot the difference!

If you say, “the y is inverted!” you are right! Not just that, the whole coordinate space is inverted on y. If positive angle increment is anti-clockwise, now its the other direction and vice versa for the negative angle increment.

Im sure you can extend the coordinate space into its negative regions and be comfortable manipulating it because they’re basic stuff. Otherwise, we’ll still have a chance to see them in topic of Vectors.

## Pythagoras’ Theorem

Pythagoras’ a Greek and he’s a brilliant mathematician (more of a philosopher back then) who arrived at a theorem shown as below.

The diagonal side (aka hypothenus) power 2 is the sum of horizontal and vertical side, each power by 2.

Ok, so let’s make use of it. Here’s a question. Get the length of line in image. We know the two bounding coordinates.

So its a trivial question. So here’s the answer.

This problem is frequently met so you are advised to program it into a class file for quick reference. It’s applied when we’d like to get the magnitude of a vector. Given a case where we have the following information, we should know to quickly remember Pythagoras.

Another application of it leads to collision detection. Once you have understood this fundamental, you’ve got Pythagoras!

## Trigonometry

The topic of trigonometry cannot escape GP. In fact, it forms the backbone of the whole GP. Let’s go through some of the bacis: sine, cosine and tangent.

Here’s a diagram that will sum them up:

Note that these basics are used to translate polar coordinate to Cartesian coordinate. Recall polar coordinate is written as (magnitude, angle) while Cartesian coordinate is (x, y). For example write in Cartesian coordinate format the polar coordinate (10, 30).

So there you have it. Another important application of trig is to quickly obtain the angle of triangle given sides x and y. Check out image below.

This case happens when you want to do the reverse: translating from Cartesian to polar. Given Cartesian coordinate (x1, y1) measured __origin__, we shall use the Pythagoras’ theorem to get the magnitude and inverse tangent of side y over x to get angle.

## Collision – Circle/ Circle

This tutorial features collision detection between two circles using distance. First, lets aquaint ourselves with the variables. Ar and Br are radius of circle A and B. Iv included an image below to clarify my point.

Next, you will need to form the condition of collision. When colliding, the two balls will touch or even penetrate each other. This inherently means that distance between the centers of circle A and B will be equal or shorter than the sum of their radius. Observe the image below.

Iv included required source code here for you to work along. First, there’s this Ball.as class so that you can easily call circular sprites. Check below:

package { import flash.display.Sprite; /** * Ball sprite * @author Shiu */ public class Ball extends Sprite { private var _radius:Number; private var _col:Number; public function Ball(radius:Number = 10, col:Number = 0xFF6633) { this._radius = radius; this._col = col; this.draw(); } //function to draw the sprite according to specifications private function draw():void { graphics.beginFill(_col); graphics.drawCircle(0, 0, _radius); graphics.endFill(); } public function get radius():Number { return _radius; } public function set radius(value:Number):void { _radius = value; this.draw(); } public function get col():Number { return _col; } public function set col(value:Number):void { _col = value; this.draw(); } } }

Then here comes the bunch of code for your collision in Main.as

package { import flash.display.Sprite; import flash.events.Event; /** * Purpose: Demo on circle/ circle collision detection * @author Shiu */ public class Main extends Sprite { private var b:Ball; private var c:Ball; public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point c = new Ball; addChild(c); c.x = 300; c.y = 500; c.radius = 30; c.col = 0x339911; b = new Ball; addChild(b); b.x = 200; b.y = 200; //placing in the sprites b.addEventListener(Event.ENTER_FRAME, move); // adding in animation } //b will always move toward c private function move(e:Event):void { var vec:Vector2D = new Vector2D(c.x - b.x, c.y - b.y); vec.setMagnitude(10); if (collide(b,c)) b.removeEventListener(Event.ENTER_FRAME, move); else {b.x += vec.x; b.y += vec.y;} } //collision detection private function collide (b1:Ball, b2:Ball) :Boolean { var isCollide:Boolean = false; var dist:Vector2D = new Vector2D(b1.x - b2.x, b1.y - b2.y); if (dist.getMagnitude() <= b1.radius +b2.radius) isCollide = true; return isCollide; } } }

You may also get your code here.

## Hello world!

Welcome to WordPress.com. After you read this, you should delete and write your own post, with a new title above. Or hit Add New on the left (of the admin dashboard) to start a fresh post.

for

Here are some suggestions for your first post.

- You can find new ideas for what to blog about by reading the Daily Post.
- Add PressThis to your browser. It creates a new blog post for you about any interesting page you read on the web.
- Make some changes to this page, and then hit preview on the right. You can alway preview any post or edit you before you share it to the world.