Tutorial Tuesday: Rotating One Vector Around Another

Tutorial Tuesday is going to be a (hopefully) weekly thing where I write a tutorial.  On Tuesday.

All drawings were made in Microsoft Paint and are crappy.

This week is how to rotate one vector around another, one of the first problems I solved when working on 3D graphics and physics.  I'm sure there's plenty of information out there on how to do this by some nerd using matrices, but I'm going to explain my process for solving it just using vectors.

First let's start with 2D, so we want to rotate the black vector a certain amount (rotation angle), to the orange vector.

One way to do this would be to take the arc tangent of the black vector, add the rotation angle to that angle, and multiply the cosine of the new angle times the length of the vector for the X, and multiply the sine times length for the Y.  But that would be slow and dumb.  Arc tangent (atan2) is slow, and calculating the square root for the length is also slow.

Instead we'll use the tangent method.  First we calculate the tangent (the green vector) of the black vector, which is simple in 2D the tangent X is negative Y, and tangent Y is X.

Now that we have the original vector and its tangent, calculating the new vector is pretty simple.  It's the original vector times the cosine of the rotation angle plus the tangent vector times the sine.

Onto 3D, we have a black vector that we want to rotate around the blue vector, which is pointing straight up because that was the easiest to draw, but could be pointing any direction.

We're going to use a similar method to the 2D version, first we'll calculate the tangent to the original vector (black vector) and the rotation axis (blue vector, which should be normalized) using a cross product, which gives us the green vector.  Next we find the vector tangent to the green vector and the rotation axis using another cross product, which gives us the yellow vector.

Now we have the two vectors we need for rotation, just like in the 2D version.  We multiply the yellow vector times the cosine of the rotation angle add that to the green vector times the sine, and we have the rotation around the rotation axis.

But we're missing something, the length of the original black vector along the rotation axis, which is just the rotation axis times the dot product of the black vector and the rotation axis.  We add that to the other vector and we now have the orange vector, which is the black vector rotated around the blue rotation axis by the rotation angle.

That's it for this week, if you liked or didn't like this tutorial consider supporting me by buying my album of games and leaving a giant developer tip.  Tune in next week when I might write another of these things about something.