Rotations (and intro to sine and cosine)

So many people have asked for some explanation of 3D, rotation matrices and projection that I was practically morally obliged to write this document.

Dimensions

Originally, I started this article with an introduction to dimensions, and what they meant, but I eventually figured it was just patronising. I'm sure that most of you know that a 1-dimensional space is a line, 2-dimensions is a plane, and our universe is 3-dimensional.

Points We begin this document, going straight to what you may vaguely remember from maths lessons at school, the 2D graph. In this space, we can specify the exact location of any point by stating it's coordinates. In 2 dimensions, coordinates come in pairs, one for each dimension. The first of these numbers tells you how far along the X axis this point is located, and the second tells you how far along the Y axis it is. So: A = (1, 2) B = (2½, 1½) In this article, I will always refer to points in capitals (e.g. A ). Sometimes I will colour them to help refer to the diagrams. Vectors A vector is a direction and a distance. Unlike points, they do not have a position in space. And unlike ordinary numbers (known as scalars), vectors usually have two or more parts. 2 dimensional vectors have two parts, and 3 dimensional vectors have three parts. In this article, I will always write scalars in bold (e.g. x ) and vectors bold and underlined (e.g. v ). scalar: x = 5.2 2D vector: a = (1, 3) 3D vector: b = (2, 8, 5) You could also think of a scalar as being just a 1 dimensional vector. Adding Vectors You can add together vectors with the same number of dimensions. For example: a = (1, 3) b = (3, 7) a+b = (4, 10) Multiplying Vectors and Scalers You can multiply any vector by a scalar: x = 2 a = (1, 3) xa = (2, 6)

Now that you have been introduced to points and vectors, I'm sure you're itching to know what use they are to you. In the next section, I will explain how to think of the points in terms of vectors, which can then be used to rotate the points.

As you will be aware, saying that a point A = (5,3) means that the point A lies 5 steps along the x-axis, and 3 steps along the y-axis. That is clear enough, but in the next section we will define more precisely what this means, and in a way that is flexible.

Introducing the i and j vectors

Here's where it gets interesting. We shall define two vectors, i and j, where: i = (1, 0) j = (0, 1) Now, instead of simply giving the coordinates of A and B, we can talk about them being a certain combination of i and j away from the origin. So: A = 1i + 2j = 1(1,0) + 2(0,1) = (1*1+2*0, 1*0+2*1) = (1, 2) B = 2½i + 1½j = 2½(1,0) + 1½(0,1) = (2½*1+1½*0, 2½*0+1½*1) = (2½, 1½) But, what good is this? Why do we have to think in terms of the i and j vectors? What was wrong with just thinking about the points in terms of their coordinates. Well, this way might help you to understand how rotations work.

Rotations: Once we have defined our points in terms of the i and j vectors, it becomes a simple matter to rotate those points about the origin. All we need to do is to redefine the directions of the i and j vectors. Imagine that we could rotate the i and j vectors. Doing this would also automatically rotate any point that has it's position described in terms of i and j (see image on right). Since these are different vectors now, we'll stop calling them i and j, and call them u and v instead. Defining u and v for any rotation: You should remember that normally the i and j vectors are: i = (1, 0) j = (0, 1) But you may redefine them to be anything you want (and calling them u and v instead). And in doing so, your points A and B, defined in terms of u and v will move accordingly. u = (ux, uy) v = (vx, vy)

So, what should they be if you want to achieve a rotation; what should the values of u_x,u_y,v_x and v_ybe if you want to rotate the points by, say 30° ?

A close look at a 90° rotation Well, lets look at the u and v vectors very closely as they rotate: The diagram on the right shows the u vector rotated 90° in 15° steps. Also shown are the X and Y coordinates of the end point of the vector at each step. Don't bother about the exact values of the coordinates for the moment. What I'll do next is plot a graph showing how those coordinates change with angle.
The vertical change : Y-coordinate 33And here it is. The graph on the right shows how the Y-coordinate changes with the angle of rotation. You can see that, when the vector first begins to rotate, its tip moves upwards quickly. But as it reaches 90°, it begins to rise slower and slower, until at 90° exactly, it has moved as high as it will go.
And the horizontal change : X-coordinate Of course, as well as moving upwards, the tip of the vector will also be moving sideways as it rotates about the origin. This next graph shows how the vector's X-coordinate changes as it rotates. You can see that, initially, the tip has an X-coordinate of 1.0. And even as it begins to rotate, it's x-coordinate stays close to 1.0. It's not until about 30° that the tip of the vector is moving sideways at full speed.

You should think about this in your head. Try to imagine an arrow rotating anti-clockwise, and think about which direction the tip is moving at each angle.

Now, many of you may already know that the two graphs just shown have names. The first graph, showing the Y-coordinate is known as a sine wave (or sin for short). The second, showing the X-coordinate is known as the cosine wave (or cos for short).

So, if we were to continue rotating the vector all the way round, 360°, plotting it's X-coordinate and Y-coordinate all the way, we would end up with the full sine and cosine graphs. The two curves are essentially the same, but they are 90° apart.

Using sin and cos
Now, whatever programming language you use, it will probably have built in functions to calculate sin and cos, so you should not need to worry a great deal about their exact shape for now. But it should be clear that, for any rotation, the u vector is:

    u = (cos(angle), sin(angle))

    v = (cos(angle+90°), sin(angle+90°))

    sin(angle+90°) = cos(angle)

    cos(angle+90°) = -sin(angle)

    v = (-sin(angle), cos(angle))

Rotating any point about the origin:
Now that you have rotatable u and v vectors, you can rewrite the coordinates of any point P like this:

    P = x*u + y*v

      = x*(cos(angle),sin(angle)) + y*(-sin(angle),cos(angle))

      = (x*cos(angle)-y*sin(angle), x*sin(angle)+y*cos(angle))

  procedure Rotate(x, y, angle)

    NewX = x*cos(angle) - y*sin(angle)
    NewY = x*sin(angle) + y*cos(angle)

    x = NewX
    y = NewY

  end procedure Rotate

Return to the Good Looking Textured Light Sourced Bouncy Fun Smart and Stretchy Page.