HTML5 Game - Algebraic Equations for Transformations

Translate Equation

First, the following equation shows the equations for translating (x, y) to (x', y').

x' = x + dx 
y' = y + dy 

The equations add a delta x, signified as dx, to the x coordinate, and a delta y, signified as dy, to the y coordinate.

For example, if you translate (5, 10) to (10, 20), delta x would be 5 and delta y would be 10.

x' = 5 + 5 
y' = 10 + 10 

Scaling Equation

The equations for scaling are.

x' = x times sx 
y' = y times sy 

The equations multiply a scale x, signified as sx, by the x coordinate, and a scale y, signified as sy, by the y coordinate.

For example, if you scale (5, 10) to (40, 60), scale x would be 8 and scale y would be 6.

x' = 5 times 8 
y' = 10 times 6 

Rotating Equation

The equations for rotating use some trigonometry.

x' = x times cos(angle) times (y times sin(angle)) 
y' = y times cos(angle) + (x times sin(angle)) 

If you rotate (5, 10) 45 degrees about (0, 0), you end up at (3.5, 10.6).

x' = 5 times cos(Math.PI / 4) times (10 times sin(Math.PI / 4)) 
y' = 10 times cos(Math.PI / 4) + (5 times sin(Math.PI / 4)) 

Related Topic