Someone asked me this earlier today, and i made this code snippet and I figured i might as well share it and save it for myself.

To rotate a **vector**, or for that matter a linesegment (which is just two vectors), and again a polygon (which is just n linesegments). All you have to do is first translate the points so that their origin is at zero. Using a linesegment as an example, that means finding the midpoint between A and B, which is (A + B)/2 then subtracting A and B by -midpoint. Then applying cosine/sine for the x/y components respectively.

Here is an example of that – it’s in javascript but you get the idea.

rotateLinesegment: function(pointA, pointB, angle, center) { // Find the mid-point between A and B - i make a copy of pointA just to be safe if( !center ) { var center = pointA.Copy(); center.Add( pointB ); center.Multiply( 0.5 ); } var na = pointA.Copy(); na.Subtract(center); var nb = pointB.Copy(); nb.Subtract(center); // Rotate each component in the vector by angle var rotateVector = function( v, angle ) { var s = Math.sin(angle); var c = Math.cos(angle); var nx = c * v.x - s * v.y; var ny = s * v.x + c * v.y; v.x = nx; v.y = ny; }; // Rotate, then untranslate it back to center rotateVector(na, angle); na.Add( center ); // Rotate, then untranslate it back to center rotateVector(nb, angle); nb.Add( center ); pointA = na; pointB = nb; return {pointA: pointA, pointB: pointB} } |

That’s for rotating a **linesegment**.

To **rotate a polygon** you have to make a single tiny change.

Instead of calculating the center by finding the midpoint between line AB, pass the center of the polygon.

How do you find the *barycenter/centroid* of the polygon. It’s actually pretty simple. The barycenter for a polygon with N points, is found by simply adding up all the points, and dividing by the number of points.

For example `pointA.x + pointB.x + pointC.x / 3 = center.x`

, repeat for Y

Once you have the barycenter, pass that as the value for `center`

, and rotate as shown above, and then add all points by that value. If you want to rotate around an arbitrary point in the polygon simple subtract all the points by that value instead.

var center = new Vector2d(0,0); // Each polygon is made up of N linesegments, each linesegment is made up of 2 points for(var i = 0; i < polygon.linesegments.length; i++) { center.x += polygon.linesegments[i].a.x; center.y += polygon.linesegments[i].a.y; center.x += polygon.linesegments[i].b.x; center.y += polygon.linesegments[i].b.y; } // averaging it out, will give us the center of the polygon - (note multiplying length by 2 because we did it twice for each linesegment) center.x /= polygon.linesegments.length*2; center.y /= polygon.linesegments.length*2; // Rotate each linesegment var angle = 45 * Math.PI/180; // 45 degrees in radians for(i = 0; i < polygon.linesegments.length; i++) { var line = polygon.linesegments[i]; var newAB = this.rotateLine(line.a, line.b, angle, center); line.a = newAB.a; line.b = newAB.b; } |

## 1 Comment

## Alex

September 12, 2013 at 11:55 amWhat javascript library are you using that include those “Copy”, “Add”, “Multiply” and “Subtract” methods?