Rotate vector / line-segment / polygon around arbitrary point

Rotate vector / line-segment / polygon around arbitrary point

onedayitwillmake One comment
math snippet

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 am

What javascript library are you using that include those “Copy”, “Add”, “Multiply” and “Subtract” methods?

 Reply

Leave a Reply


*