UFCEKU-20-3Web Games Programming Game Math. UFCEKU-20-3Web Games Programming Agenda Revise some...

43
UFCEKU-20-3 Web Games Programming Web Games Programming Game Math

Transcript of UFCEKU-20-3Web Games Programming Game Math. UFCEKU-20-3Web Games Programming Agenda Revise some...

UFCEKU-20-3Web Games Programming

Web Games Programming

Game Math

UFCEKU-20-3Web Games Programming

Agenda

Revise some basic concepts Apply Concepts to Game Elements

UFCEKU-20-3Web Games Programming

The Natural Numbers

1 2 3 4 5 6 7

The Natural Numbers 1..infinity

UFCEKU-20-3Web Games Programming

The Integers

-3 -2 -1 0 1 2 3

The integers = whole numbers

positive, negative or zero

Computer data type

int, uint (AS3)

name depends on language in use

UFCEKU-20-3Web Games Programming

Rational Numbers

-3 -2 -1 0 1 2 3

The Rationals = fractions with an exact decimal value e.g 1/2 = .5

positive or negative

Computer data type

long, double ,float, real, Number (AS3)

name depends on language in use

UFCEKU-20-3Web Games Programming

Irrational Numbers

-3 -2 -1 0 1 2 3

The irrationals = fractions without an exact decimal value e.g 1/3 = .33333

positive or negative

Computer data type as for rationals

long, double ,float, real, Number

UFCEKU-20-3Web Games Programming

The Number Line: Root 2

-1 0 1 2 3 4 5

Square root of 2 1.41421

UFCEKU-20-3Web Games Programming

The Golden Ratio - Phi

-1 0 1 2 3 4 5

The Golden Ratio 1.618033897

UFCEKU-20-3Web Games Programming

The Natural Logarithmic Constant e

-1 0 1 2 3 4 5

e = 2.7182818284…

UFCEKU-20-3Web Games Programming

The Number Line

-1 0 1 2 3 4 5

PI the Relationship between the diameter of a circle and its circumference 3.142 (easy)3.141592654 (calculator)

valueForPI = Math.PI; // AS3 (3.141592653589793)

Hmm… pie

UFCEKU-20-3Web Games Programming

The Number Line

Attributes of a Circle:

RadiusDiameterCircumferenceArea

Radius =rDiameter =2rCircumference = C = PI x DArea = PI x r x r

UFCEKU-20-3Web Games Programming

ActionScript

const PI:Number = Math.PI;// define a constant

public function areaOfCircle(radius:Number):Number {

var area:Number;area = PI * radius * radius;return area;

}

UFCEKU-20-3Web Games Programming

RadiansRadian is a natural measurement of angular rotation

There are 2PI radians in a circle (~= 6.284)

UFCEKU-20-3Web Games Programming

Radians v Degrees

There are 2 PI radians in a circle = 3.142 x 2 = 6.284

There 360 degrees in a circle

One radian = 360 / 6.284 approximately 57.288 degrees

Formula for changing radians to degrees :

degrees = (360 / 2PI)

Formula for changing degrees to radians :

radians = degrees x (2PI / 360)

UFCEKU-20-3Web Games Programming

Pythagoras

a

b

c

a2 = b2 + c2

UFCEKU-20-3Web Games Programming

Pythagoras

a2

b2

c2

UFCEKU-20-3Web Games Programming

Pythagoras

a = 5

c = 3

b = 4

UFCEKU-20-3Web Games Programming

Pythagoras

a2 = 42 + 32

a = 16 + 9

a = SQRT (25)

a = 5

UFCEKU-20-3Web Games Programming

Application to Gamesx

y

P1 (x1, y1)

P2 (x2, y2)

Length = x2 - x1

Length = y2 - y1

UFCEKU-20-3Web Games Programming

Application to Gamesx

y

P1 (10, 15)

P2 (80,50 )

Length = x2 - x1 = 80 - 10 = 70

Length = y2 - y1 = 50-15 = 35

a

UFCEKU-20-3Web Games Programming

Application to Gamesx

y a

distance a = SQRT((x2-x1)2 + (y2 - y1)2)

UFCEKU-20-3Web Games Programming

ActionScript

// distanceXY calculates the distance between two points x and y// and returns the resulting value

public function distanceXY(pointX1, pointY1, pointX2, pointY2:int):Number{var distance:Number;distance = Math.sqrt((pointX2-pointX1) *(pointX2-pointX1) + (pointY2-pointY1) * (pointY2-pointY1));

return distance

}

UFCEKU-20-3Web Games Programming

Trigonometry

1-1

1

-1

cosine

s

I

n

e

Tan

UFCEKU-20-3Web Games Programming

Sine Values

1-1

1

-1

cosine

s

I

n

