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.

post #1 of 7
Thread Starter 
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... 
  hide details  
Reply
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... 
  hide details  
Reply
post #2 of 7
Quote:
Originally Posted by Mrzev View Post

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

To read more about this more generally:
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
post #3 of 7
Quote:
Originally Posted by hajile View Post

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

To read more about this more generally:
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].
post #4 of 7
Thread Starter 
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... 
  hide details  
Reply
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... 
  hide details  
Reply
post #5 of 7
Thread Starter 
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... 
  hide details  
Reply
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... 
  hide details  
Reply
post #6 of 7
Quote:
Originally Posted by Mrzev View Post

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 tongue.gif
post #7 of 7
Thread Starter 
UPDATED:
I WIN!

http://jsfiddle.net/84dPK/2/
Code:
            var RADIAN = 180 / Math.PI;
            var angle = 45;
            var rad = angle / RADIAN;
            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;
               
               var xNew = (xTemp *   Math.cos(rad))  + (yTemp * (Math.sin(rad)));
               var yNew = (xTemp * (-Math.sin(rad))) + (yTemp * (Math.cos(rad)));
    
               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... 
  hide details  
Reply
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... 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Coding and Programming
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Logic to Rotate Coordinates around a center point.