# Home > News >

14. November 2012

Ok… is it engine release day?

Anyway, again the title says it all, CryEngine 3.4.3 was released today.  If you are un-aware, CryEngine is a 3D game engine like UDK or Unity, which is available for free to get started ( 20% royalty on shipped titles ).  In addition to the FarCry series of games, Mechwarrior Online is powered by CryEngine.  If nothing else, this engine is capable of creating extremely pretty games!

## Top Features:

• Dedicated Server
• Sandbox Welcome screen, link to docs & smart open
• Terrain precision/smoothing improved
• Many tweaks/fixes/cleanups to the Sandbox UI
• SSAO improvements
• Improved SSR
• Box projected cubemaps
• Improved DX9 support for Environment Probes

Other than the briefest look, I haven’t looked all that closely at the CryEngine SDK.  Therefore I have no idea if this is a big release or not…  dedicated server sounds like a handy addition…

Anyway, you can read full details here.

#### Month List

GameDev math recipes: Rotating one point around another point

# Home > Programming >

24. November 2012

It is quite common to want to rotate one point relative to another the location of another point.  This math recipe looks at exactly this process.

## Just the math

angle = (angle ) * (Math.PI/180); // Convert to radians

var rotatedX = Math.cos(angle) * (point.x - center.x) - Math.sin(angle) * (point.y-center.y) + center.x;

var rotatedY = Math.sin(angle) * (point.x - center.x) + Math.cos(angle) * (point.y - center.y) + center.y;

return new createjs.Point(rotatedX,rotatedY);

## Description

The angle conversion is entirely dependant on your math libraries.  In the case of JavaScript's Math library ( and the standard C++ libraries ), cos and sign expect the angles to be expressed in radians.  As you can see, the conversion formula is quit simple.

As to the math, the rotated location of the X value is found by taking the cos of the angle to rotate by, multiplied by the distance between the X value of the point you want to rotate and the point to rotate around minus the sin of the angle multiplied by the distance between the points, then finally add the x location of the point.  The calculation for rotating in the Y direction is basically identical, except the sin and cos calculations are swapped and you subtract instead of adding.

One thing to keep in mind here is the rotation is relative to the current position not the total rotation.  For example, if you are currently at 90 degrees and want to rotate to 135 degrees, you would use an angle of 45, not 135.

## Complete code

<!DOCTYPE html>

<html>

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

<script>

var ball1,ball2;

var stage;

function rotatePoint(point, center, angle){

angle = (angle ) * (Math.PI/180); // Convert to radians

var rotatedX = Math.cos(angle) * (point.x - center.x) - Math.sin(angle) * (point.y-center.y) + center.x;

var rotatedY = Math.sin(angle) * (point.x - center.x) + Math.cos(angle) * (point.y - center.y) + center.y;

return new createjs.Point(rotatedX,rotatedY);

}

function demo(){

stage = new createjs.Stage("theCanvas");

var g = new createjs.Graphics();

g.setStrokeStyle(1);

g.beginFill(createjs.Graphics.getRGB(0,0,255));

g.drawCircle(0,0,30);

ball1 = new createjs.Shape(g);

ball2 = new createjs.Shape(g);

ball1.x = stage.canvas.width/2;

ball1.y = stage.canvas.height/2;

ball2.x = stage.canvas.width/2;

ball2.y = 30;

//And go...

stage.update();

// onFrame will be called each "tick". Default is 50ms, or 20FPS

}

function onFrame(elapsedTime) {

// Convert from milliseconds to fraction of a second

var delta = elapsedTime /1000;

// Rotate by 90 degrees per second, or 1 full rotation per 4 seconds.

var rotateBy = 90 * delta;

// Current position of ball2

var ballPosition = new createjs.Point(ball2.x,ball2.y);

// Updated position rotated by... um... rotateBy value

var rotatedPosition = rotatePoint(ballPosition,

new createjs.Point(ball1.x,ball1.y),

rotateBy);

// Update ball's position to the newly rotated coordinates

ball2.x = rotatedPosition.x;

ball2.y = rotatedPosition.y;

stage.update();

}

</script>

<body>

<canvaswidth=400height=400id="theCanvas"style="background-color:black"/>

</body>

</html>