e

Rotate line through some angle

Read value off sine axis

UFCEKU-20-3Web Games Programming

33 degrees

Sineread sine value

angle

about 0.52

UFCEKU-20-3Web Games Programming

Cosine Values

1-1

1

-1

cosine

s

I

n

e

angle 45 degrees

UFCEKU-20-3Web Games Programming

Tan Values

1-1

1

-1

tan

Rotate line through some angle (45)

Read value off tan axis

tan

tan(45) = 1

UFCEKU-20-3Web Games Programming

Tan Values

1-1

1

-1

cosine

s

I

n

e

Rotate line through some angle(65 degrees)

Read value off tan axis(about 2.7)

UFCEKU-20-3Web Games Programming

Tan Values

1-1

1

-1

cosine

s

I

n

e

Rotate line through some angle(89 degrees)

Read value off tan axis(about 57.289)

UFCEKU-20-3Web Games Programming

Tan 90 !

1-1

1

-1

cosine

s

I

n

e

Rotate line through some angle(90 degrees)

Lines parallel -tan 90 not defined

UFCEKU-20-3Web Games Programming

Tan > 90

1-1

1

-1

cosine

s

I

n

e

Rotate line through some angle(135 degrees)

value read fromthis axis (-1)

UFCEKU-20-3Web Games Programming

Trigonometric Ratios

sine of the angle = opposite / hypotenuse

cosine of the angle = adjacent / hypotenuse

tan of the angle = opposite / adjacent

hypotenuse

adjacent

Angle in degrees = 1/sine etc.

opposite

UFCEKU-20-3Web Games Programming

Trig Ratios

sine of the angle = opposite / hypotenuse

cosine of the angle = adjacent / hypotenuse

tan of the angle = opposite / adjacent

SOH CAH TOA

UFCEKU-20-3Web Games Programming

Finding the angle to a point

point(x1,y1)

Point (x2, y2)

angle theta?

UFCEKU-20-3Web Games Programming

Finding the angle to a point

point(x1,y1)

Point (x2, y2)

UFCEKU-20-3Web Games Programming

Finding the angle to a point

point(x1,y1)

Point (x2, y2)

angle theta?

UFCEKU-20-3Web Games Programming

Use the tangent formula

point(x1,y1)

point (x2, y2)

angle theta

tan theta = opposite / adjacent

tan theta= (y2-y1) / (x2-x1)

the angle = 1/tan (theta)

atan(theta)

UFCEKU-20-3Web Games Programming

Calculate for each frame

point(x1,y1)

point (x2, y2) (moving sprite)

angle theta?

UFCEKU-20-3Web Games Programming

Some tan angles point to the same value…

1-1

1

-1

cosine

s

I

n

e

tan 225 =1

tan 45 =1

UFCEKU-20-3Web Games Programming

Using the atan2 function

arctan(x) function may return same angle value for two different points if in certain quadrants - would need to determine which is correct for direction required

Use atan2(y,x) specially designed function, which by usingnumbers in the complex plane, returns one unique valuefor any angle

Value is returned in radians - convert to degrees withappropriate formula

UFCEKU-20-3Web Games Programming

ActionScript

// definition in GameMath.aspublic function pointAtSprite(xPoint:Number, yPoint:Number, pointerX:Number, pointerY:Number):Number {

var dx:Number = xPoint - pointerX;var dy:Number = yPoint - pointerY;

// determine angle and convert to degreesvar pointAngle:Number = Math.atan2(dy,dx);var pointDegrees:Number = 360*(pointAngle/(2*Math.PI));

return pointDegrees;

} //pointAtSprite

stage.addEventListener(Event.ENTER_FRAME, getPointAngle);

function getPointAngle(event:Event){pointAtSpriteAngle= gameMath.pointAtSprite(boat_mc.x, boat_mc.y, pointer.x, pointer.y);pointer.rotation = pointAtSpriteAngle;// instance name of gun turret sprite};

UFCEKU-20-3Web Games Programming

Game Math:Applications

Used to calculate sprite positions and directions Determine distances between game objects (Pythagoras)

Use distance between objects for collision detection purposes Change game state based on game sprites positions in game world

Give sprites speed and a known direction (Trigonometry SOH CAH TOA) Use atan2 to follow or point at moving sprite In 3D games, math is used to orientate objects in three coordinate

systems x,y,z Used to construct formulae which implements sprite behaviours for

physics - such as acceleration, momentum, friction.

UFCEKU-20-3Web Games Programming

The Prime Numbers

2 3 5 7

The distribution of Prime numbers is the most important unanswered question in Mathematics - can you find a formula to say if a given number is a Prime number?

2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97

If you can you will probably win a Nobel prize and be famous forever!

A Prime number is only divisible by 1 and itself