Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Logic to Rotate Coordinates around a center point.
New Posts  All Forums:Forum Nav:

# Logic to Rotate Coordinates around a center point.

So, i have an array of data thats in [X,Y] and i need to be able to rotate all of the points around another [x,y] point.

So, if i had a square: [0,0] , [0,10] , [10,10] , [10,0] and wanted to rotate it 45deg around [5,5] , whats the best approach for doing so?

Only thing i can think of is to enumerate trough each node, calculate the distance between them, then sin() or cos() or whichever one it is to get the angle, then add 0,90,180,270 deg based upon the quadrant it is around the central point with a condition to check [+/-x , =/-y]. With that, i can then add 45deg to that angle with the given distance it needs to be, and once again with the simple sin\cos\tan get the new X,Y coordinates.

I'm doing this in javascript and I have some code I wrote from before to give me the new location once i figure out the angle and distance to that point.
Code:

function calcXY(xIn, yIn, angle, distance)
{

var b = angle / RADIAN;
var xOut= (Math.sin(b) * distance) + xIn;
var yOut = (Math.cos(b) * distance) + yIn;

var out = [];
out[0] = xOut;
out[1] = yOut;
return out;
}



Does anyone have some code or logic that's better?
 Zev's Comp (15 items)
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V...
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S...
 Zev's Comp (15 items)
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V...
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S...
Quote:
Originally Posted by Mrzev

So, i have an array of data thats in [X,Y] and i need to be able to rotate all of the points around another [x,y] point.

So, if i had a square: [0,0] , [0,10] , [10,10] , [10,0] and wanted to rotate it 45deg around [5,5] , whats the best approach for doing so?

Only thing i can think of is to enumerate trough each node, calculate the distance between them, then sin() or cos() or whichever one it is to get the angle, then add 0,90,180,270 deg based upon the quadrant it is around the central point with a condition to check [+/-x , =/-y]. With that, i can then add 45deg to that angle with the given distance it needs to be, and once again with the simple sin\cos\tan get the new X,Y coordinates.

I'm doing this in javascript and I have some code I wrote from before to give me the new location once i figure out the angle and distance to that point.
Code:

function calcXY(xIn, yIn, angle, distance)
{

var b = angle / RADIAN;
var xOut= (Math.sin(b) * distance) + xIn;
var yOut = (Math.cos(b) * distance) + yIn;

var out = [];
out[0] = xOut;
out[1] = yOut;
return out;
}



Does anyone have some code or logic that's better?

Matrix multiplication is
Code:
R(x) = [ [cos(x) -sin(x)]
[sin(x) cos(x)] ]
multiply that by a vector [ [a] [b] ] to get the rotated vector

Here's some info on vector multiplication:
https://en.wikipedia.org/wiki/Matrix_multiplication#Examples_of_matrix_products

https://en.wikipedia.org/wiki/Rotation_matrix

If you're doing this a lot, consider sylvesterJS
http://sylvester.jcoglan.com/

If you do this a lot, you could also consider taking one of the many C libraries and compiling it to JS to run via asm.js
Edited by hajile - 4/8/14 at 7:57pm
Quote:
Originally Posted by hajile

Matrix multiplication is
Code:
R(x) = [ [cos(x) -sin(x)]
[sin(x) cos(x)] ]
multiply that by a vector [ [a] [b] ] to get the rotated vector

Here's some info on vector multiplication:
https://en.wikipedia.org/wiki/Matrix_multiplication#Examples_of_matrix_products

https://en.wikipedia.org/wiki/Rotation_matrix

If you're doing this a lot, consider sylvesterJS
http://sylvester.jcoglan.com/

If you do this a lot, you could also consider taking one of the many C libraries and compiling it to JS to run via asm.js

Also note that the rotation matrix rotates the points around the origin. Mrzev wants to be able to rotate around an arbitrary [x ,y] point, so he needs to translate the points to make [x, y] the origin, rotate, and translate back.

Translating the points is more straightforward- just add/subtract each point by [x, y].
 Mining with 750 Ti (11 items)
 Mining with 750 Ti (11 items)
It makes me laugh to think a few years ago i would never need to multiply matrices. http://www.overclock.net/t/1007837/whats-the-point-of-multiplying-matrices/0_50
 Zev's Comp (15 items)
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V...
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S...
 Zev's Comp (15 items)
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V...
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S...
I understand this conceptually... but my mind is a bit blown...

So, basically, i offset all the points off my centerpoint by subtracting the x,y , then I apply the Active transformation you mentioned above, then to re-add the centerpoint offset back to all of them.

I still need to wrap my mind about how to write the code, but i think i have an idea. I think ill give Sylvester a look, but if its just some simple calculates id rather just write my own method.

I definitely appreciate the advice. I didn't even think about matrix transformations.
 Zev's Comp (15 items)
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V...
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S...
 Zev's Comp (15 items)
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V...
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S...
Quote:
Originally Posted by Mrzev

I understand this conceptually... but my mind is a bit blown...

So, basically, i offset all the points off my centerpoint by subtracting the x,y , then I apply the Active transformation you mentioned above, then to re-add the centerpoint offset back to all of them.

I still need to wrap my mind about how to write the code, but i think i have an idea. I think ill give Sylvester a look, but if its just some simple calculates id rather just write my own method.

I definitely appreciate the advice. I didn't even think about matrix transformations.

You got the order right. In your example from the first post, you offset the points by moving them 5 down and 5 left, do the rotation, them move the rotated points 5 up and 5 right (the opposite of what was done in the first operation).

Matrix operations are not commutative, so the order of operations matter in the result that you get.

This also points out the difference between world coordinates and local coordinates, but hope you're not too confused by that
 Mining with 750 Ti (11 items)
 Mining with 750 Ti (11 items)
UPDATED:
I WIN!

http://jsfiddle.net/84dPK/2/
Code:
            var RADIAN = 180 / Math.PI;
var angle = 45;
var xOffset = 2.5;  // rotation point
var yOffset = 2.5;  // ^^^^^^^^^^^^^^
var blah = [[0, 0], [0, 5], [5, 5], [5, 0]];

for (var j = 0; j < 4; j++)
{
var xTemp = blah[j][0] - xOffset;
var yTemp = blah[j][1] - yOffset;

blah[j][0] = xNew + xOffset;
blah[j][1] = yNew + yOffset;

}



Edited by Mrzev - 4/10/14 at 1:29pm
 Zev's Comp (15 items)
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V...
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S...
 Zev's Comp (15 items)
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V...
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S...
New Posts  All Forums:Forum Nav:
Return Home
Back to Forum: Coding and Programming
• Logic to Rotate Coordinates around a center point.
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Logic to Rotate Coordinates around a center point.