HTML and CSS Reference
In-Depth Information
The size of the resulting matrix is the number of rows in the first matrix by the number of columns in the
second matrix.
Now let's see some matrix multiplication for something that you can actually use: coordinate rotation.
Hopefully this scaling example will make it more clear what we're doing.
Coordinate rotation with a matrix
First, we'll use the 3D point matrix:
x y z
This holds the coordinates of the point you want to rotate. Now you need a rotation matrix, which, as you
know, can rotate on any one of three axes. You'll create each of these types of rotation as separate
matrices. Let's start with an x-axis rotation matrix:
1 0 0
0 cos sin
0 -sin cos
This matrix contains some sines and cosines, but sines and cosines of what? Well, it's the sine or cosine
of whatever angle you're rotating by. If you're rotating that point by 45 degrees, it would be the sine and
cosine of 45 degrees. (Of course in code, you'd use radians.)
Now, let's perform matrix multiplication with this and a 3D point matrix and see the results.
1 0 0
x y z * 0 cos sin
0 -sin cos
For that, you get:
(x * 1 + y * 0 + z * 0) (x * 0 + y * cos - z * sin) (x * 0 + y * sin + z * cos)
Cleaning that up gives you:
(x) (y * cos - z * sin) (z * cos + y * sin)
We can write this in JavaScript as:
x = x;
y = y * Math.cos(rotation) - z * Math.sin(rotation);
z = z * Math.cos(rotation) + y * Math.sin(rotation);
If you look back to the section about 3D coordinate rotation in Chapter 15, you can see this is exactly how
to accomplish x-axis rotation. This isn't a big surprise, as matrix math is just a different way of organizing
various formulas and equations.
From here, you can easily create a matrix for y-axis rotation:
cos 0 sin
0 1 0
-sin 0 cos
